Challenge
We needed to create a more structured design system, with clear hierarchies and naming conventions. The design system was not well-structured, which is made it difficult to find and use the components.
Stage+ Design System Redesign
In this design project, I had the opportunity to redesign and restructure the existing design system for Stage+, a classical music app released by Universal Music in November 2022. I collaborated closely with two user researchers, two designers, and three developers.
Design Goals
Consistency
Create and maintain guidelines, and reusable components, to maintain a cohesive and unified user experience.
Scalability
Support scalability and flexibility to accommodate new features, platforms, and user requirements.
Efficiency
Create a centralized and standardized library to enable designers and developers to work more efficiently.
Accessibility
Adopt accessibility best practices in the system and guidelines.
Design Audit
I audited Stage+ for usability, accessibility, and scalability, identifying areas for future design improvements. Through a workshop with designers and developers, we pinpointed pain points and workflow bottlenecks, establishing a foundation for streamlined future iterations.
Colors
In my evaluation of Stage+'s design system, I assessed the accessibility of color usage across multiple platforms. I found inconsistencies with three different color palettes used across three devices. My goal was to unify these palettes to enhance consistency and accessibility.
Type Ramp
In the second phase, I analyzed the use of three ramps in Stage+'s design, focusing on visual hierarchy, readability, and coherence. This assessment revealed inconsistencies and areas for improvement. My goal was to align these ramps with accessibility standards to enhance content perception and comprehension for all users.
Iconography
For the third phase, I audited where each of the icons were being used. There were 3 different styles being used across all the platforms, SF Pro, Material Design, and Font Free Awesome.
Workshop Insights
Following the initial design audit, I hosted a workshop to evaluate Stage+'s design system comprehensively with the team. We identified improvement areas and developed an implementation plan. Developers shared challenges and insights on typography, color schemes, and icon design during this session.
Process Restructuring
Following the workshops and discussions, we decided that our design system process would start after project kick-off. During the collaboration phase, we would work closely with UX, Research, PMs, and other designers to ensure effective teamwork throughout the projects.
Figma Design System Restructure
Another workshop was held with designers and developers, and a well-defined structure was established to incorporate libraries aimed at centralizing design assets.
Updated Typography Scale
The previous Stage+ version had inconsistencies with three type styles and duplicated font sizes. The redesign unified the type system for better consistency and readability. We consolidated fonts, defined typography styles, set clear usage guidelines, and introduced a t-shirt sizing system for improved flexibility and scalability.
.png)
Phase 1 & Phase 2 Color Palette
Stage+'s color system initially had three separate palettes. The redesign consolidated these into a single, cohesive palette, enhancing flexibility and adaptability as Stage+ grew. This streamlined approach improved consistency and efficiency in the color selection process, facilitating a more effective design workflow.
From the global colors, we derived semantic colors for specific meanings like success, error, and warning states. This system was simple to update and expand, including component-specific color tokens.
From the global colors, we derived semantic colors for specific meanings like success, error, and warning states. This system was simple to update and expand, including component-specific color tokens.
Phase 1
Phase 2
Previous Component Cards
Originally, the card components in Stage+ were called "teasers." To promote an inclusive naming convention, the product and text departments agreed to rename them as "cards." Additionally, the badges were revised to enhance their design. It was also noted that the readability of the badges and metadata needed improvement.
Updated Component Cards
Originally called "teasers," we renamed the card components to "cards" to establish an inclusive naming convention agreed upon by the product and marketing departments. As part of this update, we also revised the badges. Additionally, we identified and addressed readability issues with the badge and metadata.
Preference Testing
I collaborated with a user researcher to conduct a preference test with 25 users in the US and Germany to evaluate recent component changes. The new card design was well-received, with 84% preferring Design A over Design B.
Outcome & Key Takeaways
- Improved accessibility and inclusivity, uniting designers, developers, and stakeholders. Established guidelines and reusable components for a cohesive user experience.
- Reduced design and technical debt by 50%, increasing flexibility for new features and platforms.
- Made the design system more efficient, fulfilling our goals, and improved decision-making. Created a centralized library for designers and developers.
- Removed outdated elements, boosting system efficiency, scalability, and maintainability.
- Incremental updates, like naming conventions, significantly improved the design system.
- Effective communication became cruicial and ensured we met our goals and continued to operate successfully and improve.
Post-Project Next Steps
After the initial redesign, we started adding documentation directly in Figma. I led the redesign of the Hero Component, focusing on optimizing space for better promotion of Stage+ content. We also updated copy elements and explored new typography options, even though this component wasn't included in the final system.
