top of page
Numerator
Lighthouse Design System
Product
A design system and component library to unify all of Numerator's digital products.
Platform
Site
Project timeline
Initial start date: June 2021
Maintenance: 2021 - 2022
My role
Product Designer
Team
Designer, UI Developer, Software Engineer
Skills
Brand design, web design, visual design, user research, project management
Tools
Figma
Background & Problem
✨Build a design system that improves user experience, scalability, and efficiency✨
Within the B2B2C space, Numerator helps companies understand their customers by providing unique insights and proprietary data for the market research industry through their Insights web platform.
During a company acquisition, Numerator adopted all merging companies’ platforms. As this company grew, we attracted more clients that used multiple platforms, but struggled with the inconsistent user experience, despite falling under the same umbrella.
​
Internally, the design workflow was chaotic. Both designers and developers would have to start from scratch and create icons or colors, which was disruptive and inconsistent for many projects. The design team decided that it was time to create a centralized design system and model it after Insights, since it was Numerator’s most popular and leading product.
Why do we need a design system?
The main question management asked us. Why is this important? We needed a centralized design system that unified all of Numerator's digital products. And doing so would help solve the following business needs and pain points:
-
Platform inconsistency led to weakening brand identity; therefore we needed to create unification and brand trust.
-
Scalability issues equated to complex maintenance; therefore we needed global implementation while ensuring cohesion.
-
Lack of efficiency led to time and cost overruns; therefore we needed to save time and resources.
-
High risk of error deters them from wanting to use the tool again; therefore we needed to push for improving user satisfaction.​​
Putting our best foot forward
Based on the business pain points, our design team established project principles that will guide us in being more strategic and thoughtful about meeting those needs when building a design system.​
​
-
Brand identity captures and expresses Numerator's unique tone, language, and personality.
-
Modularity promotes efficiency through reusable components that can be combined to build complex designs.
-
Simplicity enhances the clarity and consistency that improve accessibility and usability by reducing design barriers.​
​
Research
How do we build a design system? Where do we start?
I took the initiative to outline the design system process. All design system creations were not a one size fits all, so I modified the process in such a way that aligned with our team’s capacity and resources.​ I divided the process into phases where each designer on the team can take ownership, but other designers were more than welcome to contribute to each other’s phases.
I led Phase 1 and Phase 2. I studied and observed major design systems such as Polaris, Material Design, and MailChimp to gather some inspiration since their brand guidelines aligned closer to ours.
MailChimp's Pattern Library's simplicity in Data Viz was a model for our chart analyses.
Google's Material Design had components that were familiar and intuitive to all users. I wanted to implement the same concepts into ours.
Auditing the inventory
Since I took the lead on phase 1, I took stock of all existing components, including UI elements, patterns, and styles used across your products or projects. I captured screenshots of the web app, including every modal, page, and report. I also dove into all of our old files to retrieve any design related information used across product and marketing.
A breakdown of all the UI elements
Inventory of defining UI guidelines
I used a spreadsheet to document each element systematically, defining its purpose, functionality, and variations. As I scoured through the screenshots of the different platforms, I was able to analyze the components to identify inconsistencies and redundancies. This exercise helped eliminate the unnecessary components, and as a result, I created Foundations, Components, and Data Visualization libraries from the inventory.
Inventory of defining UI guidelines
A little perspective goes a long way
I also gathered anecdotal and qualitative information on user needs and pain points, but this time, with beta users (3 internal analysts, 2 external clients). They provided feedback on both the Insights and Ad Intel web app's UI's.
Learnings from the beta testing:
-
Unexpected button behavior - Some users found it some button behavior unpredictable and were uncertain of what is clickable. Identical icons had different behaviors as well.
-
Illegible text and icons - Some users found difficulty reading some text and icons due to their small size, unclear typography, or poor contrast.
-
Data is too cramped - Some users found insights overwhelming and cluttered when there is too much content on their screen.
-
Poor navigation - Users thought it would be nice to have an indication of where they are in the app.
Based on the insights and feedback gathered from our users, it became evident that we needed to implement clear rules and guidelines for the proper utilization of design. This approach effectively addressed with our users' needs and expectations.
Build & Iterate
Defining foundations
​​Based off the existing color palette from the company rebrand, we thoughtfully assigned each color a specific and functional purpose to guide its use throughout the user interface. We also expanded the color scheme into various hues, providing greater variety for effective data visualization. This approach not only enriched the user experience but also strengthened our brand recognition.
​
For our typography, we aimed for simplicity and clarity. Given that our web apps focus on quantitative analyses, it was crucial to ensure that numerical values were evenly spaced for optimal readability. While our brand typeface is expressive it posed challenges for numerical clarity. To address this, we incorporated Arial as a supporting font, providing a more balanced and accessible reading experience.
.jpg)
The updated color palette
The updated typography
Building the component library
The feedback from our beta was extremely helpful in building out the component library. Our design team developed future vision mockups for each web app, engaging in extensive discussions about the significance of every UI element. This not only unified the web apps's overall look, but also addressed the user concerns in the UI. This collaborative effort wanted to make sure that each component is thoughtfully considered and aligned with our overall vision.
​
To boost efficiency in our mockup creation process, we implemented auto-layout for each component, allowing for seamless text updates. We also created interactive states and variations that enable quick instance swaps without the need to create entirely new components. In partnering with developers, we made minimal changes to components in order to make our web apps appear more cohesive and unified. This approach allows us to apply changes components on a larger scale, streamlining our future design efforts.
​
A snippet of our component library
Iterating on Data Visualization
We had significant work ahead for our data visualization components. During our company rebrand, our primary focus was to update the data visualization to align with the new branding. colors. However, we realized that this alone did not meet accessibility standards. It became essential for us to invest further in ensuring our visuals were accessible to all users.
​​
Our design process prioritized compliance with WCAG 2.1 accessibility standards, guaranteeing clear contrast and high visibility for a optimal interaction and user experience. We aimed to provide a high degree of contrast (ratio of 3:1) against the background and each element. Though we tested the contrast with different color blindnesses, we also implemented patterns into the palette to further differentiate the data easily.
Grouped bar chart before any contrast changes
First iteration: Added patterns to each group and changed some colors
We introduced distinct patterns for each group and eliminated the pink color, as it may be perceived similarly to green by certain color-blind individuals. This adjustment aims to enhance clarity and accessibility for all users.
Second iteration: Added interaction to the charts
I added an interactive feature in the charts to improve data clarity. Now, when users click on a group in the key or any of the bars, the selected group will be highlighted, showcasing its respective data, while all other bars gently fade into the background. This makes it easier for users to focus on the information that matters most to them.
Implementation
Documentation and publishing the design system
We chose Figma as the ideal platform to host our documentation, making it accessible for all collaborators to explore our component library (using instances) without interfering with the main components that lived in a separate file. This resource is designed for everyone, including developers, product managers, and the marketing team. Each page features a comprehensive overview, practical examples, and guidelines for the proper usage of each element. Therefore, all team members can easily understand and utilize our design components effectively.
The 'Get Started' page for the Lighthouse Design System on Figma
The Buttons component page and an overview of its states and usage
Maintenance and monitoring changes
I took the lead in managing component changes within our design system. During our weekly design critique meetings, we dedicated time to discuss iterations and potential improvements. While I implemented changes in Figma, I also submitted ticket requests to developers for minimal updates to the components in the current UI. After these updates were made, I provided bi-weekly release notes to the product team, detailing any new changes to the design system.
Although this maintenance process was initially challenging, it ultimately streamlined our design workflow, allowing us to scale component changes effectively for future projects.
Conclusion
Key learnings - just a couple things that guide me in projects today
Unifying our product design in one space
Before the Lighthouse Design System, there was no single source of truth for all the web apps. We created a space where all of that can live, and aligning our product design elements was a major success for our team. We stood by our project principles in highlighting Numerator's brand identity, while still maintaining simplicity and scaling back to allow for modularity over time.
​
Prioritizing accessibility over everything
This project highlighted the critical importance of accessibility, particularly in the realms of data visualization and clarity for all users. It reinforced my understanding that making information easily understandable for everyone is essential for effective communication.
​​​
Efficient prototyping and iterations
With our component library and design system, all mockups are plug-and-play. This approach allows us to save significant time by utilizing existing components instead of starting from scratch. Additionally, the speed of iteration has greatly improved, making our design process more efficient than ever.
bottom of page