Reddit Website Redesign - Concept

UX | UI | Web Design

The reddit website was evaluated through a process of in-depth user testing before and after the redesign, analyzing both qualitative and quantitative data. Overall, the new concept improves usability of the website and shows an increase in enjoyment of the site while staying true to reddit’s original style.

Context:

Goal
The challenge of this project was to re-design the reddit website based on a poorly designed user interface (ineffective use of white space, difficulties in identifying hierarchies, excessive line counts, and cluttered header).

Team & Role
Amelie Dufresne – UX/UI Researcher & Designer

Tools
Adobe XD
InVision

Discovery:

1. Existing Website

2. Audience Breakdown
Primary Audiences:
Members of the reddit community, typically males aged 18-29 years old. The main reasons for members to use reddit include getting informed on the news and browsing trending headlines on various topics. Some members use reddit to obtain answers to questions. Reddit has also become a platform for anonymously getting social support on mental health illnesses.

Secondary Audiences:
Lurkers on the reddit website. These users are not members of the reddit community, they don’t contribute to posts, discussions or voting of posts. Lurkers browse the homepage for entertainment or as a news source. They account for approximately 90% of the website user base.

3. Expert Audit Analysis
Observations:
- poor information hierarchies
- clickable elements are not clear
- comment boxes need be clearer
- some links lead to identical pages — not clear which way is best
- post order is confusing — based on a non-intuitive algorithm
- comment threads are too long
- can be difficult to distinguish between posts
- purpose of the site is not clear
- full access to the site only for members and “reddit gold” earners
- each subreddit page is different — creates confusion
- poor and unattractive design
- colours are not appropriate for colour blind users
- line lengths are not always appropriate
- contrast and proximity layout principles are not followed
- not all users contribute to the community

4. Competitor Analysis
Voat.com
hubski.com
twitter.com

Recommendations:
- cleaner and more modern design
- links should not lead users offsite
- create easy to follow comment threads
- clean header
- consider organization by columns
- make site information easy to find
- improve information hierarchies
- posts should be clearly differentiated
- original post should be clearly identified within its own thread

5. Literature Review
Research Based Recommendations:
- tailor towards young males users
- consider lurkers in redesign — they could become members
- browsing posts should be easy
- voting should encourage users to view posts prior to voting
- mental health communities should be easy to find
- anonymity must be an option

Typeface:
VAG Rounded

Colours:
Black white, red and light blue.

Look and feel:
Neutral, happy and minimalistic.

7. Existing Sitemap Analysis

8. User Testing & Interviews
Recommendations:
- clearly identify sorting of posts and options to alter sorting preferences
- the comment box for each post should be clearly identified
- posting formats should be clear and easy to interpret
- website design must be improved to entice users to return to the website and recommend it to others

9. Recommendations Summary
Improve the clarity of various aspects of the website:
- information hierarchies should be clearer to make the website more scannable and less confusing
- interactive elements should be clearly identified in order to enable users to interact and contribute to the reddit community
- the purpose of the website is unclear for new users
- individual posts should be clearly differentiated

Improve the ease of usability flow for users:
- ensure that clickable content does not redirect users to external websites
- comment threads are long and cannot be easily collapsed to reduce length
- users often felt confused and frustrated with the flow of interaction
- voting on posts should be enabled only once viewed in order to reduce artificial popularity of posts
- search results should always be relevant to the searched items

Consistency between site pages should be improved:
- subreddit pages have various layouts and contents, which confuses users
- post sorting is not intuitive and varies between pages

Overall aesthetic appeal of the website is poor:
- outdated and unattractive design should be improved to be clean and modern, yet stay true to the reddit brand
- the header should be cleaned up to include only a few important links
- line lengths should be reduced to improve readability
- the website design should be tailored towards a young male audience to increase membership

Develop:

1. Revised Sitemap & UI Flow

2. Wireframes

3. High Fidelity Mockups

Solution:

Welcome Page Pop-Up:
- For 1st time users only
- Explains what reddit is
- Option to sign up or login

Homepage + Subreddit Pages:
- Decluttered header
- Subreddit pages on the left
- Posting input. box is easy to find
- Expanded posts for easy content viewing
- Easy to find “new to reddit” link
- Replaced action text with icons
- Fewer external links (no automatic redirect)
- Ability to collapse/expand all posts or comments
- Changed the location of upvote/downvote buttons to prevent artificial results

Single Post (comments):
- Made into a pop-up
- Collapsed comment threads
- Ability to expand/collapse all comments

Search Results:
- Added search results sections
- Clearly identifies search words
- No unrelated results

Overall Key Changes:
- Improved layout of homepage, subreddit pages and single posting page
- Improved hierarchies
- Retained overall design and flow of original website, with added improvements

Evaluation:

User Testing & Interviews

A/B Test:
Should the posting feed show expanded posts or collapsed posts when non-members attend site? This would only apply to first-time users (non-members). Members would be able to set their preferences to expanded or collapsed.

User Test Analysis of Redesign:
- all tasks show a faster completion rate
- all tasks where wrong clicks were a problem show fewer wrong clicks
- identification of first comments of comment threads is confusing for some users
- users showed confusion when identifying the most popular post
- users found the redesign more visually appealing
- users found the redesign more compelling to browse
- users were more satisfied by the completion of the tasks
- users are more likely to recommend and return to the redesigned website
- A/B test results show a tie in preference of homepage layout