top of page

Creating a design system for Reddit that translates it's values efficiently

-Upvote UI Design system-

Duration

2 months

My Role

  • Deconstructing elements

  • UI Audit

  • Analyzing components

  • Component creation

  • Documentation

reddit.png

Team

4 Designers

Overview

Reddit is a vibrant online community where users engage in discussions, share content, and explore a myriad of topics spanning from the mundane to the extraordinary. The goal of the project was to create an unofficial design system for Reddit. 
We began by analyzing the current design of the Reddit interface and creating a repository of all the elements. Using our principles we made design decisions that helped us create the design system called Upvote UI. The Design system was published on the Figma community with its supporting documentation on Zeroheight

SETTING THE SCENE

Why do we need a design system?

Imagine you are a new hire, you've been given a task to flesh out a new spec which requires you to recreate a few pages. You are now learning the new interface while having to recreate it at the same time.

How long would you say, it would take to finish your task? 

Alternatively, as a new software engineer hire, you are tasked with rebuilding a page, now you have to learn the individual elements.

Let's add to that. They are all bound by a time constraint, now what does that result in?  

Using elements that look like the correct element. As you may have guessed, this causes many problems down the line. 

1.

Inconsistency

There is inconsistency within the different pages that are being designed. 

2.

Duplicates

There may be many types of the same element, differing in size, color, type, etc.

3.

Time-consuming

It is time-consuming to create pages from scratch while trying to be as accurate as possible.

To overcome these issues for Reddit, we have created an (unofficial) design system that would help designers, developers and product managers in the turnover time for each project. 

SET IN MOTION

How did we start creating a design system?

Group 26.png

We followed the Atomic Design system specified by Brad Frost. He explains how just like all matter in the universe can be broken down into a finite set of atomic elements, visual interfaces can be broken down into a similar finite set of elements.

Step 1: 

Identifying the elements by creating a UI inventory of the website

During this step, we collected all of the elements that exist on the Reddit webpage. Using Figma, we documented all of the elements and categorized them based on their functionality. By doing this, we identified a few issues within the design. It looked a something like this.

Screenshot 2024-05-01 at 10.43.22 AM.png

 The categories included:

1. colors

2. typography

3. icons

4. navigation

5. buttons

6. forms

7. interactive elements

8. media

Looking at our inventory, we identified some issues mainly with repetition, inconsistency and the variation.

Repetition

Group 11.png

Oops! Do we call this a grey area?

The site features colors that are strikingly similar, and almost indistinguishable

Inconsistency

Screenshot 2024-05-01 at 11.48.31 AM.png

There was also inconsistency in the size, color, and thickness of the icons used.

Variety

Screenshot 2024-05-06 at 10.45.43 PM.png

There were too many variations for typography.

Strength: Accessibility

In this process, we identified one of the strengths of Reddit's current UI to be Accessibility. Almost all of the elements within the current UI design passed the WCAG AA guidelines. 

access.png

Step 2: 

Arriving at a consistent design by defining guidelines and principles

We have started our journey in building a design system to eliminate these problems and to enable a simple and intuitive, design and implementation process. But how do we make sure everyone is on the same page while we design a system? 

We established principles that help guide our decision-making and keep us aligned with the company's goals. 

We wanted our design system to reflect the brand's identity & principles while communicate that through its UI, so the principles we decided on were:

The Upvote UI embraces diversity with inclusive design and a visual language that welcomes and represents our global community.

The UI should reduce cognitive load allowing users to easily find and interact with content.

UI elements should be designed to make it easy for users to talk & interact with one another.

Consistency is ensured by following brand guidelines and Upvote UI best practices for user experience predictability.

Step 3: 

Building a UI Kit with tokens, components and styles.

"Would it be understood by an intern?"

Our main driving feature while labeling the components was its intuitiveness and ability to be understood by someone who was not involved in its creation.

And that is how we decided to label the tokens based on their Functionality. Let's explore how. 

Atom.png

- Atoms

Atom.png

r/Color palette

colors.png
colors.png
Atom.png
Group 12.png

r/Typography

Atom.png

r/Corner radius

Group 17.png

Using the tokens, we were able to build our components like buttons and form fields. 

Group 25.png

- Molecules

Group 13.png
Group 25.png

r/Buttons

We have used an easy-to-learn nomenclature based on the height of the button. We chose to do this because the height of the buttons are visually distinctive as opposed to the width.

- Organisms

Group 28.png

r/Cards

The cards have been labeled based on their functions, relating to the primary objective of Reddit which is to share/browse content.

IMG_1497.JPG

Evaluating the design:

Testing out the designs with other designers to identify any shortcomings or strengths. 

We tested out our design systems with 3 designers with the task of recreating screens of the Reddit website on Figma, using our design system. 

Feedback and results:

The overall feedback of the design system was positive. 

State=rest, Type=Upvote, Selected=True.png

r/What did they like?

"Overall really good" 

"I really like all the button states" 

- Liked the use of cards for large components like creating post page

State=rest, Type=down, Selected=True.png

r/What didn't go as planned?

- Logged out version was not available in the Nav bar components

- Few icons missing

- Naming/Sorting of tab items was not clear, had to move to Navigation section

Step 4: 

Documenting the design system on zero height to enable others to use it efficiently and correctly.

During documentation, we were able to introduce Upvote UI and specify the rules and guidelines for using the design system, emphasizing ways not to use the design system. 

clapping-inclusive.gif
Finally, we pitched our design system to our peers which was received positively. 

Meet the team!

Pictured here(from left to right): Dominique, Bhavna (me), Sehyun & Niveditha

IMG_9765 1.png
IMG_9760.HEIC
What may convinced our peers: 

Comparison of a designer recreating the home page using the Upvote UI design system vs. not using a design system

Group 29.png
OUTCOMES/IMPACT

What went well during the project?

The design kit was published in Figma community as an unofficial design kit for Reddit. It received a great response from the community in just 2 weeks! 

Screenshot 2024-05-04 at 3.55.29 PM.png

What was a challenge we faced?

During the middle of our project, Reddit had redesigned its interface, changing a lot of its UI components. We had to make a decision on whether to go ahead with our existing version or use the redesign. Due to factors of time constraint of the project timeline, we decided to continue with the old version

Read more about Atomic design here: 

https://atomicdesign.bradfrost.com/chapter-2/

Thanks for tuning in!

bottom of page