Centralised design system for BWT
Create a single source of truth design system that unifies components while providing clear guidelines and best practices. The purpose would simplify product creation, testing, and development by maintaining consistency across all products.
This project was launched without dedicated design or development resources assigned to this project. However, I assumed the role of Design System Manager while continuing to work on other projects with established deadlines. We needed to create minimal development and design team time loss on other projects which took priority due to predefined deadlines.
At the time, the BWT design system was fragmented, inconsistent, and partially outdated. The fundamental components of a dependable design system were overlooked and disregarded.
Documentation
The lack of documentation in the system left too much room for interpretation. As a result the teams lacked a shared foundation around process, design language, guidelines, and UI pattern libraries.
Storybook
The Storybook tool was disorganised because there was no designated manager. As a result, engineers would publish new components (after a PR) with little team contact.
Figma
The design team made the collective decision to embrace Figma as the chosen prototyping tool after previously utilising Adobe XD. The tool provided the design team with the opportunity to recreate the projects using a regimented design system.
Organizational stakeholders were initially sceptical of this project, believing it could potentially be a waste of time, money and resources. To ensure the success of this project, it was important to get stakeholders on board before building the design system. This challenge was overcome by promoting the initiative via a 'Product requirements document' (PRD) presentation to share the existing pain point and projected advantages. This PRD provided significant clarity to the stakeholders, resulting in project approval.
To better understand the current state of the BWT design ecosystem, a UI inventory was organised to document the components. This served as a database of what already exists and a guide for design patterns.
Working in close collaboration with the development team, an audit to obtain all the components from the project repositories was conducted. This information aided in improving design consistency and diagnosing complex areas that could benefit from refactoring.
The exercise resulted in identifying numerous inconsistencies in the design assets. This highlighted the importance of a more systematic approach to documenting, sharing, and maintaining a design system.
In November 2022, teams from around the world were invited to BWT's headquarters as part of the annual DPD (digital product development) convention. I facilitated a workshop with the designers and frontend developers to create a structure for the Storybook components.
In preparation for the convention, I created a deck of cards using the UI inventory results. The cards featured the component name in Storybook and Figma plus a brief image of the component.
The first day was spent developing top-level groups for the components to form a clear structure. The team grouped existing components, merged components and remove legacy components. The team also shared knowledge about where the components were utilised and how any changes could potentially disrupt the code.
The second and final day was devoted to creating 'self-descriptive' names for the components. The goal was to provide the team and new starters with an easy-to-follow structure and integrated workflow.
Top-level groups created
Merged components
Deprecated components
Using the new structure from the workshop, a priority list was generated for the minimal viable product (MVP). Using techniques from 'Atomic design' and the audit results via a Jira board.
Atoms
Molecules
Organisms
Templates
Pages
The components discovered during the UI Inventory were compared to other well-know design systems to help unify variations that would best serve the user's needs. As a result, common procedures, principles, and tools were developed that could be applied to any occurrence discovered in the audit findings.
During the creation of each component, the following concepts were followed:
Responsive components with the auto-layout feature to ensure the component could be reused for different devices or layouts.
Cover all scenarios, or “states” in the system: hover, focus, filled out, error, and disabled state.
High-quality component documentation with consistent, clear naming conventions, enabling disciplines to quickly and efficiently make consistent decisions.
A structure that includes components and documentation all in one place to see the whole life cycle of a component.
A naturally integrated workflow to support the design team with the ability to search, create and update components when required.
Scalable component patterns with a focus on maintaining an organised library to ensure it remains perfectly in sync with the design and code disciplines.
Clear naming conventions to ensure design and code disciplines were aligned.
During this project, it was important to promote openness and inspire a sense of co-ownership throughout the entire process. Weekly front-end meetings were launched to bridge the gap between design and engineering and allow everyone's perspective to be heard. Details such as component design, documentation, and tools were discussed to ensure each component arrived at a collective decision.
Components created
"Design systems are built upon a library of components, each created with a specific purpose in mind.”
Streamlined: Reduction in time spent creating assets
"Using a design system will not only saves time but also allow the team to be more productive. By reducing the amount of time spent on manual tasks, the can focus on more strategic and high-value work."
Design and development are in alignment
“The design system will lead to increased productivity, a positive work environment, and ultimately, a happy and successful team."
Happy team
“It’s so satisfying to have such a simple workflow. It has been a long and challenging process, but the end result is truly impressive. The design system will be an invaluable resource for our team, streamlining our design processes and ensuring consistency across all of our projects.”
Developed for further expansion
“The design system should be great for any future projects and clients.”
Like many things, a design system isn’t ever a finished thing — it’s a journey. So far, the set of basic components has been game-changing for the team. The design system has increased efficiency through a structured process resulting in handovers being less back-and-forth between designers and developers, and reduced friction.
While it was clear this project required a significant amount of resources, planning, and time commitments, the efforts were a justified long-term investment in the company, brand standards, and customers.
