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.

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.

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.

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.