Building the Lighthouse Design System: Numerator
Background
What is Numerator?
Numerator is a Chicago-based company that blends proprietary data with advanced technology to create unique insights for the market research industry.
The Challenge
To create a library by cataloging every component in meticulous detail and build a design system that scales across all Numerator software products.
My Role
In our team of three designers, I created and managed the first Numerator design library that determined our components, foundation, and data visualization. I also spearheaded the research for the design system process.
Why do we need a design system?
The Problem
Numerator did not have a design system. Instead, we carried one master style sheet for the Insights platform, but it was getting outdated. As Numerator grew and acquired more digital software tools, there was no cohesion that aligned the product designs. It was messy! This caused a lot of inconsistencies and ambiguity across the product team.
The Goal
Having a design system elevates our process. The design system sets a standard on how to use UI elements properly throughout our products, encouraging consistency and cohesion. We can design more efficiently without having to start from scratch and create duplicates of components (a real time saver!). We will have a single source of truth that serves as a guide for Numerator's brand design, and we set a foundation for future improvements.
Image: The original master style sheet
My Process
After our team had addressed the issue of lacking a design system, I took the liberty of beginning its process. I was the lead designer for Insights and familiar with all its UI elements. Without a guide for creating a design system, I dove into some heavy research. I followed a 12-step process to building my own design system that I modified based on our team's capabilities and information we already possessed. That said, I narrowed the process down to 5 steps:
-
Research the Process
-
Assess the Inventory
-
Audit All Elements
-
Edit Components and Patterns
-
Share the Design System
Research
I read and studied many articles from various UX websites and guides on how to build a design system. And I was inspired by Apple, MailChimp, Shopify for their simplicity, consistency, and organization. With the hodgepodge of UI elements I had to gather, I was determined to create a design system that would model after these companies.
Images: My inspiration!
Assess
I created an inventory of every UI element that existed in Insights. Our leading product, Insights, was the model to follow for scaling designs across all platforms in the future. I took screenshots of the web app, including every modal, page, and report.
Images: Screenshots from the Insight platform
Audit
After gathering screenshots of the current Insights platform and floating icons that were hidden in my drive, I created the Foundations, Components, and Data Viz libraries within Figma. I was able to point out duplicates, single-use icons, and incorrectly labeled hex codes that overcomplicated the inventory. This exercise helped eliminate the unnecessary components and simplified the inventory.
Images: Numerator Design System color palette and modals
Edit
Our design team internally used the Numerator Design System as a temporary library as we simultaneously brainstormed on future vision for our products. Editing was time consuming and crucial because we could determine which UI elements are most commonly used and weed out the ones that no longer served us. As we further simplified our inventory, this birthed the new iteration of our design system, which we dubbed Lighthouse.
Lighthouse Design System is the streamlined Figma library that outlines the interface styles and components that we use to build our products.
Images: Lighthouse Design System color palette and modals
Share
Figma is a strong workplace solution for sharing and collaborating across the product team. The tool encourages feedback from different perspectives and allows us to iterate within the tool for further development.
Images: Lighthouse Design System instruction guidelines
Outcome
After years of working out of floating files and single use icons and components, I am thrilled that this design system came to fruition. It has given us the opportunities to design mockups in a fraction of time, refine inconsistencies within the UI, hone our design skills, and lay the groundwork for the redesign of our products.
The Lighthouse Design System continues to evolve, and the next steps would be collaborating with developers in implementing code for UI elements and creating guidelines for patterns.
Key Takeaways
1. Both the Numerator and Lighthouse Design Systems were combinations of a UI component library and design system. Our design team initially looked at ZeroHeight and Storybook to share our design system company wide, but faced some pushback and had to keep it internal within the product team. We modified the libraries and kept the documentation simple.
2. The process of building a design system is not a one-size-fits-all. After pulling from various websites and resources, building a design system consisted of roughly similar 10-12 steps. However, we were not building components and foundations from scratch; we needed to organize our existing inventory. Modifying the process for our design team defined a structure that fit our needs and helped construct a project timeline that held ourselves accountable for tasks
3. As challenging as this long-term project was, I really enjoyed working on it. This project brought out our team's creativity and encouraged close collaboration among us. Our team was able to assign ourselves tasks within the process that catered to not only our strengths, but also to areas we wanted to learn more about. I'm super proud of us!
