Designing for Scale
In my first year at OfficeSpace Software, I led multiple designers and developers in the process of building a design system where none existed, unlocking new sales segments, tripling development velocity, and setting up a bright future for the 15-year-old product. Meet Mariposa.
Saddled with UX debt, accessibility failures, and a decentralized front end framework, OfficeSpace was in dire need of a design system.
Without one, every new design comp and code update was compounding the problem: UI inconsistencies and process inefficiencies that were preventing our teams from doing their best work. And with no way to address global accessibility issues, the business was unable to expand into government and education sectors with strict audit requirements.
Establishing the Foundations
The first order of business was to create a component library in Figma to power every design file. Following the atomic design method, I started by defining our tokens: spacing, text styles, color ramps, box shadows, and so on. I then collaborated with the rest of the design team to build our molecules and organisms, meticulously considering every use case and minimizing disruption to end users by making changes to the existing design language only when necessary to improve consistency and accessibility.
From Figma to Code
Meanwhile, a new dev team had been formed to build the front-end framework that our design system would utilize. With my background in front-end, I was able to help by writing acceptance criteria, testing each component, even pushing some code changes myself.
Crucially, I made sure that the components in Figma and their counterparts in code shared the same property structure, which means that any engineer can look at a Figma file and configure the components it’s built from with ease.
Together, we built a library of over 50 components in the first 12 months. By the end of that year, we were ready to build and launch the first set of pages in our new framework.
Writing Documentation
To help streamline adoption of the new library, I helped write thorough documentation for each component and its variants, as well as standards for things like forms, error messaging, loading states, date formatting, and all the little decisions that round out a successful design system. We even gave it a name: Mariposa, Spanish for "butterfly."
Developing Principles
Mariposa was created with the long term goal of completely overhauling our UI from the inside out. With that in mind, I created a visual to help everyone on the team understand how the "big idea" of the system is structured. Accessibility and inclusivity are at the core of the experience, and working outward, we layer on our tokens, the interactive layer, and finally the voice and tone in which OfficeSpace communicates to the user.
Encouraging Adoption
Anyone who’s worked in design systems knows that just having one doesn’t mean it will take root. Adoption requires vision, patience, and politicking. Throughout the process, I’ve learned to constantly reinforce the business value of our new framework: increased dev velocity, more business opportunities opened up with improved accessibility, and a path towards modernizing our entire UI. As a result, Mariposa is entering its adolescence as a design system as it continues to grow and power more and more of OfficeSpace.
