Along with the whole re-design of our product at Minna, it was essential to build a proper design system to support the change and make it manageable over time. Figma has been the best tool for building this, and all the improvements they brought have been warmly welcomed by me and my fellow UX designers as they made it even easier to design prototypes or final interfaces with no hustle.
Along with designing and building the UI design system, I teamed up with the front-end developers that were responsible for building it on the code side. I also kept asking and receiving a lot of feedback and ideas from the UX designers and other developers in order to always improve our system, they were the users of my “product” after all.
/
Minna
Design
System
We organised the design system in different parts:
Atoms: the base of everything else - colors, fonts, shadows, surfaces, spaces, input fields
Components: buttons, headers, cards, navigation, drawers, logos, illustrations
Flows: a designated system for building our flows (blocks, sliders, buttons, fonts, progress indicators, inputs, navigation etc)
Wireframes: text blocks, arrows, a version of our components to quickly and easily build wireframes, sketch down ideas or journeys
Portals: a designated system for our different portals more directed to desktop (Admin, service providers, cancel portal)
Since the beginning and still now it’s been on the move, always testing new components, improving the ones we have to fit the changes in the product but also the needs of developers working with them.
/
