Delen Private bank - Sapphire Design System
Sapphire Design System is a design system created by the design team of Delen private bank, which I was a part of.
Client
Delen Private Bank
Skills used
Design System
Date
July 1, 2020
Challenge
The design team lacked a centralized resource for design elements, leading to inconsistencies in design and inefficient collaboration.
Solution
We first created a design system in Sketch and later on moved it to Figma. Storybook was used as the platform to visualise the actual coded components. Figma and Storybook were developed and maintained in sync to ensure consistency. The design system contains documentation about Foundations, Components, Icons and Page templates.
Responsibilities and achievements
- Create new UI components with the necessary documentation about the component. UI components were added to the figma library and made use of variants so they were easy to reuse by the business and business anlysts.
- Collaborate with Component developers and App developers to ensure feasability, consistency and improve the way of working.
- Present achieved work and designs during the sprint review meetings.
- Review requests for new UI components and discuss if they should be added to the system or if there is an existing component that can be used instead.
- Responsible for the creation of a way to use design tokens in our design system. Reviewed the whole design system to make sure the most used tokens were documented.
- Organise workshops to improve the way the design system is structured.
- Responsible for the creation of a workflowchart on how to add new components to the design system in the correct way.
- Reponsible for a full audit on the existing design system to see which improvements where needed. This project was done in collaboration with the developers who use the design system. We decreased the amount of styles/classes to choose from to make it easier to use them correctly. We also decided to change the structure of the design system based on the results of a card sorting.
- Facilitated sprint planning meetings with cross-functional teams to prioritize tasks, estimate effort, and set achievable sprint goals.
- Teach new employees about the design system.
