Rebuilding the Foundation
Rhythm Design System
Background
Guitar Center is the largest US retailer of musical instruments both in stores and online through website and mobile app.
When I joined the company, it was in the midst of a major digital upgrade, including an updated logo, and redefined design system — and this case study focuses on the design system and how I aligned product UI with the new brand across web and mobile.
Timeframe
4 Months
Platforms
Web, Mobile, Native App
Classification
B2C
Platform
Use Research, Visual Design, Accessibility, Interaction Design, Prototyping, Usability Testing
Problem
Guitar Center’s old design system was a patchwork built by graphic designers and front‑end devs before an official Product team existed. It received occasional updates during my time there, but we lacked bandwidth for a full redesign — leaving inconsistent components, limited scalability, and accessibility and cross-platform gaps that made a comprehensive revamp necessary to support a modern app experience.
Goal
Lead my team to rebuild a design language that enhances the user experience for customers and streamlines workflows for the digital product team, ultimately driving efficiency, scalability, and consistency across the organization.
Before: Components & Patterns
Discovery & Research
Audit
The process began with a thorough examination of the existing Guitar Center's e-commerce website. In collaboration with the other designers in my team, we conducted a detailed audit, capturing screenshots of every existing component in order identify scope and risk to estimate effort and prioritize work.
Testing
I ran an unmoderated test with 10 participants to record task completion rates and time-on-task on key pages on The Guitar Center website to surface pain points in the experience, and create benchmarks for comparing redesign performance.
Usability Test
Group Demographic
Total Participants: 10 (5 Desktop, 5 Mobile)
Age: 18–70
Income: $30,000+
Country: United States
By using the main navigation (not the search bar), find a list of solid body electric guitars
Narrow down the list to guitars that are made by Fender
Narrow down the list to guitars that are on sale and priced at $1,000 or more
Find a guitar that has multiple color styles and click it
Find out what material the fingerboard is made out of
Choose a color that you like and add it to your cart with Pro Coverage
Go to your cart, change the quantity of the guitar from 1 to 2
Apply the coupon code "GCFREESHIP" and proceed to checkout
Make this a 'Pickup' order
Enter your information and continue to payment
Interviews
I conducted user interviews to reveal real user needs, motivations, and frustration points that analytics don’t show, and to gather qualitative examples of confusion and friction we used to guide which design changes to prioritize.
"I noticed that there's a lot of red throughout the entire website."
User Interviews
Group Demographic
Total Participants: 5 (2 Desktop, 3 Mobile)
Age: 18–70
Income: $30,000+
Country: United States
Name three e-commerce websites where you shop at the most.
On the Product Page, are there any buttons, links, or controls confusing or inconsistent?
Does content spacing, alignment, or layout feel visually off?
How do you feel about the text sizes as you are looking into the product's detailed information?
Point out one element on the page that bothers you the most.
Do you have any other concerns or suggestions?
Survey
I ran a short survey to identify UI inconsistencies that hurt usability and trust across the Guitar Center site. I used the quantitative results as a baseline to measure post-launch success.
User Survey
Group Demographic
Total Participants: 10 (5 Desktop, 5 Mobile)
Age: 18–70
Income: $30,000+
Country: United States
Spend a few minutes on Guitar Center: browse and filter inventory, view product details, and add items to your cart.
After going through Guitar Center's site, rate how consistent the elements (buttons, text fields, product cards, etc…) feel and function across the site. (1: Very Poor, 2: Poor, 3: Acceptable, 4: Good, 5: Excellent)
Comparative Analysis
I utilized Baymard Institute's benchmarks, which gave me a glimpse into the performance of top e-commerce sites in the US and familiarized myself with industry standards and best practices for design components.
Side Note
I've wondered whether dropdowns or toggle buttons work better for option selection. I held a short User Survey on dropdowns vs toggle buttons for size selection using screenshots from major retailers — 80% preferred selector buttons because sizes were visible without extra clicks.
Research Reports
To better understand the social needs and importance of inclusive design, I delved into researching accessibility by reading reports and guidelines by AEL, Interaction Design Foundation (IxDF), and World Wide Web Consortium (W3C).
I learned key accessibility basics: text contrast 4.5:1 (normal) / 3:1 (large), ensuring everything is fully operable by keyboard with visible focus, using semantic HTML with proper headings and landmarks, writing meaningful alt text (or alt="" for decoration), and providing labeled form inputs with programmatic error messages.
Key Findings & Feedback
6/10 users took >30 seconds to find the coupon code button
Three users (aged 50+) had readability issues due to small text sizes, which hindered scanning and reading information
3/5 users on mobile reported some buttons and links were too small and made it difficult to tap
Two users expressed that the site overuses the color red, which creates visual noise and reduces clarity for CTAs and status indicators
Designers and developers have said in the past that the naming convention for components is inconsistent, therefore, leading to communication errors
Design & Ideation
Foundation
I began ideation by identifying salvageable components to evolve with the new design system and applied key research findings. With the project scope defined, we collaborated as a team to build the remaining system from the ground up, establishing a color palette, typography, and icon set as the project's core building blocks.
Tokens
I utilized design tokens and variables in Figma help maintain consistency by defining reusable values for colors, typography, spacing, and other values. They streamline the design process, making it easier to adapt themes, update styles globally, and ensure a cohesive user experience across projects.
Small Details
Users have mentioned that it's helpful to have clear labels and feedback after they complete an action. In result, I designed every component by applying precision, detailed-thought, and keeping accessibility practices in mind in order to create components the right way. Applying this approach to every component was necessary in order create a cohesive, user-friendly, and visually appealing component library.
Carousels
I designed the Product Card to prioritize clarity and scannability, making it easy for customers to quickly digest key information. After conducting a user survey showing a high-fidelity wireframe, results showed that 85% of users preferred to see the discount percentage rather than the dollar amount saved, allowing them to better understand the value of the discount. Additionally, 70% of users indicated that an "On Sale" sticker was unnecessary for Deal Products, as the discounted price already conveyed the promotional value.
Product Carousel: Recently Viewed
Product Carousel: Deals
Unity in Design
Visual consistency is crucial in a design system, as it creates a cohesive and recognizable brand identity. By using a unified visual language, including typography, color, and imagery, a design system can establish a strong foundation for user trust and engagement. Consistent visuals also make it easier for users to navigate and understand the interface, reducing cognitive load and improving overall user experience.
Validating
Before handing off the new designs for development, I composed a high-fidelity prototype of the product page for users to test to validate interaction patterns, confirm that key information (price, specs, shipping) was discoverable, verify that the key components felt intuitive, and surface any remaining UI issues.
Challenges
Color Expansion
Through out the design process, I ran into the issue of not having enough or the proper colors needed in order to design certain components, therefore I needed a more expansive color palette. Expanding the color library while maintaining brand consistency was a hurdle, but after some design experimentation and discussions with the Creative team, we were able to resolve the issue.
Design Rollout
Introducing a new design system can be a complex and nuanced process. It demands meticulous planning, including the creation of detailed guidelines and comprehensive training for developers. Furthermore, effective implementation and execution of new components require ongoing communication and collaboration with people from the Product and Development team to ensure a seamless transition.
Conclusion
Based on internal feedback, the revamped design system has been aiding designers and developers align faster, reduce handoff questions, and ship consistent interfaces. During a post-launch interview, users mentioned that the interface felt consistent, intuitive, and “clean.”
Pre and post-launch groups rated the overall look and functionality: Pre-launch responses were 20% Very Poor, 30% Poor, 40% Acceptable, and 10% Good; Post-launch they shifted to 20% Acceptable, 60% Good, and 20% Excellent. This change shows the redesign meaningfully improved perceived quality and user satisfaction.
Actionable Learnings
Building a design system taught me that every detail matters and rushing compromises quality and usability. Clear, consistent communication with stakeholders minimizes revisions and ensures alignment. Most importantly, a design system is never finished; it must continuously evolve to meet design needs and user expectations.