Ensured the proper implementation of an entirely new design system, which would affect designers and developers across all EasyPark brands.
Role
Senior Product Designer
Team
Product Manager, Senior Product Manager, Design Intern, Front-end Developers
Timeline
March 2024 – October 2024
Tools
Figma, Miro, User Testing, Workshops
IN SHORT
✸
Created a design system that is fast and easy to use, with proper documentation
⚙︎
Made strong use of Figma’s toolkit with variables so the team at EasyPark can quickly swap between brands
✽
Made design and development work much more efficient
EXISTING PROBLEMS
– Current design components were in a Figma file, but scattered without organisation and were loose groups & frames
– They were also not actual Figma components, meaning most up to date designs had to be hunted down
– Multiple sub-brands with multiple identities, made for a more complex and difficult file to use
– Available design resources were mostly graphic designers, meaning all components had a strong visual foundation but lacked usability
HYPOTHESIS
– Creating a structure from what already existed would by itself create a much easier way to use the design system
– By setting a base set of rules would create cohesiveness and make it simpler to work with
– Utilising Figma’s strong set of tools with components, variants and variables it would be easier to create a design system that can cover all brands in one singular file
Collaborative effort
By gathering the insights of the current designer and developer workforce, we could quickly understand what was in place and what was missing. This made it much easier to formulate short and long-term strategies in creating the design system.
Stakeholder buy-in
By utilizing the insights gathered previously, gaining the support of the right stakeholders became much simpler. Being able to break down pain points in clear bullet points and monetary numbers, it was a quick process to gain the thumbs up from everyone involved.
Building the right things
As the EasyPark Group had grown from a singular brand to three, and growing, it was very important to create a foundation that could support the organization going forward. Setting up clear guidelines for color usage, a stronger typographical scale, a baseline grid to be used across all digital platforms and then the creation of common components that were already in use.
The set of variables created for multiple brands
A component set with variables in use, adapted for the different brands
A typography scale, fully mapped and annotated
The results
By the end of the project we had a full-fledged design system that resided within an all-encompassing Figma file. We made sure to use variables to their fullest extent, covering 3 different brands in one place, making the usage of components quicker than ever.
We had full buy-in from stakeholders, developers and designers and the developers were working on translating the system into Storyblocks. We also had set up a system to keep both tools in sync as much as possible, making sure that if one were to change, updating the other would be quick and easy.