To ensure a consistent user experience and rapid development, a design system is an essential tool. Recognizing the desire within Freo to create a consistent user experience, I led the process to build a new design system.
CHALLENGE
Inconsistencies
Freo had two user environments, namely the public website freo.nl and Mijn Freo, where users could manage their data. Both platforms showed major inconsistencies in terms of design and technology. Moreover, the necessary structure in the development and design environment was missing to ensure this consistency. The challenge was to make these two environments seamless.
APPROACH
Integrate design and development
To address these issues, we decided to start from a clean slate and explore ways to merge the two environments. We started by cleaning up all design files and merging all components and tokens into a design library, first in Sketch and later in Figma.
Zeroheight
For a central hub of components and documentation, we started working with Zeroheight. This design system tool provided solutions to present both design and front-end code in one central place, with appropriate documentation. These descriptions were also important for other team members, product owners and stakeholders.
Storybook
Where Figma became the source for the designs, Storybook became that for the frontend environment. Here we could provide a good overview of all refactored components and the link to the central design system in Zeroheight was quickly established.
Content
In addition to design and development, the focus of the Freo Design System was also on branding guidelines and content guidelines. This made it relevant for other team members to use the design system and thus increase its adoption.
Design Tokens
When we started the project, design tokens were not as obvious as they are today. However, as the tooling improved (Figma and Storybook), we were able to start using them more and more. This had a great impact on development and led to a redevelopment of all components. The big advantage was that it allowed us to develop faster and more consistently.
The workflow how a new element can be adopted in the Freo Design System
Agile workflow
A design system is a convergence of different disciplines and processes. In order to keep this in good and orderly order, I also worked on a workflow that could be applied in the agile way of working. With this workflow, the different disciplines were clear on how and when something would be included in the design system.
RESULTS
An ongoing process
A design system is never finished and is always evolving. Until my involvement in the process, the central hub was set up in Zeroheight and the most essential components had been converted to Storybook. The Freo Design System was embraced not only by designers and developers, but also by content writers, resulting in a more complete system.
LEARNINGS
Ensure engagement
Developing a design system can quickly fade into the background in a smaller organization like Freo due to limited capacity and resources. There were several occasions when the development was given less priority and attention. From this I learned that I have to keep pushing and moving along constantly to demonstrate the importance of the design system. Therefore, I also chose to include other important information, such as branding guidelines, in the design system to keep it interesting to a wider audience.
In addition, it was a challenge to find the right balance between completeness and flexibility. Initially, we aimed for a complete system in which everything was described and created. However, this had adverse consequences for flexibility in use. Pursuing completeness also meant more time and capacity for maintenance. Later in the process, we chose to have the basic components right so that good solutions could be created based on good design principles.
Project details
Client
Freo Rabobank
Year
2021 — 2023
Collaboration
Eight / Freo Internal Team
My role
Lead UX designer
Skills
Project management
UX design
UX Research
Information Architecture
Tooling
Figma
Sketch
Zeroheight
Storybook
