Project Role
UX Designer
Date Completed
October 2017
Skills Used
User Research, Wireframing, Information Architecture, UI Design
Reddit, the self-proclaimed "front page of the internet", is a news aggregation website that hosts content submitted by users. Reddit is made up of "subreddits" which are communities created around every conceivable topic. Users are allowed to upvote and downvote content that they approve of or disapprove of, respectively.
Note: Reddit launched a site redesign in April 2018, about 5 months after I finished this project. However, you can navigate to old.reddit.com to access the site using the old theme.
Reddit is the 7th most trafficked site in the world, but suffers from an outdated UI, a lack of feature discoverability, poor navigation, and a poor content browsing flow.
Let's start by addressing Reddit's information architecture. Compared to other similar user generated content sites, Reddit stands out.
Both Pinterest and StumbleUpon have simpler user interfaces, with content being the major focus and located front and center. Both have profiles squared in the right and Pinterest has its home in the top left - a modern web convention.
Reddit's interface, in comparison, is more jumbled and seemingly thrown together.
Reddit has two different places to navigate between subreddits, a dropdown menu on the top left side of the page, and a header along the top next to it.
The touch targets to access the subreddits on the header are very small, and it's not even possible to see all the subreddits you're subscribed to on the top banner. Furthermore, the dropdown of subreddits is difficult to find and suffers from the same issue of small touch targets.
Elements are too closely spaced together, especially text. There's no room for each post to breathe.
There are so many colors being used that it's hard to identify the action that should be taken or properly highlight a single thing a user should be drawn to. Blue, gray, other blue, gold, orange?
There's a multitude of different font weights used inconsistently. Why do some buttons have bolded text while others don't?
Each of these problems leads to a lower perceived user experience by confusing and overloading a user.
There are two ways of browsing reddit: clicking on a link, going back, clicking another link, going back ad infinitum. Or, you could scroll through the page, opening every story you want to read, and go through them one by one.
Neither flow is ideal because the first is not only tedious but you risk the content changing after you return to the main page, and the second can be a drain on your valuable computer resources (ahem, Google Chrome).
One of the key features of Reddit is being able to cater what you see by subscribing or unsubscribing to the aforementioned subreddit communities. However, users can further filter their custom content feeds by creating "multireddits" or groupings of subreddits. This feature, while extremely powerful, is hiding in plain site, unremarkably highlighted on the sidebar.
When thinking through a problem, I like to take notes on paper and translate my interpretations into diagrams and sketches. For this project, I then brought my work into Sketch, and began wireframing. Below, I've documented my process for this redesign.
To address the crowding of information, especially among the posts, I opted for a card format to lend a natural separation between distinct stories.
In addition, I reduced the non neutral colors to only 3 - "Upvote Orange", "Downvote Purple", and "Reddit Gold". The reduction of colors simplifies the number of associations between color and meaning someone has to make, letting them focus more on the content.
By consolidating the navigation into one area of the page, the effect is two-fold. It's easy to navigate between your subreddits and there's no confusion on whether you need to use the header or the dropdown menu to do so. In addition, the new placement of Multireddits allows them to be easily navigated to, and being below Subreddits highlights the feature and signifies a relation to them.
Finally, in order to combat the tedious process that can be browsing Reddit, I added a feature called the "Reading List". Users can queue up all posts that they want to view, and go through them in a streamlined process. This eliminates the need for 20 tabs or continually go between viewing comments of a post and front page and the post.
The queue allows users to streamline their usual browsing by keeping key and familiar functions such as Upvoting, Downvoting, and Saving easily accessible.
My solution:
- Addresses many aforementioned visual problems.
- Reduces redundancy by eliminating the need for many tabs/continuing to jump back to the front page
- Adds to user learnability by keeping in tune with many modern web design standards.
- Allows users to continue using Reddit the way they did before, unless they choose to adopt the changes.
I believe that the last one is one of the most critical - if this change were implemented the tomorrow, users would be shocked by the new look, but could still comfortably use the site the way they did before.
Throughout this project, I learned a lot of things about Reddit I didn't previously know, how to document my design process, and how to take new approaches to solving design problems.
Since I'm not used to designing for web, my abilities to work with all the screen real estate, and how big fonts should be to be readable, but not comically large have improved.
Some future work I am considering doing is looking into how to restructure comment threads (which are just very large tree structures) and reworking subreddit UI.
Thank you for looking through my project, I hope you enjoyed it. Feel free to contact me if you're interested.