Reddit: Designing the Search Empty State for Reddit News Entry

2018 • UX • UI • PRODUCT DESIGN • NATIVE IOS

 
reddit-news-empty-state-header.png
 

PROJECT OVERVIEW

About Reddit News & the Problems to Solve

Please refer back to the Reddit News Entry Points Overview for more context.

Results & Solutions

  • Redesigned two final solutions of the “Empty Search State” as entry points into the new Reddit News experience — resulting in a combination of the “News” product with the “Trending” product, both of which share the same space, under the greater context of “Search”

Role & Timeline

  • Owned the entirety of the project as the main Product Designer, while working with multiple PMs

  • The redesigned “Empty Search State” was completed in 2 weeks.

 
 

SOLUTION TWO

The Empty Search State

The most interesting and challenging thing about this particular project is that it evolved from simply having to design a “News” widget, to one that required the involvement of multiple players on a different team, who were working on the “Trending” product. Therefore, I had take into consideration both the visual alignment and correlating experiences of the two products while designing for this once, rather unused, real estate.

Empty Search History.png

DISCOVERY

Analyzing Industry Trends

While the original News product had already been designed for Reddit on native iOS, I began my research by looking at other mobile products which also had a screen that are both entirely “newsie,” but also included other elements of news such as “Trending.” By studying the layout UIs, IAs, user experience flows and copy for Apple News and Twitter — I found inspiration to begin defining and ideating on how this screen (which was now a hot commodity) could be designed as a mode of entry for the new Reddit News experience.

IDEATION

Ideation, Pt. 1

My first attempts at exploring different ways to introduce an entry way into a brand new “News” experience was centered around the design of a separate “News” widget, separate from “Trending.” I avoided touching the “Trending” designs as I felt it wasn’t my place, for the product design was owned by another team. After a few meetings, casual chats and a design critique…I quickly realized that I wasn’t thinking outside of the box enough.

Screen Shot 2019-01-14 at 7.05.04 AM.png

Ideation, Pt. 2

Thus, I shifted my strategy and played around with the “Trending” designs — trying to find ways to align both “News” and “Trending,” as the two products and concepts, in general, overlap greatly.

Screen Shot 2019-01-14 at 7.13.13 AM.png

A Shift in Strategy…

For my final set of explorations, I decided to dive deeper into the future of the product as a whole. With better designs for search already on their way and a longterm product strategy plan to incorporate mod-flairing (categorizing content), I knew I had to find ways to ensure that the final design solutions wouldn’t be something temporal — but scalable and lasting for the future.

Screen Shot 2019-01-14 at 7.22.56 AM.png

RE-DEFINE

Information Architecture

With the final design solutions (which are just slightly down the page), you will see that each design is tailored to either a news-heavy user or a one that engages far more so with the trending product. Depending on the content they consume on Reddit, the user will fall into one of these buckets — though, this is not permanent, as behaviors and interests may shift. Both designs allot each major news or trending post to have multiple flairs. And, thereby, granting users the ability to explore both news headlines and things that are trending through a single and united experience.

FOR THE HEAVY NEWS USER

empty-search-news-ia.png

FOR THE TRENDING-ENGAGED USER

empty-search-trending-ia.png

HI-FIDELITY MOCKS

The Redesigned “Empty Search State”

There are two final design solutions — one for the news-loving user, and another for the user who engages more so with trending. Depending on how you browse on Reddit, you will see one of these screens when you tap on that universal search bar.

 

HEAVY NEWS USER

final-search-empty-state.png

TRENDING-ENGAGED USER

final-trending-user.png
 
 
 

LEARNINGS + REFLECTIONS — COMING SOON!

Thanks for reading, or skimming. Reflections coming soon!

— M.