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
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?
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.
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
Oops! Do we call this a grey area?
The site features colors that are strikingly similar, and almost indistinguishable.
Inconsistency
There was also inconsistency in the size, color, and thickness of the icons used.
Variety
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.
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.
- Atoms
r/Color palette
r/Typography
r/Corner radius
Using the tokens, we were able to build our components like buttons and form fields.
- Molecules
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
r/Cards
The cards have been labeled based on their functions, relating to the primary objective of Reddit which is to share/browse content.
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.
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
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.
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
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
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!
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