Redesign of the Reddit interface

As a part of one of my classes at San Jose State University, "Human-computer interaction design" students were asked to work in groups of 3 to evaluate the usability and user experience goals of an application while applying usability HCI principles for research and design. The product my group selected for this project was Reddit.

SKILLS & TOOLS

Interaction Design , Prototyping, Visual Design, UX research, Figma

ROLE

UX designer & Researcher

TIMELINE

Oct - Dec 2022

LOCATION

San Jose State university

TEAM

Nishka Jiandani, Tommy Tran, Song Zhao

The problem

From an online survey conducted by my group, we found that unlike most other popular social media platforms, Reddit offers complex features such as a thread system for the comment section & uses unfamiliar terminology in its filtering system, this confuses users making navigation more difficult.

Hence, we decided to Focus our evaluation on the user interaction on Reddit content including:

1. Users being able to successfully navigate to specific Communities/ Subreddits

2. Users being able filter through the content & find the most voted/relevant content

3. Users being able to successfully comment on posted content

User personas

We put together two user personas that would appropriately represent an active Reddit user based on the user profiling data

Jonathan Davis

Age: 20

Education: Undergraduate student

Marital status: Single

Location: Austin, Texas

Occupation: Student

Tech literacy: Medium-High

Core needs:

Morning exercise - running/gym/sports

After a long day of class - watch movies/ music

Budgeting

Frustrations:

He wants to be able to spend lesser time on social media since he has final exams coming up. He is introverted, and would like to make more friends that share similar interests by joining more groups and taking part in more events at school. Additionally, he misses his family and friends and is looking for a part time job so that he's able to visit them over the summer.

Possible scenarios

Jonathan wants to switch up his fitness routine, & opens Reddit to find the most popular subreddit for fitness. He finds his way to the community r/Fitness & is met with an abundance of fitness tips. Not knowing there was a filter feature to view posts, he has been following bad advice from a less upvoted post.

Jonathan wants to attend a music festival but can not find a schedule with times for the lineups. He goes on Reddit to make a post that asks former attendees of the event's previous schedule.

Introvert

Thinker

Woke

Interface evaluation

Feature 1: Navigation to a Subreddit / community

We Evaluated navigation to a SubReddit against 2 design principles:

Consistency: Breaks consistency since there are multiple ways to access a subreddit when typing in specific text. Different results re displayed when a user waits for the drop down Vs. when a user presses enter for the same search.

Fitts’ Law: Reddit breaks this law by having congested content such as additional communities & users on the side of the main display on the landing page.

Figure. 1

Figure. 2

Feature 2: Filtration of content

We Evaluated Filteration of content against the hidden affordances principle:

Hidden affordances: Hidden affordances are features of an object that are not directly visible to the eye. In the filtration system on Reddit, the screenshot of Figure 1 represents the hidden affordances, & Figure 2 represents the hidden affordance revealed. Only once the “top” button is manually selected the user has access to further filter by timeline, i.e : “Now”, “Today”, “This week”, “This month”, “This Year” & “All time”.

Feature 3: Thread comment section

We Evaluated the thread comment section against 2 design principles:

Hick-Hyman Law (Cognitive Load): In the Reddit application, The law is applied by having too many lines & text while scrolling. making it difficult to associate what is a comment & what is a reply.

Gestalt’s Law of Proximity: The comment & reply section breaks the law by having bad distinction between replies & comments, there is no association of grouping.

Comparative study

The goal of our comparative study was to observe differentiators between platforms that follow the same forum based content as Reddit.Through the online survey we conducted on Reddit users, we interpreted that among all similar services, the most popular platforms after Reddit are Quora & 4Chan

Overall differences

Prototying

Prototyping

Low fidelity

High fidelity

Solutions

Enhanced the colors from grey to a gradient using Reddit's brand colors to make the filtering button more prominent & the original icons to be filled in so that they are more visible.

Created a vertical drop down, which helped solve the problem of clutter & appropriately made use of the Hick-Hyman law of cognitive load.

Modified the number of filters available to the user from 5 to 3, eliminating filters that serve similar purposes to reduce clutter and confusion

Change the word “Top” to “Top Voted”, to provide more clarity, and create consistency with the rest of the reddit platform

Solved the problem of hidden affordances by creating a multi-selection system, where the users are able to sort between “Top Voted” , “Best” , & “New” & multi select between timeline they want to filter through as well.

Solutions

Reduced space taken for a user to post a comment. Eliminating visually demanding features like “bold” “italics” “link” “subscript”. The new design uses little space, is cleaner and there is less clutter - making better use of hick-hyman law

Eliminated the thread system, by created designated collapsable boxes for each comment, with the option to view replies to a specific reply within the same collapasble box. increased indentation, allowing users to clearly differentiate between comments on the main post verses the replies within a comment this was done by successfully applying Gestalt’s law of proximity.

Enhanced the feature to reply, give award, share, report, save and follow specifc individual comments, by incorporating a dropdown menu allowing users to take the same actions, with reduced visual clutter. Additionally, eliminating the icons in the dropdown helped avoid redundancy.

