Design system
Development and realisation of a new design system
Project of creating a robust design system to establish one single source of truth to improve the user experience in the Benify platform. When I started at Benify, I acknowledged the lack of documentation and consistency within the platform. I have been driven in this project to improve the Benify platform and ensure a consistent user experience and interaction. This project aims to create guidelines and documentation for our components and create a structured work process of how to maintain and develop functions in the platform.
2024
My role: UX/UI design and Figma design lead
FIGMA DESIGN KIT
An easy, intuitive, and effective design kit in Figma is needed to keep consistency and facilitate everyone in the organisation creating content on the platform. I have been responsible for updating all components and aligning them with the current state of the existing design we have in the platform as well as building the structure and framework in the Figma design kit. By redesigning and streamlining all components using properties and variants the components can be used in a much more effective way without the need for detaching them from the main components and in this way using the full potential of Figma.
DESIGN REPOSITORY
Together with the design kit, the design system also includes a design repository. Every component is documented to describe all its variants, instances, and the ways these components are allowed to be used. If there are any restrictions or limitations this is explained here. The repository will be where all information about the components and the design foundations will be found. This will collect all information needed about the design system such as how to use the components, understand the interactions and also find the code for developers.
TEMPLATES AND GUIDELINES
The design system is built on atoms, molecules, organisms, and templates. This makes it easy to compose different parts together and thus create content that is always based on existing components in the library to keep consistency. By building templates and organisms, it also becomes easy to reuse the parts and create a cohesive user experience.
GRID SYSTEM
As a part of the foundation of the design system, I was responsible for setting up a grid system as an organising framework for all of Benify's designs. This was going to be the foundation to establish a visual rhythm that provides consistency and guidance for every experience we create. The grid governs the creation of all components, pages and designs and is therefore very important when the design team is growing and when there are so many people creating content on the platform.
TEAM EFFORT
To create the design system all components, documentation, and guidelines need to be collected into one source so that everyone in the organisation can find guidelines and create consistent content in the platform. This is a huge project and cross-department teamwork is needed. A project group was organised containing designers, developers, marketing, and professional services to get a wide range of experience and knowledge from different perspectives in the team. Some tools that were used to facilitate teamwork and collaboration during this project:
