Reddit: Designing the Reddit Events Calendar for Desktop

2018 • USER RESEARCH • UX • UI • PRODUCT DESIGN • DESKTOP WEB

 
events-calendar-desktop-portfolio.png
 

PROJECT OVERVIEW

About Reddit Events & the Problems to Solve

Please refer to the Reddit Events Calendar for Native iOS case study for more details.

Results & Solutions

  • Designed the MVP of a Reddit Events Calendar that allows for both following, unfollowing as well as discovery of new events that are happening at the moment or scheduled on Reddit

  • Designed and mapped out multiple entry points for each user’s Reddit Calendar on desktop web

Role & Timeline

  • Owned the entirety of the project as the main Product Designer, while working with a PM and a team of engineers

  • The desktop (web) calendar was designed in 2 weeks.


 
 

A (MILDLY) DIFFERENT STORY: THE DESIGN PROCESS

To avoid being repetitive, I’ll keep this short — as much of the process for the desktop design correlates with that of the native design of the calendar. In any case, there were a few key differences.

For the sake of simplicity, I’ll be focusing this case study the parts of design process emphasized below and the parts of each step that differ from that of the Reddit Events Calendar for Native iOS.

reddit-desktop-events-process.png

I. Discovery

Competitive Analysis

 

Competitive Analysis

The first difference was that I conducted a different type of competitive analysis of “events” units used for products such as Facebook Events, Eventbrite, Ticketfly and SeatGeek on desktop, prior to the Ideation stage.

desktop-units-comparison.png

II. Define

Core Features
Information Architecture
User Flow

 

NECESSARY CORE FEATUREs

While all of the necessary core features remained the same for the desktop calendar and the native iOS calendar, there was more focus based on these three particular features as the “Discovery” experience was less limiting to design on Reddit’s desktop site.

desktop-calendar-core-features.png

INFORMATION ARCHITECTURE

The overarching information architecture for the desktop calendar is also similar to that of the native iOS calendar — with the same limitations, in terms of Reddit’s lack of categories. However, the entry points differ.

calendar-desktop-ia.png

USER FLOW

The only major difference between the desktop calendar and the native calendar are the interactions in regards to notifications when an event is about to start, as it will be pinned to the top of the user’s home feed and a notification toast will appear (no matter where the user is in their Reddit experience). Furthermore, defining notifications settings and the ability to turn them on or off were out-of-scope for this project.


SKIPPING AHEAD...

IV. Validation

User Insights

 
 

USER INSIGHTS

I was able to conduct some user research to gain insights in the Validation stage of my process, post-ideation, with users primarily unfamiliar with Reddit with the final exploratory designs. Ultimately, leading to the final design solution.

Option A:

Option B:

final-desktop.png

After conducting 3 user interviews — showing strangers who aren’t familiar with Reddit — these two options and flows. It was obvious across the board that Option B was the right design solution as Option A was incredibly confusing to these non-Redditors, for they thought the “classic view” event units were actually comments rather than individual events.

Furthermore, those I spoke with felt that Option B, with the “card view” feed when narrowed down by date provided a better browsing experience — especially in the context of “Discovery.”

 
 

V. Prototype

Hi-Fidelity Mocks
Invision Prototyping

 

HI-FIDELITY MOCKS

Here’s a clearer view of the screens from the final design solution (Option B)

Events Calendar — Following

following-final.png

Events Calendar — Discover

discover-final.png

Events Calendar — Discover “Today”

discover-today-final.png

Additional Screens

mvp-ep.png
future-ep.png

INVISION PROTOTYPING

Feel free to check out the Invision prototype, with toasts and all, of the Reddit Events Calendar flow on desktop web.