Mate-UI Case Study

How a design system transformed UX handoff and boosted team satisfaction 80%

This is my iterative and collaborative journey to improve UX/UI design, foster cross-team communication and make my team happier and more productive in the process.

Design Leadership
UX/UI
Design Systems
Mate-UI hero

Role

Core design leadership in a highly collaborative team; helping to match scope requirements to meet larger business goals.

Team

UX/UI designer, front end development, QA and business anaylst.

Timeline

2020 — 2024
3 versions

The Problem

Project setup took too long — every time.

In early 2020 I was hired to grow the UX/UI effort at a software development agency focused in the fintech sector.  

The initial team of just 2 designers needed to field anywhere from 2-6 client projects at a time.

Most clients were start-ups or organizations with disorganized branding if any.

Requirements + Strategy

Together with the front end development lead we defined our core requirements to build out a design system.

Design components that are easy to customize, grow and maintain.

Repository of components that can be copied and modified on a project basis.

Both design and coded components leveraging the tools that will directly feed client work — Figma and Storybook

— Work that provides direct benefit to active client projects.

— Long-term strategy that builds components iteratively and collaboratively.

Version 1.0

Mate-UI is born

We named our design system after a tea-like infusion enjoyed in Argentina since that is where many of our employees lived.

Mate-UI V1.0 included base components from in active projects:

— Primary, Secondary, Accent, and Feedback color palettes

— Typography styles

— Alerts, Cards, Tabs

We applied Mate to an established client project for controlled testing. It did well and we started using it for new clients.

Mate-UI v1.0
Version 2.0

Mate-UI continuously evolved and we launched version 2.0 following a full component re-build in early 2022.

More components

The UX/UI team slowly built up the Mate-UI Figma by incorporating components from each new client project.

Support for variants

When Figma added variants, we rebuilt all components to leverage the latest feature and streamline the design system.

Improved documentation

This was also a great opportunity to incorporate documentation for improved handoff to development.

Mate-UI v2.0
Assessing Cross-Team Adoption

Only the UX/UI team was using Mate-UI.

The UX/UI team had grown to 10 designers by the launch of Mate 2.0 and Mate-UI was standard practice for all projects.

But as version 2.0 virtually revolutionized my team’s work, I became aware that the component library in Storybook hadn’t been maintained at the same rate as the Figma design system.

100%

UX/UI Adoption rate

-75%

UX/UI time required to set up new client projects

15+

Projects designed with Mate-UI

2

Projects developed with Mate-UI

But why?

We met with the front end team to better understand the issues. Our conversation uncovered:

Budgetary issues

The Storybook component library was no longer aligned with the Figma design system and there was no budget to improve the existing components.

Documentation issues

Documentation was only recently added the Figma design system and still a work in progress. It meant the dev team would still have questions.

Incorporating feedback to improve documentation

We took their feedback and improved what we could - the documentation. Taking inspiration from Carbon Design System and Material Design's documentation, we added component anatomy, documented interactions and mobile vs desktop behavior.

We also surveyed cross-functional teams to gain a better understanding of their familiarity with UX design deliverables and processes in order to learn how to improve other design touch-points.

Table documentation

Finally, a client request gave us the budget needed to align design and development efforts

A client requested light and dark mode theming, which would require a joint effort from the UX/UI and front end development teams and Mate-UI was the natural starting point.

For the development team, this meant first updating the Storybook component library to match the Figma design system.

For the UX/UI team, this meant learning and leveraging Figma's latest beta feature — variables. It was the perfect tool to implement multiple themes by adding color palettes as design tokens.

Mate-UI didn’t use design tokens so my first step was to define a functional and scalable system for color tokens.

Testing in the classroom
Double diamond icon

Discover

I researched designs systems and common design token naming patterns.

Token names needed to be extremely intuitive and precise since the labeling system that we chose would affect color usage, granularity within color palettes, implementation in development and more.

“Design tokens abstract and manage values in a systematic and consistent manner.”

Naming patterns research

Best practices + priorities

My research helped me to compile best practices but also helped me to identify the priorities that were unique to Mate-UI and that helped to shape our decision-making throughout the process:

Communication

Tokens, components and documentation should be equally useful for both designers and developers.

Flexibility

Mate-UI is a white-label design system that we leverage as the base for many client projects. There should be no branded elements or naming systems.

Improvement

We had a mature design system. Any changes should be justified improvements.

Analyze + optimize

I next performed a color usage audit by compiling the color of every element in every single component in a lowly spreadsheet.

Patterns were standardized and eventually became color tokens.

Inconsistencies were channeled into existing patterns or created new ones.

Outliers were analyzed.

Color audit
Double diamond icon

Define

Initial color token proposal

I worked iteratively with both design and development teams, proposing directions in order to guide conversations and collect structured feedback. The first proposal was characterized by:

Generic tokens for static components

Component-specific tokens for interactive components (input, button, etc)

Two levels of emphasis: strong, subtle

Team feedback:

Color palette names should be abstracted (ex. ‘Yellow’ instead of ‘Error’)

Component-specific tokens are too granular; too difficult to maintain and remember

Initial color token proposal

Keeping tokens flexible

Changes based on feedback significantly decreased the number and complexity of tokens.

— Allowing tokens to be applied to any Figma property (Ex. ‘primary’ could be used for fill, text, or border)

— I added 2 levels of emphasis for a total of 4 levels (strong, subtle, pale, palest)

Team feedback:

— Labels including background, border, and text would create redundant code when used in Tailwind.

Final color tokens
Double diamond icon

Develop

With planning complete we were ready to execute the final solution.

Replacing color styles with tokens

Replacing color styles with newly defined color tokens in all components.

Defining dark theme values

Defining color values for color tokens in dark theme.

Resolving shadows

Resolving shadows in dark theme.

Documentation detail

Documenting each component in both themes.

We published the changes as Mate-UI 3.0.

Final documentation

“This is my first project using 
Mate-UI and it definitively has 
exceeded my expectations.”

— Facundo C, QA Engineer

Conclusion

We used the new, themed version of Mate-UI for a client project and collected internal feedback after 9 sprints.

The gamification effort for InferCabulary was (no pun intended) a game changer. Their paid customer base saw a pretty abrupt increase that additionally opened the door to investors.

This initial effort also set the stage for additional game features and an entire suite of educator tools.

— The only documentation type that was reported to have frequent use by all participants was the Figma Design System.

— All participants reported “Maintain consistency” as a benefit of Mate-UI.

— The least reported benefit was “Improved communication”.

— Mobile development team highlighted the need for a mobile React component library.

100%

Team adoption rate

80%

Participants reporting a significant, positive impact on quality of work

I learned the most from the things I didn’t expect

Insights + Next steps

Design systems are living documents and there is always work to be done!

Feedback was positive and constructive.

Improve mobile support including designs and native component builds.

— Continue growing the component base.

— Continue growing documentation.

— Continue leveraging variables for increased flexibility in Figma (e.g. font support).

Develop and standardize a process to communicate to developers exactly what properties are customized and track those changes.

Some things I'll remember for next time:

— Quality over quantity

I anticipated participants would report faster workflows as their greatest benefit but responses correlate to increase in quality.

— QAs caught more UI related issues.

QAs were involved in the development of Mate’s component library. The effort sparked new confidence in the QA team with Figma as a tool.*This hypothesis needs further testing.