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.
Core design leadership in a highly collaborative team; helping to match scope requirements to meet larger business goals.
UX/UI designer, front end development, QA and business anaylst.
2020 — 2024
3 versions
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.
— 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.
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.
The UX/UI team slowly built up the Mate-UI Figma by incorporating components from each new client project.
When Figma added variants, we rebuilt all components to leverage the latest feature and streamline the design system.
This was also a great opportunity to incorporate documentation for improved handoff to development.
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
We met with the front end team to better understand the issues. Our conversation uncovered:
The Storybook component library was no longer aligned with the Figma design system and there was no budget to improve the existing components.
Documentation was only recently added the Figma design system and still a work in progress. It meant the dev team would still have questions.
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.
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.
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.”
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:
Tokens, components and documentation should be equally useful for both designers and developers.
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.
We had a mature design system. Any changes should be justified improvements.
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.
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
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.
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
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.
— 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.