EB Design system
Helping Earbuds Achieve Consistency through a Unified Design System
Company
Earbuds
Role
Product Designer
Responsibilities
Competitive Analysis, Rebranding, User Research, Accessibility, Color Palette Creation, Typography, Spacing, Component Design
JUMP TO
Summary
Reduction in Design Inconsistencies
0 %
Reduction UI Development Time
0 %
Adherence Across Platforms
0 %
This project was all about transforming our mobile app’s design approach. By creating a cohesive design system, we aimed to unify our app’s identity, improve development efficiency, and enhance collaboration. This project set the stage for consistent branding and streamlined workflows.
Problem
Inconsistent and inefficient mobile design practices were hindering our app’s identity and scalability, creating a fragmented user experience and delaying development.
Goals
- Develop a cohesive design system that unifies our mobile app’s identity.
- Create a consistent visual experience across all screens.
- Use standardized components to boost development speed and reduce redundancy.
- Align the design system with the app’s evolving direction.
- Foster better collaboration between designers and engineers.
- Ensure the system is scalable and adaptable for future changes.
Hurdles
- New Territory: This was our first design system project, requiring us to navigate a steep learning curve.
- Limited Time: The project had to be managed alongside our primary tasks, limiting availability.
- Synchronous Development: We needed to develop the design system while the app was still being updated.
- SDK Restrictions: We had to work within the design limitations imposed by the Stream.io SDK.
Process
We focused on creating a cohesive visual identity, establishing brand principles, and implementing efficient design practices, tackling challenges head-on and emerging with a robust system.
Solution
We developed a cohesive design system to unify our app’s identity and streamline workflows. This approach focused on creating a consistent visual identity, boosting efficiency with standardized components, and ensuring strategic alignment with the app’s evolving direction.
color palette
Created a bold, bright, and accessible color palette to ensure vibrant, playful, and user-friendly designs.
typography
Selected SF Pro Rounded for iOS and Quicksand for web to balance approachability and distinctiveness.
spacing
Embraced a 4pt grid system for flexible and consistent spacing.
components
Built a component library, including buttons, forms, and niche music-related items, to enhance design consistency and efficiency.
Impact
Even though it was our first time creating a design system, it made a huge difference in our workflow and collaboration. Here’s how:
Reduced inconsistencies
Achieved a 30% reduction in design inconsistencies: Standardized components and design guidelines led to a more cohesive and visually consistent app.
Reduced development
Cut UI development time by 25%: Streamlined our design process, speeding up development and reducing redundancy.
platform consistency
Attained 80% adherence to a unified brand identity: Ensured our app’s look and feel were consistent across all platforms.
Conclusion
This was a true labor of love, and dare I say fear. I have never felt so out of my element than when I was working on this design system. The task often felt daunting, but I am so grateful to have had the opportunity to co-lead the design and implementation of this. It is far from perfect, but the knowledge and skills I learned from this ongoing project is unparalleled.
Reflection
- Evolving Process: Design systems are perpetual works-in-progress that demand iterative refinement.
- Semantic Clarity: Precise naming conventions are key for efficiency and understanding.
- Leverage Existing Resources: Using established design systems as references can provide valuable direction over starting from scratch.
- Foundational UX Principles: An early definition of UX guidelines can speed up design decisions and maintain user experience consistency.
- Starting Sooner: I wish we would have started sooner and pushed this harder to reap the benefits earlier.
- System for the Team: Building a system for the whole team to internalize showed immense value, enhancing overall workflow.
- Boss Level Challenge: Designers often view design systems as ‘boss’ level items. It was a stretch to get started, but the immediate positive impact was undeniable.
Next Steps
To continue building on our design system, we’ll focus on expanding features and refining our processes.
future features
- Integrate semantic color naming to enhance engineering efficiency.
- Develop a custom typeface to strengthen our brand identity.
- Ensure consistent application of the 4pt grid across all designs.
- Expand our component library to cover more use cases.
- Foster deeper collaboration between design and engineering teams for seamless implementation.
- Regularly update and iterate on the design system to adapt to new challenges and technologies.
