Design system
The challenge was to create a reference system for all designers, featuring a set of reusable design elements.
Overview
NewsCred had an early version of a design system. Since then, we have used three design systems and are now in the process of merging them with the Optimizely Design System, updating both to newer versions.
![Design System](/images/works/opti-design-systems/design_system_screenshot.png)
Role and the Team
During the NewsCred and Welcome era, the design system lacked a dedicated designer. Instead, three designers collectively managed the design system, with anyone able to propose new components or updates.
After Welcome's merger with Optimizely, we began integrating our design system with new company and are now creating a unified, updated version. Here I'm going through the process of updating a component.
Badge Design
Badges varied across products, leading to user confusion when multiple designs were enabled. My goal was to standardize badges to a singular design.
Research
To start with I started collecting all the types of badges we use in different products across Optimizely. To get inspiration from other products I’ve also collected and reviewed major design systems. This helps me to form some opinions on Badges.
![Research on Badge design](/images/works/opti-design-systems/research.png)
Test
Then I designed several types of badges using accessible colors (AA) and conducted a vote among all designers, selecting three finalists for a user preference test.
![usability test among designers](/images/works/opti-design-systems/first.png)
![shortlisted badges](/images/works/opti-design-systems/shortlist.png)
![Screenshot of Gainsight tests](/images/works/opti-design-systems/gainsight_test.png)
Outcome
Then I designed several types of badges using accessible colors (AA) and conducted a vote among all designers, selecting three finalists for a user preference test.