Redesigning Reddit — A challenge in visual design
Reddit is home to thousands of communities, also called subreddits, dedicated to everything from cute animal pictures to political debates. If you’re looking for a community regarding a certain topic, no matter how niche it is, chances are you’ll find it on Reddit.
The platform has been around for a long time, and a lot of users have stuck with it since its early days. However, if you ask anyone that’s never used the app before to say what their thoughts are, chances are that they’ll mention the cluttered UI and the confusing subreddit system. Even amongst the heavy Reddit community, the UI and some other poorly optimized features were a long-running joke up until a few years ago. Naturally, this can be a huge barrier of entry for new users.
Cue the Reddit redesign project! For two weeks, I worked on redesigning a few screens to try and address the usability and visual design problems.
The problem
For what Reddit gets wrong, it also gets a lot of things very right. The way that it’s designed so that a user can subscribe to communities and see all of those communities’ top posts in a never ending page is implemented in a way that no other social network as been able to. There’s also the fact that while most social media is based on user-generated content, none puts as much emphasis in continuous engagement with said content as Reddit does through its comment section.
The issue then seems to be that the core features are spot-on, but much of the aspects surrounding those features need a touch-up. So in order to figure out what those aspects are, I did an audit on Reddit’s stock android app and, although I will go into more detail later on, the main problem seems to be that Reddit is designing its app so that users utilize it in a certain way instead of designing the app around how the user’s want to use it. In other words, Reddit users need a more intuitive and decluttered interface because these pain-points serve as a barrier of entry for new users and as friction to the heavy users’ experience.
Scope and constraints
In this project, my goal was to audit an app of my choice and to redesign 3 to 5 screens of said app. The main focus was more to exercise our visual design skills, rather than to implement the entirety of the design thinking process and therefore, a lot of critical steps in designing an app that would usually be done, like user research, were skipped over. There were also some constraints that I find relevant to mention before going forward:
- Time — The time frame to complete this project was two weeks. Therefore, there are aspects of the app that I would have liked to redesign, but decided not to in order to prioritize tasks and not lose focus.
- Educational context — This project was done as an assignment for Ironhack’s UX/UI course, and therefore we were incentivized to focus more on some aspects than others.
The process and results
As I was choosing which app to redesign, I had to take into account that I wouldn’t be able to do a lot of user research since there was no time to do so nor was it the focus of the project. And thus, after going through a few options such as Youtube and Amazon, I chose Reddit due to the large amount of experience I have with the website. However, I had never used Reddit’s stock Android app before, as myself and many other users choose to use third party apps that are considered to be better designed. Therefore, although I was extremely familiarized with Reddit’s inner workings, this was my first time using their official app.
Now that I had picked an app, I could get started on auditing it. I picked 3 screens from the app: Home page, Comment’s page, and Discovery page. These were the pages that upon using the app briefly seemed to have the most potential for improvement.
As I used the app, I sketched out all the elements that could be a pain-points, alongside some rough ideas that I could implement as a solution.
The main aspects that I evaluated as being problematic were:
1. The button in the header bar that about a user to switch post categories
Usability heuristic broken: Flexibility and efficiency of use.
This button should provide easy access to the main pages and categories that the users usually navigate to. Reddit’s information architecture is structured in such a way that:
- Home a.k.a. Frontpage is where the user can find all the top posts of the subreddits they’re subscribed to. They can sort the posts by Best, Hot, and Rising which show the posts with the highest upvote to downvote ratio by week, day, and hour respectively. The frontpage can also be sorted by Top which shows the most upvoted posts by either day, week, month, year, or all time
- Popular is where the user will find all of Reddit’s top ranked posts excluding NSFW posts
- All is similar to popular, but does not filter out NSFW content
- Latest is the frontpage sorted by new posts
However, in this button of the mobile app, the user is only given the options of Home, Popular, and Latest. The user also can’t filter the Homepage and in order to access All they need to open the sidebar and scroll all the way to the bottom.
2. The post header takes too much attention away from the post
Usability heuristic broken: Aesthetic and minimalist design
The subreddit and username of the original poster are often information relevant to who’s viewing the content, but they should not be the first thing the user notices — It should be the post itself.
3. The number of upvotes is not high enough in the visual hierarchy
Usability heuristic broken: Aesthetic and minimalist design
The number of upvotes is the metric by which most users guide themselves on Reddit. It can be a measure of reliability of information on news and help related posts, but it can also be a measure of popularity and consensus amongst the community. Therefore, it is often one of the first pieces of information that a user will look at, sometimes being even used to decide if the user will want to see the post or not.
4. The use of too many lines
Usability heuristic broken: Aesthetic and minimalist design
There’s nothing wrong with using lines to separate content. They help structure the screen and give a clear sense of where the user should look. However, if lines are used in overabundance, they can make a screen feel cluttered and claustrophobic. The usual solution to this is to separate with space (or fewer elements) rather than lines (or more elements).
5. Having to scroll too much before being able to see the comments in the comment section
Usability heuristic broken: Aesthetic and minimalist design
Although it is important to show the information of the post when seeing the comment section page, it should not take half of the screen’s real estate. This information should only be there to remind the user of what the comment section is referring to. When the user clicks on the comment section button, they most likely have already seen the post and are only interested in seeing the comments. This, combined with the advertisement, makes it so the user has to scroll an entire screen before being able to see the comment section.
6. Inability to see text based content in the Discover page
Usability heuristic broken: Flexibility and efficiency of use
A lot of Reddit’s content is purely text based. It could be stories, questions, rants, among others. By not being able for users to discover these posts, Reddit is pretty much cutting in half the amount of discoverable content.
With the audit completed, it was time to start thinking of how I was going to address these problems and how the redesign was going to look like. The first step of this process was to do research and create a moodboard. I opened Behance, Dribble and other design websites and just spent a few hours looking for inspiration. Ultimately, I took some screenshots, made some notes, and ended up with this moodboard:
At this point, I pretty much had a clear vision of what I wanted to do. And so, after a rough pen and paper sketch (just so I wouldn’t forget what I was picturing), it was time to get started on figma.
To start off, I wanted the app to have a rounded, flat design. Reddit has a lot of information constantly jumping at the user, and most times hiding that information isn’t an option. So in order to make the consumption of that information less intimidating, I thought it would be appropriate to use a friendly design with space to breathe.
In order to achieve this, I concluded that I couldn’t use Reddit’s current icons as they were too thin. In a situation similar to mine, a designer would usually (and should) try to find an alternative icon set online to match the aesthetic they’re going for. However, since I was doing this project for the purpose of practising and learning, I decided it was a good time to try and design my own icons. It is a time-consuming process, but it was a process I wanted to get a better understanding of since the knowledge might be helpful in the future.
After studying online, I hopped on figma and I came up with this:
Some icons look thicker than others because they’re meant to only be used in small sizes.
Moving on to the screens, I started with the header bar. I needed to address the problem with sorting content so I added a button to do so and rounded up the corners.
I decided to go with a muted purple to contrast with the neutral colours used in the rest of the app. It should give off a sense of creativity and fun without taking too much attention away from the posts. Using this hue as a reference point, I played around with colours and decided on a split complementary colour scheme for the accent colours.
After playing around with colours a bit more, I chose my neutrals and moved on to typography, which is arguably what I struggle with the most. Fortunately, there are tools that make choosing fonts a less daunting process. With the help of Fontjoy and inspiration from ChatGPT, I decided on fonts that I felt like were easy to read, but complemented the rounded flat design.
Put everything together, and we have a style tile through which I guided myself for the remainder of the project.
Going back to the screens, I implemented many changes compared to the original design. The following are some of the most notable ones.
The posts’ headers now show the number of upvotes first and foremost, but are also much smaller and more subtle as to not take too much attention away from the post itself.
The bottom navigation bar became collapsible so that the user can have more screen real estate to view the post.
In the comment section page, the post’s information became much smaller, and the user can now close the ad. The vote and options buttons are also now accessed but swiping the comment to the left or by pressing the icon on the top right of the comment’s container. This made the comment section feel much less cluttered.
In the Discover page, there were categories added for text based content, which when tapped show a layout designed specifically for this type of content.
And so with these changes and a few others, this was the end result:
Lessons
Overall, this was a really fun project where I got to learn a lot and came out feeling much more confident in using Figma. Looking back now, these were the main takeaways I got from this project:
- Designing icon sets takes an incredible amount of patience and consistency.
- Figma’s prototyping tool is a bit limited, and therefore, it might be wise to look into learning alternative software like Adobe After Effects.
- Although it may seem obvious, asking for external input can make a creative block go away much faster. There were times when I asked for the opinion of non-designers on a problem, and even if they were not able to come up with an answer, it was enough help for me to come up with something on my own.
