Newsroom App

Mobile UX/UI Design

 

Project Overview

I worked with a focused team of pm, engineers, researchers, and designers to launch a community-driven news app for native iOS and Android. As a senior product designer, I played a role in defining the UX/UI of the product.

 

High-Level Process & Points of Collaboration

NewsroomMain.png

 

Key Questions

What problems are we trying to solve?
What are the different types of users we want to target?
How do we measure success?
What are the common use cases?
How does this product differentiate itself from others?

 

Challenge

The main goal was to create a product where people could quickly discover and discuss the news around the world. Our vision was to create healthy communities powered by quality news contents.

 

Research

With help from the research team, we identified what people liked and disliked about about the current Yahoo news experience.

Liked
"The focus on the breaking news"
"Little less gossip and a little more news"
"Important news sticks out to me"

Disliked
"Lack of personalization"
"Quality of the comments are bad"
"Way too many notifications"

Research also showed that most of the news readers didn't care much about the comment section but those who did were significantly more likely to come back to the app frequently.

 

Delivering the News

The design goal of the layout was to make sure that the users see the most important news first when they open the app. We focused on designing a rich and cohesive experience for all media types.

 Home page hierarchy

Home page hierarchy

 News experience with enriched visuals

News experience with enriched visuals

 Video post types (16:9, 1:1, 9:16 / live, regular, segmented)

Video post types (16:9, 1:1, 9:16 / live, regular, segmented)

 Card design for showing slideshows

Card design for showing slideshows

 User-generated card/details view

User-generated card/details view

 Off-net contents

Off-net contents

 

Communities

 Community discovery design explorations

Community discovery design explorations

 Community page structure

Community page structure

User Profile & Reputations

 Profile (own & someone else's)

Profile (own & someone else's)

 Reputation badges

Reputation badges

Designing the common UI components

 Common UI: Notifications, sharesheet, access module

Common UI: Notifications, sharesheet, access module

Next

Yahoo Sports Redesign