Case Study: Reddit.com

Conducted user research to redesign the Reddit.com homepage

The Problem

Reddit is a popular website to discover content based on the interests of its users. However, usability research identified major issues that hinder first time users from signing up for accounts and engaging with content.

The Solution

Redesign Reddit’s home page to increase the findability of controls and scanability of content. Enable user to easily find and discover communities.

Discovering the Problem

Heuristic Evaluation

Consistency and standards

Primary menu lacks visual hierarchy: font is too small and unbolded, inconsistent headers and navigations between subreddits.

Match between system and the real world

Changing the language from English only updates a small portion of the website - not all the content.

Aesthetic and minimalist design

Reddit.com has a cluttered and very busy design. Weak visual hierarchy.

Recognition rather than recall

The “Submit a new link” and “Submit a new text post” buttons are hidden between advertisements.

Reddit Post buttons

Buttons to post content are hidden

Cognitive Walkthrough Evaluation

Goal: Identify usability issues with reddit.com's home page and sign-up process

Conducted evaluation using Wharton’s cognitive walkthrough full method.

I'm not a robot error message

Error message doesn't clear

Major usability issues identified

Step 1: Click on the “sign up” button - Control is difficult to find.

Step 8: Click on the “submit” button - “I’m not a robot” error message doesn’t go away.

Competitive Analysis

Goal: Assess threats and identify opportunities.

Key Findings

  • Facebook is the biggest threat to Reddit due to its audience size and resources. It continues to promote community features (groups and pages) and embed content in news feeds.
  • Facebook, StumbleUpon, and Voat are doing a great job with user engagement and pages views per visit.
  • Digg and StumbleUpon provide a clean and modern design style.
StumbleUpon nav bar

StumbleUpon leverages a persistent nav bar to keep users engaged.

Usability Testing

Conducted unmoderated user testing of canvas current site

Clip of participant trying to find a subreddit after signing up for an account.

Key Insights

  • Layout is cluttered.
  • Sign-up button difficult to find.
  • Modal window in sign-up process is prone to slips causing users to exit the process.
  • Users had a difficult time finding their subreddits because of the small navigation bar.

Key Actions

  • Increase spacing between elements.
  • Increase signifiers - solid buttons, drop shadow, and hover effect.
  • Implement sign-up screens instead of using modal window.
  • Make subreddit menu more prominent with larger text size.

Define the strategy

Improve findability of controls

  • Increase signifiers and size of controls
  • Implement icons for common controls

Improve scanability of content

  • Make content more image centric
  • Increase visual hierarchy and spacing between elements

Provide a consistent experience

  • Create standard headers and menus across the site while providing subreddit personalization
  • Redesign navigation - increase clarity and recognition

Sketching

Home page

Sketching Reddit Homepage

Design Choices

The main goal was to make the content easier to scan by creating space between panels and including large images.

I consider three different layouts:

  • Single column (current layout)
  • Horizontal responsive grid
  • Masonry/pinterest style grid

I choose the horizontal grid as the default view because it offers the traditional “Z” scanning flow. Plus it takes less development cost than the masonry style grid.

Prototyping and Testing

Developed initial wireframes and tested prototype.

Homepage with notifications

Reddit Homepage Paper Prototype

Dashboard with badges and user stats.

Reddit Dashboard Paper Prototype

Insights

  • Positive feedback on layout and images.
  • Notification and profile icons are easily understood.
  • Dashboard labels and stats are not clear.

Action

  • Move forward with grid layout.
  • Improve dashboard labels.

Iterating

Revised design based on feedback and testing.

Early version of sign-up flow with a modal window

Reddit Dashboard Paper Prototype

Version two of sign-up flow with screens.

Reddit Dashboard Paper Prototype

I changed the sign-up user flow from modal windows to a screens because I wanted to minimize distrations and potential errors/slips that I identified during usability testing.

High Fidelity Prototype

Takeaways and Lessons

  • Mixed research methods allowed me to identify a variety of usability issues to address.
  • Iterative process of design is fun.
  • Design is never finished. I identified additional improvements after testing my high fidelity prototype with users.

Next Steps

A few weeks after completing my project, I learned that Reddit was planning to release a new design of their home page. I'm looking forward to comparing my version with theirs.