Rebuilding the Foundation
Guitar Center's Design System
At a Glance
I spearheaded the refresh of Guitar Center's existing Design System, leading my team to create a revamped design language that enhances the user experience for customers and streamlines workflows for the digital product team, ultimately driving efficiency and consistency across the organization.
Timeframe
4 Months
Methods
Design Systems, Visual Design, Interaction Design, Research
Platforms
Web, Mobile, Native App
Classification
B2C
Objective
What is the goal?
From the get-go, our team saw that the design system needed a major update. The component library we've been using wasn't as robust and usage guidelines were almost non-existent, which led to confusion and work inefficiency for designers and developers. Our goal was to collaborate and improve the usability of the design system and overall aesthetics.
Key Objectives
For Context
Guitar Center's pre-existing design system was a patchwork creation, put together by graphic designers and front-end developers before the formation of the Product Team. During my time at the company, the design system received occasional updates, but we lacked the bandwidth for a full redesign.
Before: Components & Patterns
Discovery
Research, Explore, and Understand
I began by conducting a comparative analysis using 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.
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).
In order to gain a deeper understanding of user-behavior, I resorted to usability testing to observe how users interact with key pages on Guitar Center's website and user interviews, which helped me gather qualitative data.
Lastly, I read reports from reputable sources like Baymard, IxDF, and Nielsen Norman Group to stay up-to-date on the latest design trends and best practices.
Key Findings
Users have mentioned that it's helpful to have clear labels on text fields, as well as a clear indication of which fields are required
Users have shared that they appreciate when components provide feedback and confirmation after they complete an action
Users aged 45 and older tend to prefer larger text for better visibility
Components with small touch targets often result to tap troubles
A inconsistent naming convention for components leads to communication errors between designers and developers
ABC – Always Be Curious
I've long been curious about whether users prefer using a dropdown list or a selector button when choosing options like shirt size. During a survey session with users, I presented screenshots from four major retail brands to compare their approaches. 80% of users favored the selector button, citing its convenience—they could instantly see available sizes without needing to click anything.
Ideation & Design
From Concept to Reality
As a team, we collaborated and performed an audit our website and app to find existing components, styles, and patterns. We began our ideation process by identifying and salvaging certain key components that could evolve alongside our new design system, while applying key findings we learned during the research process.
Laying Down The Foundation
With a clear understanding of the scope of the project, we opted to rebuild our design system from the ground up. We began by establishing a color palette, typography system, and icon set that would serve as the building blocks for this project.
The Foundations
Tokens Save Time
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.
Design Tokens
Details Matter
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.
Validate, Refine, Repeat
Components were validated through prototype testing, open-ended interviews to gather feedback. Throughout this process, I made design iterations based on user feedback.
Carousels
I designed the Product Card to prioritize clarity and scannability, making it easy for customers to quickly digest key information. I conducted a user survey to gather insights on what matters most to customers. 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.
By incorporating these findings into the design, I created Product Carousels that effectively communicates the most important information to customers, making it easier for them to make informed purchasing decisions.
Product Carousel: Recently Viewed
Product Carousel: Deals
Components in Action
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.
Challenges
Overcoming Obstacles
Finding a Resolution
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 graphic design team, we were able to resolve the issue.
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 the dev team to ensure a seamless transition.
Conclusion
In Closing
Before rolling out the new design system to developers and stakeholders, I interviewed users and had them test a prototype page for the last time to validate the newly designed components and patterns, ensuring any necessary refinements were made.
The redesign of Guitar Center's design system has improved consistency and cohesion, enhanced usability, and refreshed the company's visual identity. Most importantly, it has improved the efficiency of the design/development process, allowing for faster implementation of new features and products.
Actionable Learnings
Building a design system taught me that every detail matters, and rushing the process can compromise the overall quality and usability of the product. Clear and consistent communication with stakeholders is crucial to minimizing unnecessary revisions and ensuring alignment throughout the process. Most importantly, I learned that a design system is never truly "finished", it must continuously evolve and adapt to meet design needs and user expectations.