Building Design System for Alvalabs
Built a design system from scratch to facilitate a smooth and efficient transition from the old branding to the new one. This included defining rules, behaviors, core properties, scalability, and overall structure.
Year
2019–2021
Team
Design Lead
My Role
Visual Design, Design System, Leadership and Collaborations
Alva Labs new color palette
Background and Goal
The project was initiated because AlvaLabs established its branding and planned to implement it within the product.
The goal was to create a UI kit aligned with the code, with defined rules and consistent behavior across platforms, to accelerate implementation and ensure a seamless transition to the new visual design.
Description
Alvalabs, my goal was to collect all the app elements that were being used and add logic to their usage to speed up the front-end work by reusing the created components. The process involved several steps, including an audit, building the structure and base, implementing and setting rules, and launching and evaluating the system.
During the process, I worked closely with developers and we had many discussions about properties and how they were built in the code. We used Storybook in Alva, which helped us to review the design and detect UI bugs immediately.
The main result was that developers were able to work faster because they no longer had to create components from scratch as they had done before. This allowed them to focus more on data, rather than front-end work.
I also wrote an article about my experience in building the Alvalabs design system, which you can read if you have time.