When I joined Boozt.com as their Product Design Lead, one of the first challenges was the lack of scalable interface systems for their 1.000.000+ customers. The design system I put in place greatly improved the UX and visual consistency, operational structure of the teams using it and resulting in much shorter development cycles.
Generations of designers and trends went through the UI, and the existing set of interface components lacked consistency and systematic thinking across the desktop, mobile and app platforms. The teams suffered from ever-changing UX/UI requirements and a large code base for the frontend components. Together with the team we came up with a strong set of requirements for a new UI library:
After conducting an audit for all existing components in the desktop and mobile website, Android and iOS app, I facilitated workshops with the design teams, PMs and engineering to understand the current issues better and envision how the design system should solve them. We started by establishing basic foundation design elements like container sizes, color palettes, text styles, and iconography. While working up towards more complex components such as inputs, buttons and content cards, we created a roadmap to release and validate each component. Integrating components into the live environment allowed to gather quantitative and qualitative metrics and to iterate fast. We prototyped each component with native code to ensure that it would meet the UX patterns of its platform. For example, a content card can be removed via swiping on iOS, while Android offers a tap-and-hold option.
The unified design system is using Atomic Design Principles to allow for easy updates across components and platforms. We used Plant and React Storybook to version control the design system. We established the overall workflow and organization of the design system between the design and engineering teams, with the goal of creating branches for explorations, and conducting regular review sessions before merging.
Applying Atom Design Principles into our design system and maintaining it using Sketch shared libraries and Plant allowed our design teams to have a single source of truth for all design components. Because the system was developed across teams, each team member quickly picked up the language which made communication much easier. The design system is now the foundation of all interfaces on the desktop and mobile website, the iOS and Android app.
PMs are pleased that features are released faster, and with it the learnings and iterations. The system is evaluated by a Google Analytics behavior tracking system and part of our regular usability testing sessions.