How I Built a Reddit Design System in 15 Weeks

User Experience Designer
User Researcher

15 Weeks

Zero Height

As an engaged member of the Reddit community, I deeply appreciated the platform’s unique design and user experience. However, through performing an UI Inventory on the site, I noticed opportunities to enhance consistency across various UI elements such as icons, links, text styles, and more. Leading me to create a comprehensive design system for Reddit-inspired interfaces.  I deconstructed and categorized these UI elements into modular building blocks, following the atomic design framework. After 2 weeks of doing that, my team took another 2 weeks to add elements I might have missed and conduct an accessibility audit.

This is the UI Inventory I conducted in January 2024 on the old Reddit design before it was redesigned by Reddit in March 2024.
The top block is a footer that has unclear clicking affordance .
Now when user hovers it shows clicking affordance.
Now both icon buttons have the same stroke weight.

The team decided that the “Home Feed”, “Create a Post,” and “Post Thread” pages would be our scope for the project due to Reddit being a huge website and our time constraints to complete the project.

By using DESIGN PRINCIPLES! The design principles are guidelines that team members agree that design decisions should be made on so that it helps create consistency despite different people working on one product. We created that by examining the existing brand values of Reddit and brainstormed our own design principles. These principles drive the UI component’s design and the documentation we created on Zeroheight.

One significant hurdle was Reddit’s mid-project redesign, which required me to carefully evaluate whether to pivot towards the new design direction or maintain alignment with the original aesthetic that users had grown accustomed to. I decided to proceed with the original design, recognizing the enduring familiarity and affinity users had for its iconic elements and to be able to complete the project within the time constraints.

To validate and refine the design system, I conducted 20 minute usability testing sessions with 2 out of the 4 people my team conducted the usability test with.

Their feedback proved invaluable, highlighting areas for improvement and guiding the addition of missing components, such as comments, replies, and pills. This iterative process also allowed us to address typography inconsistencies and optimize the organization and discoverability of components.

A UI Kit and a Design System are not synonymous terms. The UI Kit is a collection of pre-built UI elements. While the Design System is a living document that is revered as the “Source of Truth” that not only includes the UI Kit but design principles, usage/guidelines and resources.

Recognizing the potential value of Upvote UI for the design community, I published the design system on the Figma Community page. Since we published the UI Kit 3 weeks ago, it has garnered approximately 166 users, indicating a demand for well-crafted, Reddit-inspired design foundations.

As the Upvote UI design system continues to evolve and gain traction, it holds the potential to become a widely adopted standard for Reddit-inspired design patterns, streamlining workflows and elevating the quality of user experiences for people that do not have internal access to Reddit’s official design system. In the future, the things that the team could work on is updating the current components we have now to the redesigned version of Reddit and creating more components for different pages that were outside of our scope for this sprint.