Figma, FigJam
Mersive Design System: Unifying Design Across all Spaces
Scroll ↓
At a Glance
Design system creation for the new Mersive Collaboration Suite, a collaboration platform, cloud management portal, and large display app with a cohesive look and feel. This design allows for rapid high fidelity mockup iteration across all device types and can easily scale as new features and components are added to the platform.
My Role: Research, conceptualization, design, ongoing management
Duration: 2 months
Background & Problem
With Mersive's existing Solstice product suite nearing a decade in the market, we faced the task of modernizing our design system while maintaining brand continuity. The absence of a cohesive design system across the legacy product, Solstice, led to inconsistent user experiences across the older product suite. The goal was to create a bridge between the existing brand and future design directions, anticipating an upcoming rebranding effort.
We also faced the challenge of launching the product while quickly developing new features. The Figma needed quick access to displaying current features for marketing and sales enablement while also being able to showcase upcoming features to handoff to development.
Research
Creating a design system from scratch is no small feat. Plus, this was on the heels of a company rebrand of new fonts and color scheme. I looked at competitors, both direct and indirect, while also looking into the future to anticipate components we would eventually need despite not being in the product at launch. We were working fast as a company, so I had to ensure all systems were firing in order to meet the depend of the accelerated roadmap schedule.
I used online examples for reference of naming conventions and standard component types while also consulting our product requirement documents to come up with a living document of the components needed for the design system. This was a list that I knew would evolve over time but laying that foundation for stakeholders and developers streamlined the handoff process.
Strategy & Design
The biggest challenge was that many components needed to work seamlessly across different device types. For example, user avatars are shown on mobile, tablet, desktop, and large TV displays. Therefore, I knew I would need at least 3 sizes of avatars along with their respective variants which resulted in a total of 18 variants. Avatars can be tricky, especially for a collaboration tool like Mersive, so I used Figma’s text property feature to let me quickly drop in avatars and rename them as needed which is approximately 50% faster than expanding layers every time an avatar component is needed.
Another prime example of streamlining the design process is how I created a nav item element that can be used inside a larger navigation panel. I followed something similar to what Uber did with their design system as shown in one of Figma’s Config keynotes to cut down variants by 80%. Each nav item has quick access to changing labels via the text property, swapping icons, and showing or hiding counter badges as needed. Each component has nested properties which helps during the design process as well. The nested badges have 3 width sizes with a text property to enter one to four characters as needed.
Outcome
Having the foundational elements allow for the quickest design iterations I have had in my entire career. I have the ability to create large-scale complex pages full of settings with relative ease. Not having to think about how I will make a small part of a design frees up mental space to focus on crafting a better overall experience all the while knowing each Mersive application will be 100% congruent down to the pixel.
Key Takeaways
At first I was extremely intimidated when I was creating this design system, a first in my career. In the future I will do more extensive research to harden a list of true components needed based on a feature set. Creating this system in tandem with also creating a roadmap of features spanning several years of development was difficult. But with consistent meetings with stakeholders was the true key to success. This kept things on schedule and did not hold up the initial development process. We are now at the point where creating brand new pages isn’t just simple from a design standpoint but had exponentially streamlined the hand off process with the dozen development I work with in different countries on a daily basis.