Building a scalable Design System

Building a scalable Design System

🎨 Established a design system from scratch for my client Berry Bros. & Rudd and expanded it with a team of 5 designers, ensuring design consistency and continuous improvement.

My role

Responsible for building, growing and maintaining a design system for my client.

The team

5 designers

Timeline

Aug 2022 – Apr 2024

🎯 The goal

We aimed to develop a design system for Berry Bros. & Rudd that would facilitate the swift creation of new features and pages, given our time constraints, while also enhancing consistency for the website redesign.

By furnishing a comprehensive library of reusable components and guidelines, we streamlined feature deployment, improved alignment with developers, and accelerated scalability.

💪 The challenge

Our challenge was to craft a user-friendly design system for Berry Bros. &Rudd’s internal designers, harmonised with code to expedite development and reduce costs, and adaptable enough to swiftly create new features and pages.

Initially a team of two designers that later expanded to five from different agencies, maintaining alignment on new components across multiple simultaneous focus areas was a key hurdle.

The solution

We engineered a flexible, customisable design system allowing designers to drag and drop components based on their specific page or website section, dynamically adapting to various contexts.

Our approach, rooted in atomic design principles, utilised booleans and variants for easy customisation and thorough documentation for swift adoption by other designers and efficient coding by developers.

We prioritised ease of maintenance while ensuring an optimal end-user experience.

Foundation establishment

We meticulously crafted the typography scale, informing the sizing system based on line-heights and font sizes, ensuring seamless integration of all components.

Additionally, we devised a colour system based on existing brand colours while adhering to accessibility standards.

Gradual component development

Following an atomic design approach, we designed a range of base components (e.g., buttons, input forms) with varied sizes that seamlessly integrated with container components (e.g., cards, lists, accordions), always prioritising user intuition. Additionally, we implemented slot components to enable flexible customisation across various scenarios.

Documentation of slot components to ensure smooth usage by other designers

Governance and file management

We streamlined the creation of new pages and sections by either developing new components, reusing existing ones, or adapting them for specific scenarios.

We introduced a changelog for transparent modifications to components, a robust file management system (i.e dividing delivery vs working files), and an accessibility checklist to ensure adherence to standards.

Conclusion

In conclusion, our journey to build and maintain a design system for BB&R was a collaborative effort that involved overcoming challenges, refining processes, and prioritizing user-centric solutions. Through meticulous planning, versatile design principles, and effective governance, we successfully created a scalable and adaptable system that not only facilitated rapid development but also enhanced consistency and usability across the platform.

This endeavor reflects our commitment to delivering high-quality UX solutions that meet the evolving needs of both clients and end users.

Thank you!

Other related case studies

Click one to know more👇:

Improving the wine shopping experience

Identified Berry Bros. & Rudd’s user pain points through usability testing, conducted ideation workshops with stakeholders to address ‘how might we’ questions, and redesigned PLP and PDP to enhance the shopping experience.

UX research,  Customer personas, Journey mapping, Usability testing, Ideation, Client workshops, UI Design, Prototyping

Enhancing the search functionality for seamless navigation and discovery

Improved site search experience for my client BB&R beyond products to include content, implemented auto-correct and auto-suggest features, and collaborated with stakeholders to gather requirements and technical limitations for successful implementation.

UX research, User flows, Wireflows, UI Design, Prototyping