Design System

Every organization with a design team that delivers products continuously needs a design system. Ramping up a design system with limited resources can be daunting. I created a lean, iterative model that would grow as the product teams grew. The model allowed designers to focus on solving problems instead of pushing pixels. It empowered designers to create solutions based on a standard set of shared principles, best practices, and visual design styles. It is an ever-growing library of design assets and guidance produced by designers for designers.

Role

Design strategy, agile design, visual design, systems thinking

Problem

As an organization who has acquired multiple businesses and brands over the past 30 years, Ritchie Bros. needed to simultaneously build several new software products to unify customer experiences. The current design system was a combination of legacy base components such as buttons, modals, and data tables that were inconsistent across brands and confused customers. Additionally, teams had no way to contribute and grow the system in a systematic way. Designers couldn't get their components coded for the development team. This led to an inefficient use of delivery team time and a lack of brand consistency. As a result, Ritchie Bros. needed a way to conceive of a scalable design system on product teams, a way to govern the continuous contribution of new system components and a way to prioritize and develop those components for future use. 

Approach and solution

My approach was to set up ways to scale the design system maturity over time. Given the client’s lack of investment in a dedicated design system product team, I would use a model that was delivery-driven with designers from the product teams sitting on a council. I started with using an MUI system as a base component library. New components would surface as product teams needed them to create our backlog. For each component, we reviewed existing patterns in use across the company for functionality, introduced any new functionality, and converged on the best implementation. As components were ready for production, they were added to the code repository in Storybook and the documentation website in confluence with usage guidelines. Each component was continuously iterated on as new use cases presented new challenges and user feedback.

Outcome

The launch of the design system freed up designers and developers to focus on more complex problem solving and created more robust components by drawing from designers’ experiences working across different use cases. The design system also reduced the amount of time to create new prototypes and experiments.