Who is client (Reddit)?
It is a online platform where users dive into communities to share & discuss
The Problem : Why did we chose to work on Reddit?
Inconsistencies and the Necessity for Regular Updates made us work on Reddit
Inconsistencies
Lack of a consistent design system creates challenges for designers, developers, managers, and end users.
Time Consuming
The current system is time-consuming for designers and hinders the implementation of rapid updates.
Uninspiring user experience
The current user experience is lacking in engagement, which negatively impacts user interaction and satisfaction.
Why we considered developing a design system?
We Embraced Upvote Design System Over Just a Style Guide
The Solution: What we aimed for?
Boosting Company's Efficiency & End User Engagement via Our Design System
Local variables of Colors used in our Design System
How did we achieved it?
Our Process of Building Upvote Design System
1. Deconstructing Current UI Elements
Understanding Reddit's current design style
We cataloged all elements, from colors and typography, Icons to buttons, cards, and navigation, in a single Figma document.
Categorized gathered elements into foundational basics and complex components.
1
UI Inventory of Current Website
2. Finding Inconsistencies & Accessibility Audit
Harmonizing System-wide Quirks
2
Inconsistencies in Current UI System
3. Building Strong Principles
Our Fundamental Design Principles
Through our audits, we discovered inconsistencies in font types and styles, as well as a few color disparities and certain issues with cards.
However, we didn't identify any significant accessibility issues, which is a positive aspect of the existing system.
3
3. Deciding Design System's Name -'Upvote'
Influence of Voting Feature & Conversational Principle
We opted to name the system after the voting feature of Reddit platform because it resonates with our conversational principle and aligns perfectly with the Reddit brand.
Just as an upvote signifies support or agreement, the system aims to promote consistency and approval within design elements.
3
Upvote (Image Courtesy: Reddit)
4. Organizing & redefining UI kit
Streamlining Colors, Fonts, and Buttons
We structured our system using the principles we laid out & making certain design decisions.
We kept icons as it is and streamlined color, typography & buttons which later helped us to create complex components.
We conducted user testing and implemented a few modifications to enhance the experience for designers.
4
UI Kit of Upvote Design System
5. Documenting Upvote Design System
Documenting for Guideline Clarity & Ease of Navigation
You can onboard to our design system using the documentation we created on Zeroheight platform.
It encompasses our principles, UI kit components, and detailed instructions on utilizing these components and their variants.
It has additional support information & how one can connect to us.
We endeavored to maintain a friendly voice and tone.
5
Documenting the Upvote Design System by Using Zeroheight