The goal
Lobyco wanted a way for clients, delivery teams and developers to quickly align on the selected solution. The solution had to be picture prefect and easy to adjust for each client. The design system had to contain animated prototypes too.
The design process should be easy to share with clients so that they knew what assets they where able to customize. The commercial team would like to be able to use the different flows for initial meetings with potential clients with interactive prototypes to help the clients pick Lobyco as their digital loyalty provider.
The process
We started by looking at other world class design systems
We aligned with the creative community on how we wanted to cooperate.
We migrated all of our work from Sketch and Zeplin.io to Figma.
We found the right plugins to be able to export CSS, swift and Java for developers
We made sure that all employees had access to Figma via SSO (Single Sign On)
We made a master theme used for all new features
We got input from developers, UX designers, Product owners and sales people.
We build guides so that UX designers where able to build new pages for all clients and be able to switch client themes on the fly.
We have created a change log for all interested to follow up on changes
The outcome
Having a design system with the right amount of flexibility while securing that all the different variables in the components are approved by and aligned with developers is really tough. A design system like this requires a lot of communication but at the same time it removed a ton of friction in the further process. As i write this case there’s more than 200 users of the design system. Theres 18 different themes and it’s growing by the month. The global component contains more than 200 components with a total of 1450 variations. Each theme have more than 500 styles, classes and components.
My role
As head of design I initiated the project and made sure there were buy-in from the organization. I made the base structure, naming convention and key components while supervising the design team in building and maintaining the design system in general. I facilitated the creative community of +20 people in using the different components and shared it for the development community of +100 people.