Solutions

We reduced cognitive load and increased learnanbility of the application for the users by creating a popup page that appears when the selecting the searchbar.

The searchbar is highlighted, allowing users navigate to a particular community, with the option to scroll through communities that are trending & browse through communities generated specific to the user. Allowing novices to be less intimidated while searching for new communities.

We supported the titles of “trending today” and “recommended for you” with icons that are bold, and consistent with the new filteration system icons. The colors used are more modern and follow the color scheme consistent with the Reddit mobile app.

Users are able to easily click out of the popup and revisit the home screen if they wish to

Usabiliy test

Usability test

Task 1

Participants were asked to make their way to the “r/aww” subreddit

Goal: to evaluate better methods to guide users to their destination.

Participants were asked to find the most upvoted post on the subreddit

Goal: understand how easy it is for users to understand the terminology used on the filtering system & navigation to a
specific post.

Task 2

Task 3

Participants were asked to like the 2nd most upvoted comment on the most upvoted post found in task 2

Goal: to understand the learnability of Reddit & navigation through the thread feature in the comments section.

Findings

Initial evaluation:

The average task time for task 1 was noted to be 1 minutes, Average task time on task 2 was noted to be 2.33 minutes, and average task time on task 3 was noted to be 3 minutes. From this it can be inferred that as the tasks went on, the application did not get easier to use for the participants, they still struggled carrying tasks out.

Evaluation after redesign :

The average task time for task 1 was noted to be 1 minutes, Average task time on task 2 was noted to be 1.33 minutes, and average task time on task 3 was noted to be 1.67 minutes. From this it can be inferred that as the tasks went on, the application got easier to use for the participants, an improvement was noted in improved interface

Initial evaluation:

The number of errors on task one were fairly low, most participants did not make nay errors while completing the task, other than 3 participants who made 4 errors. The average number of errors made on task 2 were 2.16,

Evaluation after redesign :

The number of errors on task one remained low, with only one participant making 1 error. Similarly with task 2, the participants did not make any errors other than 2 participants who made 1 & 2 errors each.

Initial evaluation:

Participants were asked to rate the task difficulty on a scale of 1-low to 10-high after the completion of each task. It was found that on task one the average rating was 2, which is fairly easy. On task 2, the average rating was 5.3, 3 users found the task between the 8-10 difficulty range while the other 3 were able to complete the task with not much difficulty.

Evaluation after redesign :

It was found that with the improved design, on task one the average rating was 1.16, On task 2, the average rating was 3.3, on task 3 users found the task to be on an average of a 3 on the difficulty scale, reducing the task difficulty significantly in the improved design.

Initial evaluation:

The participants were asked to rate their overall confidence with using the application once the study was over, to which, majority of the participants rated their confidence levels very high. This shows that despite making numerous errors, participants would use the application again.

Evaluation after redesign :

The enhanced interface confidence ratings show similar results to the original usability test, with very high confidence ratings for all of the participants.

Reflections

Recording the usability tests is extremely important. It was useful to go back & watch the recordings to capture any missing information

Asking the participants their overall thoughts on the application once the usability test was completed was insightful - they were able to freely express how they felt without being in a pressured test environment

Applying principles learned the classroom allowed us to see how principles work in a real product

Assuming user knowledge is not as accurate as conducting a usability test and observing how tasks are run

Even though the UI looks simple for a regular user, we have to think back to our first experience of using the application
by changing this mindset, there could be better UI, rather than just sticking to what is bad but familiar

Redesign of the Reddit interface

SKILLS & TOOLS

ROLE

TIMELINE

LOCATION

TEAM

The problem

Hence, we decided to Focus our evaluation on the user interaction on Reddit content including:

User personas

Interface evaluation

We Evaluated navigation to a SubReddit against 2 design principles:

We Evaluated Filteration of content against the hidden affordances principle:

We Evaluated the thread comment section against 2 design principles:

Comparative study

Prototyping

Low fidelity

High fidelity

Solutions

Usability test

Task 1

Participants were asked to make their way to the “r/aww” subreddit Goal: to evaluate better methods to guide users to their destination.

Participants were asked to find the most upvoted post on the subreddit Goal: understand how easy it is for users to understand the terminology used on the filtering system & navigation to a specific post.

Task 2

Task 3

Participants were asked to like the 2nd most upvoted comment on the most upvoted post found in task 2 Goal: to understand the learnability of Reddit & navigation through the thread feature in the comments section.

Findings

Initial evaluation:

Evaluation after redesign :

Reflections

Participants were asked to make their way to the “r/aww” subreddit

Goal: to evaluate better methods to guide users to their destination.

Participants were asked to find the most upvoted post on the subreddit

Goal: understand how easy it is for users to understand the terminology used on the filtering system & navigation to a
specific post.

Participants were asked to like the 2nd most upvoted comment on the most upvoted post found in task 2

Goal: to understand the learnability of Reddit & navigation through the thread feature in the comments section.