Designing for Scale
At OfficeSpace Software, I led the creation and rollout of a design system that tripled development velocity, unlocked new sales segments, and is facilitating our growth into a multi-product platform. Meet Mariposa.
The Problem
Without a centralized Figma library or front-end framework, the user experience of OfficeSpace was fragmenting and process inefficiencies were holding us back.
The company was on an ambitious growth plan to expand its product line, but designers and developers were working without the infrastructure needed to execute this strategy. Meanwhile, users were encountering more and more inconsistencies and accessibility failures in our UI, which we had no way to address globally.
Fortifying the Foundation
Immediately after joining, I started by building a component library in Figma for our entire team to use. Off-the-rack was not an option; OfficeSpace had its own design language with 15 years of history and a cohort of power users we didn’t want to disrupt.
Following atomic design standards, I started by defining our tokens: typography, color, spacing, and elevation, as well as iconography and responsive breakpoints. From there, I was able to create the core set of molecules and organisms that would power every new design. In workshops with the rest of the team, we talked through the minutiae of every component, with the approach of changing existing patterns only when necessary to improve consistency and accessibility.
The library soon branched into a network of sub-libraries for different areas of the product. Even before a single line of code had been written, we saw vast improvements in productivity and design cohesion across the team.
Bridging Figma and Code
Around the same time, a new engineering team had been formed to build the framework that our design system would utilize. With my background in front-end development, I was able to help by preparing files for handoff, writing acceptance criteria, testing each component, and even pushing code changes myself.
To ensure fidelity between Figma and code, I made sure (when possible) that the components in our design files shared the same property structure as their React counterparts. This made it easy for designers to understand how components would behave in the product, and faster for developers to translate designs into code.
◇Button
Interactive: Modify the properties in Figma to see the changes reflected in code.
Optimizing for Adoption
For a design system to take root, it needs more than a style guide and some component files. Every decision made along the way, beyond just those in static design artifacts, makes up its DNA, and that record needs to be captured, shared, and maintained over time.
With that in mind, I created documentation for every component, as well as standards for things like forms, error messaging, loading states, and date formatting. To streamline adoption, I developed Getting Started guides that would enable other engineering teams to realize its value. We even gave it a name: Mariposa, Spanish for "butterfly."
The new employee dashboard was the realization of months of effort building Mariposa.
As expected, adoption started slow, but it soon snowballed. The flagship release of the new Employee Dashboard was a huge win – a high-profile opportunity to showcase Mariposa and make it clear that this was the new design standard for all of OfficeSpace.
Powering a Platform
In benchmarks, we found building front-end features with Mariposa to be roughly three times faster than our legacy approach, and it brought accessibility issues down to near zero, empowering field teams to compete in new sectors with strict audit requirements.
Perhaps more importantly, it has laid the groundwork for our design practice to scale. As OfficeSpace transforms from a single app into a multi-product platform, continuity in our user experience has become exponentially more important. Mariposa has defined the look and feel of this new generation, and is being adopted at a blistering pace by AI-enabled engineers. As with any design system, it’s been a long term investment, but a high value payoff.
