Design System Update
UX audit of existing components and Creation of a detailed pattern library for component combinations
#designSystem
#DesignAudit
#Documentation
Scope
Duration
2 months
Role
Sr. Product Designer
Team
Lead Designer, 1 Engineer
Tools
Figma, Notion
Disciplines
Design System, Design Documentation
Overview
Upon our new branding update, we had to update our existing design system. Moreover, the lack of a pattern design library resulted in inconsistency and misuse of design elements. Initially using MUI(Material UI) components and applying our branding, we encountered challenges as misuses and inconsistencies surfaced. With only a 'molecules' guide in atomic design, the situation required immediate attention.
To address this, I established clear guidelines for design system components, emphasizing 'organisms' in atomic design. This strategic approach aimed to bring consistency and coherence to the application of design elements across the entire platform.
Impact on Business ✨
Streamlined engineering and QA processes
Enriched the design system with new components
Seamlessly integrated new branding into the product
Methodology:
Comprehensive UX audit of existing components and patterns
Creation of a detailed pattern library for component combinations
Documentation of new design guidelines
Challenges
1
Lack of a pattern library in the existing design system
Addressing the misuse and inconsistency caused by the lack of a comprehensive pattern library in the existing design system.
2
Incorporating a fresh branding design
Since the branding design changes were implemented earlier than the overall product design rebranding, it made strategic sense to first address combination design challenges.
UX audit of existing components and patterns
I conducted a UX audit of existing components and patterns in two phases. Initially, I thoroughly assessed the key components of the app, followed by compiling documentation and presenting the findings to the team.
Phase 1
UX Audit of existing components and patterns
I first went through the app to audit the key components (dialog, menu, header, buttons, table) and presented what's not working and what we can fix.
Phase 2
Documentation
I compiled documentation and presented the findings to the team. Collaborating with the lead designer, we provided valuable recommendations for improvement.
Transformation Journey
1. Before
2. UX optimization
3. Branding update
Creation of pattern library with guideline
Taking a proactive approach, I documented a new pattern library along with guidelines on Notion, our company's documentation platform. This resource was carefully crafted to facilitate effective communication with both engineers and our design team, ensuring a seamless integration of standardized patterns and best practices.
Reflection
✨ Seamless Integration of Patterns, New Branding Design
This project seamlessly integrated impactful improvements, fostering collaboration and setting the stage for future excellence, from UX audit to pattern library creation and the incorporation of our new branding design.
👉 Future Directions
Next step was utilizing 'Storybook' for token management and scaling across multiple platforms
