Balancing consistency, scalability and flexibility
GOALS, CHALLENGES & OBJECTIVES
As of 2021, Universal Store did not have any formalised design system. Piecemeal approaches to UI\UX design as well as workflows led to inconsistencies across Universal Store’s main online store, created unnecessary friction across development, marketing, arts and design teams, and posed a risk for the soon-to-be released spin-off, Perfect Stranger.
The main challenge in creating this design system was balancing consistency in good UI\UX design with scalability across the brands, while allowing a level of creative freedom for the arts and photography team. Thus, the main goal was to focus on fundamental components that were restrained in design and flexible in the way they could be used and employed.
PROBLEMS SOLVED
In creating a design system for Universal Store’s brand portfolio, we solved a number of problems including:
- disconnected user experience
- duplication of work
- confusion about standards and requirements across teams
- inconsistencies in design
- exclusion and performance issues due to lack of site accessibility.
EXAMPLES:
Component library: It was critical to create a scalable design system that could cross-pollinate to the entire brand portfolio. To achieve this, we used the atomic design methodology (by Brad Frost). This allowed Perfect Stranger to inherit the existing component library with minimal changes.
Patterns: Patterns were developed in consideration of modern UI\UX standards, ecommerce benchmarks and with the rollout to future platform releases in mind.
Accessibility: Universal Store did not employ any accessibility standards. As such, it was imperative to establish these throughout the brand portfolio to reduce pain points and increase adoption.
- Colour contrast: We established accessibility guidelines on colours used and created a universally consistent, WCAG compliant colour palette.
- Content accessibility: We simplified text and improved legibility, ensured perception of images and videos across all users (including those with visual and auditory disabilities) and implemented support for touch devices.
Governance and documentation: We introduced clear governance to ensure that the design system was aligned to Universal Store’s brand identity and business goals. We also created comprehensive documentation to ensure consistent adoption.
OUTCOMES AND ACHIEVEMENTS
- Widely adopted: already employed across 3 different sites (Universal Store, Perfect Stranger, SaaS logistics portal) and planned to be used for further releases (Universal Store App, second spin-off brand Lioness)
- Improved development speed: fast development of Universal Store’s redesign iterations, rapid design and deployment of new Perfect Stranger online store.
- Good site performance: Redesign and deployment of design system of Universal Store website increased Google Page Speed Performance from 2 to 28 points. Perfect Stranger site performance was 66 Google Page Speed Performance points from the start.
- Improved cross-departmental collaboration: standardised responsive layouts and existence of single source of truth reduced confusion and need for clarification, reduced redundancies in creating new designs, improved development through use of documentation and clear user acceptance criteria.
RESPONSIBILITIES
As the lead senior designer, I was fully responsible for this project’s development - from conception to implementation. I worked with a junior designer, who supported me in building out the design system across brands.
My main areas of responsibility:
- UX (development of standards and guidelines for design system, testing components)
- Design (development and design of UI components and patterns, design system management and documentation)
- Management (project management, advocacy, stakeholder management)
- Mentorship & Leadership (training, mentoring, quality assurance)
