XIAOXI
smartmockups_jtn49wxv.jpg

Spotlight

Spotlight - Behind News

Categories  UI/ UX Duration  5 weeks  Tool  Sketch, Principle, PS, Protopie   

Advisor  Renda Morton (Director of Product Design, New York Times)

Teammates  Jennifer Wei, Yumeng Ji

My Role  Collaborated with teammates throughout the concept and design process: Concept creation, Wireframe, UI, Interview.


 

Problem

There is a lot of interesting behind-the-scene stories that readers are not aware of.

Problem with NYT is that its value is not fully understood by the readers when there’s a lack of transparency in reporting process and reporters, and people do not acknowledge the effort in crafting a news story.

 
 

Solution

The spotlight is an add-on feature in existing New York Times mobile app to showcase reporters’ reporting process with a snippet of behind-the-scene field stories, which makes readers respect reporters and their works more.

Our goal was to create a feature that makes the reporting process more transparent and engaging.

For user: Curious about reporters’ experiences in the field

For NYTimes: Change the perception that news should be free

 
 

1. Find Spotlight - Homepage - Scroll Down

 

2.Explore and browse the back stories        

smartmockups_jtn2jrm4.png
homepage.gif
prototype.gif

3.Reporter Profile - Read more stories by timeline

smartmockups_jtn2k1v9.png
profile.gif

4.Article Page - Back story page

smartmockups_jtn2jher.png
4.gif
 
 

Design Process

Before diving into the research, we asked ourselves some questions:

  • Who is the users?

  • Do they know the effort of reporting process?

  • What do they want to know about the effort?

  • How do they want to know?

Interview research - We interviewed six people about New York Times App and validated our assumption.

Assumption: The user needs include receiving news more efficiently and interestingly, a better understanding of the backstories of the news, and getting more engaged with the process of making the news.

Spotlight-NYT.jpg
 

User Scenario

WHO - Already using NYT mobile app

WHEN - Daily routine, short period of time ( eating time, chat, break time)

WHERE - On transit

USER BEHAVIOR - Create empathy feeling towards reporting process that can be difficult and complex.

photo-1525278354047-0f49f942edf5.jpg
 
 

Design Iteration

Live video user flow ( click into big)

Live video and screen comments idea are our initial design. The idea is an app platform for reporters which they can use it to live show when they go to field report. At the same time, the readers can ask them real-time questions according to field report and interests. But when we showed the live video concept to our teachers and classmates. We got some feedback.

  • The process of getting research material for reporters, do they have time to do extra work?

  • With this fun and millennial approach, we might lose people who have trusted NYT. ( Not match the NYT branding )

  • Showcase? More like another way to show the news.

 
 
  • Where is the back story page?

  • How does user find it?

  • What is the main page looks like?

  • How does user interact with it?

  • How do we classify the news categories?

Whiteboard User Flow

Spotlight Wireframe Sketches

 

Key Features

  • Back stories consist of videos, audio clips, and photos.

  • Introduce individual reporter’s profile, showcasing all of their field stories along with links to articles.

  • Can be accessed from NYT home screen, articles, and reporters’ profile.

Spotlight Wireframe

 
 

 

Feedback

The product idea is excellent.

The UX design of spotlight is bright and exciting.

The UI design is too conventional. UI design should be differentiated from the regular news page.

The reporter profile page - content categories are topics - complicated & extra work - lack of story(narrative).

So base on feedback, I made some change of design. I used a dark color to fit "back" stories topic and differentiate from regular NYT news white page. Moreover, light intensity and relax layout used into field story page, but still not too playful or colorful. It has to be compatible with New York Times branding.

First Version Design (we presented this version to New York Times design team.)

show.jpg
 
 

What I learned from this project

  1. Don't jump into high fidelity designs so quickly.

  2. Don't make any decisions before you solidify the user needs.

  3. Don't have any preconceived notions when you design.