Problem
The digital team encountered substantial challenges ensuring consistency, efficiency, and scalability across various platforms. The inconsistency in visual design, typography, imagery, and interaction patterns resulted in a disjointed user experience, leading to confusion among users and reduced trust in the product. Furthermore, the expansion into international markets supercharged these issues.
Goals
Consistency Across Platforms
Enhanced Efficiency and Productivity
Scalability and Flexibility
Improved Collaboration
Cost-Effective
Improved Quality and Accessibility
Process
Alignment
Without alignment among key stakeholders, the initiative was likely to fail. With this in mind, I collaborated with leadership to outline the purpose and demonstrate how it would provide ROI. I then involved all cross-functional teams impacted designers, developers, architects, product managers, and brand strategists to ensure alignment.
Audit
The hasty adoption of new techniques and features understandably yielded redundant code and one-off UI elements. We conducted a component inventory and code audit highlighting items that could be combined or removed, resulting in an easily manageable design library and codebase.
Design
The team leveraged the newly established brand guidelines for colors, typography, imagery, iconography, and tone of voice. Design tokens were created as atomic-level building blocks run through ACSI to ensure they met accessibility standards.
Component Library
Responsive reusable UI components such as buttons, modals, forms, cards, and navigation were created, along with the corresponding interaction patterns, to provide the best experience for multi-sized device performance and usability. Using this modular approach allowed for quick page(s)/screen(s) creation that met the required needs while meeting quality standards.
Documentation
Design files in Figma provided guidance for using components, design principles, and patterns, while also serving as a prototyping tool for new features and page templates. The "patterns" website offers a coded representation of these components, along with technical specifications, code snippets, and practical examples for developers and designers.
Testing and Iterations
The designers and developers used shared collaborative files to maintain a close feedback loop, discussing ideas and making adjustments during weekly meetings. A governance committee handled final approvals, and version control tracked changes to the system.
Adoption
The UX team supported the design system and organized multiple "lunch and learn" sessions to promote adoption, ensure alignment, and showcase the system's value.
Tools and Frameworks
Design Tools: Figma
Testing Tools: Google Optimize
Documentation Tools: Confluence, Notion
Development Frameworks: Angular
