Product: Mailbutler

Role: UI Designer

Team: CTO, Frontend developers and Me. Later on more designers contributed.

Illustrations: Anna Johnsson

Time: 2.5 months (First iteration)

Design Challenge: Design system creation

Context:

Ever since I joined Mailbutler, it was evident that we needed to adopt Figma and to build a design system.

Process:

- Meeting with developers and stakeholders to collect information about the styles and components used in the code, the goals of the project and general info.

- Design audit. I review what was already done and I also took screenshots of the whole product in order to be able to perform and audit and plan further.
- Planing out the structure and sections.

- Creation of a list of components.

- Designing each section and component individually. While some components were already available in Adobe XD and Illustrator, I rebuilt them in Figma to ensure consistency and correct implementation.

- Meeting and meeting again with the team and developers.

- Writing documentation of the pages was intended. (we are still today improving it)

- Nowadays we constantly create new components and update the old ones to keep the design system up-to-date. 2 more designers have helped in the last year. Specially with components updates like a big icons revamp and Forms components.

challenge
outcome

Why a design system?

A design system is a dynamic entity that keeps evolving and growing every day, is a structured collection of design elements, guidelines, and assets that help ensure consistency, efficiency, and scalability in design and development processes. As it provides clear guidelines and a single source of truth, enhances collaboration across teams, and enables designers to deliver proposals that are faster, more consistent, and accurate. 

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Consistency
colors
foundations
For-developers-designers
styles
guidelines
Components
ai-1
title_sneak-peek
TY
TOKENS
CHIPS-1
sdebar1
components
BUTTONS-1
title_tokens
Light_ex Dark_ex
title_overview
Overview_4_5_compress2x

Lessons learned:

Creating a Design System from scratch for an existing multi-platform Product within a short period of time was a major challenge, but it turned out to be a significant achievement.

Although the Design System was not perfect when it was created, and it is still not perfect today, it has been a great success for the company, the Product, Development, and Marketing teams. It has brought considerable improvements to the product and the team's collaboration. I am very proud of the countless hours of work that I have put into it. I'm also happy knowing that today more designers are contributing to it and using it daily.

One of the critical lessons learned was the importance of persuading stakeholders about the value of having a Design System and the investment of time it requires to achieve success. A Design System is an ongoing process that requires maintenance and constant work to fulfill its purpose. Showing the value that the system brings to the company has led to an acknowledgment and appreciation of its worth.

Finally, thanks to the components, styles, tokens, and everything else that the Design System offers, everyone can design and bring their ideas to the product. It is now much easier for designers and developers to come up with solutions that are consistent and aligned with the product than it was when I started working for the company.

Thanks_ds_mb-1

Selected Works

MailbutlerUX UI Design

Design system MBUI Design

Localization WebappUX UI Design / Design Systems

LingodaUX UI Design