University of Southern California Dissertations and Theses

The next-generation news application: Stories in context

(USC Thesis Other)

The next-generation news application: Stories in context

PDF

Download a page range

Download transcript

Copy asset link

Request this asset

Transcript (if available)

Content

THE NEXT-GENERATION NEWS APPLICATION:
STORIES IN CONTEXT

by

Stefani Urmas

A Thesis Presented to the
FACULTY OF THE USC GRADUATE SCHOOL
UNIVERSITY OF SOUTHERN CALIFORNIA
In Partial Fulfillment of the
Requirements for the Degree
MASTER OF ARTS
(SPECIALIZED JOURNALISM)

August 2018

Copyright 2018 Stefani Urmas
1
ACKNOWLEDGMENTS

Deepest thanks to my thesis chair, professor Gabriel Kahn for his encouragement and eye-
opening insights. I am also grateful to my mentor, an amazing UX strategist Jaime Levy
for teaching me the most valuable skills I learned during my stay in the U.S. Your classes
were amazing and gave me the expertise and knowledge that I will need on my future
endeavors. I owe my success also to professor Peggy Bustamante who taught me to code
and understand the nuances of digital design and software development.

My work is dedicated to the Helsingin Sanomat Foundation
1
that granted me a
scholarship to study digital journalism in America. Without the generous help of the
foundation I would never have had a possibility to update my skillset and become a news
oriented UX strategist and designer. It will be my honor and duty to use my knowledge
making quality journalism shine in Finland.

Most of all, I want to express my greatest gratitude to my wonderful wife Tiina for her
resilience and understanding, support, inspiration and love that has given me strength to
push through the darkest days.

1
http://www.hssaatio.fi/en
2
TABLE OF CONTENTS

ACKNOWLEDGMENTS .................................................................................................. 1
TABLE OF CONTENTS....................................................................................................2
LIST OF FIGURES ........................................................................................................... 5
1.0 INTRODUCTION ....................................................................................................... 7
1.1 Project Goals ......................................................................................................9
1.2 Design Process ................................................................................................. 10
2.0 PERSONAS .............................................................................................................. 12
2.1 User Interviews ................................................................................................ 12
2.2 Validated Personas .......................................................................................... 15
3.0 COMPETITIVE RESEARCH AND ANALYSIS ......................................................... 16
3.1 News Outlets .................................................................................................... 16
3.2 News Aggregators ............................................................................................ 21
3.3 Features Comparison ....................................................................................... 25
3.4 News Organizations’ Problems ........................................................................ 25
3.5 Competitor Analysis Brief ................................................................................ 27
4.0 VALUE INNOVATION.............................................................................................29
4.1 Personal News ..................................................................................................29
4.2 Engaging News ............................................................................................... 30
4.3 Efficient News ................................................................................................. 31
4.4 Contextualized News .......................................................................................32
4.5 Context Scenario and User Stories ................................................................... 33

3
5.0 INFORMATION ARCHITECTURE ..........................................................................34
5.1 Site Map ........................................................................................................... 35
6.0 WIREFRAMES ........................................................................................................36
6.1 User Flow ......................................................................................................... 37
6.2 Functional Specifications................................................................................ 38
7.0 VISUAL DESIGN GUIDELINES .............................................................................. 45
7.1 Typography ...................................................................................................... 45
7.2 Color Palette ................................................................................................... 46
8.0 PROTOTYPE ........................................................................................................... 47
8.1 Prototype Demo Script ..................................................................................... 47
8.2 Mockups & Demo Screens .............................................................................. 48
9.0 USER TESTS ........................................................................................................... 51
9.1. Research Plan ................................................................................................. 51
9.2 Results and Findings: Task 1 – News Feed ...................................................... 54
9.3 Results and Findings: Task 2 – Story Streams ................................................. 55
9.4 Results and Findings: Task 3 – Topics............................................................. 56
9.5 Results and Findings: Task 4 – Live Stories .................................................... 57
9.6 Results and Findings: Task 5 – News Briefings ...............................................58
9.7 Results and Findings: Follow up Questions ..................................................... 59
10. ITERATION ............................................................................................................. 61
10.1 Concepts ......................................................................................................... 61
10.2 Prototype ....................................................................................................... 61
10.3 Revised Research Plan ................................................................................... 67

4
11. CONCLUSION AND NEXT STEPS .......................................................................... 69
BIBLIOGRAPHY ............................................................................................................ 71

5
LIST OF FIGURES

Figure 1. Design process: applying the Lean startup methodology. ................................ 11
Figure 2. Validated Secondary Persona. Daniel, upwardly mobile professional. ............ 15
Figure 3. Validated Secondary Persona. Jennifer, tech savvy college student. ............... 15
Figure 4. Competitive Research. The New York Times & The Washington Post............. 19
Figure 5. Competitive Research. The Guardian & BBC.................................................. 20
Figure 6. Competitive Research. Axios & Vox News. ..................................................... 20
Figure 7. Competitive Research. Apple News & Yahoo Newsroom. ................................23
Figure 8. Competitive Research. Flipboard & Compass News. .......................................24
Figure 9. Features Comparison. ..................................................................................... 25
Figure 10: Information Architecture: All stories, Topics, Story Steams, Stories. ............34
Figure 11: Information Architecture: Stories and story containers. ................................34
Figure 12. Site map and the primary user flow (marked with blue color). ...................... 35
Figure 14. Primary user flow and wireframes of the main screens. ................................ 37
Figure 15. Home Screen. Wireframes and functional specifications. ............................. 38
Figure 16. Trending Topics. Wireframes and functional specifications. .........................39
Figure 17. Featured Stories. Wireframes and functional specifications. ........................ 40
Figure 18. Catch up / News Briefings. Wireframes and functional specifications........... 41
Figure 19. Topic. Wireframes and functional specifications. ..........................................42
Figure 20. Story. Wireframes and functional specifications. ..........................................43
Figure 21. Story map / Story Stream. Wireframes and functional specifications. ...........44
Figure 22. Typographic guidelines: Serifs (Lyon) and Sans Serfs (TT Commons). ......... 45
Figure 23. Primary colors, grayscales, accent colors and gradients. .............................. 46
Figure 24. Mockups: My News feed (home) and Story screens. .................................... 48
6
Figure 25. Mockups: Story and Story Streams. ............................................................. 49
Figure 26. Mockups: Trending Topics and Topics feed. ................................................ 49
Figure 27. Mockups: Live Story and Story Streams. ...................................................... 50
Figure 28. Mockups: Catch up / News Briefings. .......................................................... 50
Figure 29. Results: Exploring news feed and navigating between stories. ...................... 54
Figure 30. Results: Exploring Story Streams and opening related articles. .................... 55
Figure 31. Results: Exploring Trending Topics and following topics. ............................. 56
Figure 32. Results: Exploring and following Live stories. .............................................. 57
Figure 33. Results: Browsing through the Morning briefing and opening stories. .........58
Figure 34. Results: Follow up Questions. ....................................................................... 59
Figure 35. Home screen before and after. ......................................................................62
Figure 36. Story screen before and after. .......................................................................63
Figure 37. Story Stream before and after. ..................................................................... 64
Figure 38. Trending Topics before and after. ................................................................. 65
Figure 39. Live Story before and after. .......................................................................... 66
Figure 40. News Briefing before and after. .................................................................... 67
Figure 41. The current phase of the project and a plan for the future. ........................... 69

7
1.0 INTRODUCTION

The 200-year-old news industry really knows the art of traditional reporting and
storytelling. However, presenting those stories on digital platforms is another thing. The
digital revolution and the rise of gigantic tech companies have forced the news industry
to reinvent its business during the past decade. Nevertheless, the way news stories are
delivered and presented on online news sites and mobile apps has remained surprisingly
undeveloped. Only the most prominent publishers – The New York Times in front – have
been able to innovate new story formats and drive successful digital strategy
2
.
Unfortunately, for many legacy media companies the digital transition has simply meant
transferring the old newspaper product to digital platforms
3
.

Traditional story production, design, and distribution of journalism no longer fit with the
preferences for consumption of media. Readers’ mobile moments are short and
fragmentary: People are multitasking and being frequently interrupted
4
. Regardless,
news products and articles are mostly designed for focused readers, not for hasty
skimmers who enter the sites via social media links.

2
Dianne Lynch, “Above-and-beyond. Looking at the Future of Journalism Education. The State of American Journalism. News faces and a
new frontier,” Knight Foundation, accessed March 23, 2018, https://knightfoundation.org/features/je-the-state-of-american-journalism.
3
Tess Saperstein, “The Future of Print: Newspapers Struggle to Survive in the Age of Technology,” Harvard Political Review, December 6,
2014, http://harvardpolitics.com/covers/future-print-newspapers-struggle-survive-age-technology.
4
Laura Adams, Elizabeth Burkholder and Katie Hamilton, “Micro-Moments: Your Guide to Winning the Shift to Mobile,” Think With Google,
September 2015, 3–4, https://think.storage.googleapis.com/images/micromoments-guide-to-winning-shift-to-mobile-download.pdf.
8
In many legacy media companies, news production models, story formats and news
platforms are outdated
5
and news aggregators and social media platforms outperform the
legacy media news services in terms of usability, personalization, and engagement
6
.

The purpose of this project is to learn news consumers’ needs and habits, study existing
news apps in the English-speaking market, and generate new ideas on how to build a next-
generation multimedia news application that provides readers with a personal, engaging,
efficient, and contextualized news reading experience.

My vision is to challenge social media platforms, which increasing number of people are
using as their primary news source
7,8
, with an ambitious news application that helps
legacy media companies engage with their audiences on mobile devices. Strengthening
loyalty, customer satisfaction, and trust will ultimately heal the broken news ecosystem
that is one of the main reasons for the financial struggles of news media
9
.

5
Alexis Lloyd, “The Future of News Is Not an Article,” The New York Times R&D Lab, October 20, 2015,
http://nytlabs.com/blog/2015/10/20/particles.
6
H. Iris Chyi, Trial and Error: U.S. Newspapers’ Digital Struggles toward Inferiority, Universidad de Navarra, Pamplona: 2013: 24–25,
https://dadun.unav.edu/bitstream/10171/42076/1/201610%20MMM%2014%20%282013%29.pdf.
7
Elizabeth Grieco, “More Americans are turning to multiple social media sites for news,” Pew Research Center, November 2, 2017,
http://www.pewresearch.org/fact-tank/2017/11/02/more-americans-are-turning-to-multiple-social-media-sites-for-news.
8
Elisa Shearer and Jeffrey Gottfried, “News Use Across Social Media Platforms 2017,” Pew Research Center, September 7, 2017,
http://www.journalism.org/2017/09/07/news-use-across-social-media-platforms-2017.
9
“Newspaper publishers lose over half their employment from January 2001 to September 2016," United States Department of Labor,
Bureau of Labor Statistics, last modified April 3, 2017, accessed February 18, 2018, https://www.bls.gov/opub/ted/2017/mobile/
newspaper-publishers-lose-over-half-their-employment-from-january-2001-to-september
2016.htm?mc_cid=e73bf40429&mc_eid=e49f1168cb
9
1.1 Project Goals

Purpose of the thesis project
• To design a prototype of a hooking and habit-forming news platform and prove that the
concept would solve the target audience’s pain points regarding lack of focus, control, and
context.
• To create design deliverables (site maps, user journeys and use cases, wireframes, visual
design guidelines, mockups, a prototype, and user test reports) required for an actual app
developing project.

Quantitative objectives
• To find new audiences and increase app downloads, registrations, and number of
active users.
• To increase customer satisfaction, loyalty, and time spent on the app per session.
• To improve story-to-story recirculation and to reduce bounce rates (e.g., to make
users continue reading articles after entering the site from social media).

Long-term goals
• To gain trust and interest in legacy media outlets’ quality online journalism.
• To help repair the broken news ecosystem and strengthen democracies.

In my opinion, only a profitable press can be truly free, brave, and independent.
Therefore, the decline of news industry
10
is one of the biggest threats to journalism and

10
“Newspaper publishers lose over half their employment from January 2001 to September 2016,” United States Department of Labor,
Bureau of Labor Statistics, last modified April 3, 2017, accessed February 18, 2018, https://www.bls.gov/opub/ted/2017/mobile/
newspaper-publishers-lose-over-half-their-employment-from-january-2001-to-september
2016.htm?mc_cid=e73bf40429&mc_eid=e49f1168cb
10
to the development of free democracies. I believe that helping legacy media companies
invent the magic ingredient for finding and engaging their audiences on mobile is an
important way to heal the broken news ecosystem. There is evidence that people are
willing to pay for quality online news and support journalists’ work if the content is
compelling and the product is clear and easy to use and delivered in convenient,
customizable, and clean format
11
.

1.2 Design Process

In my thesis project, I followed the product development methodology introduced by UX
strategist Jaime Levy
12,13
. In addition, I applied the central principles of the “Lean
Startup” methodology to digital product development pioneered by Eric Ries
14
.

11
Shan Wang, “What makes people willing to pay for news online? Quality content; a clean, convenient reading experience,” NiemanLab,
September 15, 2017, http://www.niemanlab.org/2017/09/what-makes-people-willing-to-pay-for-news-online-quality-content-a-clean-
convenient-reading-experience.
12
Levy, Jaime, UX Strategy. How to Devise Innovative Digital Products that People Want, Sebastopol: O’Reilly Media, Inc, 2015.
13
INF-556 User Experience Design and Strategy (Fall 2017) and INF-555 User Interface Design, Implementation and Testing (Spring 2018)
at USC Viterbi, School of Engineering.
14
Eric Ries, The Lean Startup, Crown Publishing Group, (New York: Crown Publishing Group, 2011), 1–24.
11

Figure 1. Design process: applying the Lean startup methodology
15
.

First, I started from the customer discovery: Finding and evaluating customer problems
regarding online news consumption and validating the problem hypothesis. Second, I
conducted comprehensive market research and analysis to explore the marketplace and
find the most exciting products to benchmark and emulate. Third, I innovated solution
models that would solve users' problems and create value for the readers. Finally, I
produced design deliverables to set up a prototype and started testing my concepts with
users in a build–measure–learn feedback loop.

15
Brant Cooper and Patrick Vlaskovits, The Lean Entrepreneur, (New Jersey: John Wiley & Sons, Inc., Hoboken, 2016), 117–119.
Customer problem
hypothesis
and customer
discovery:
Creating primary
and secondary
personas.
Competitive
research and
analysis:
Studying
existing news
applications
and influencers.
Value innovation:
Creating solution
models and
designing key
experiences.
User flows
and use cases:
Designing the
information
architecture.
Design deliverables: Site map, wireframes, design guidelines, mockups
Developing the
product idea in a
build–measure–learn
feedback loop
Building
a prototype
User
tests
Findings
and iteration
VALIDATION VALIDATION
12
2.0 PERSONAS

Hypothesis: What kind of people might use the app and how do their needs and
behaviors vary?
Tech savvy students: Lean more toward videos and visuals, find stories from social
media, and want to get their news for free.
Upwardly mobile professionals: Commuters, busy readers, want to get smart fast,
interested in the society, ready, and willing to pay for digital news services.
Retired persons: Have a lot of time to read; addicted to news; have a hard time with
tech; and prefer print or newspaper replicas.

What ranges of behaviors and types of environments need to be explored?
• How often do they consume news on their smartphones? When and where?
• How do they find news? What apps do they use? Why?
• What kind of problems do they face? Do they suffer from information overflow? Are
they having a hard time getting the big picture of a news day?
• How willing are they to personalize / customize their applications?
• When would they listen to a news piece instead of reading it?

2.1 User Interviews

I conducted six one-on-one interviews in Los Angeles and Santa Monica in January 2018
plus seven interviews in March and April 2018. I met students, working professionals,
and retired persons and I framed the user pain points into the three categories:

13
Lack of time and focus
People suffer from information overflow. Readers feel that they don’t have enough time
to digest all the news stories they would like to. Articles take too long to read, and there is
lots of repetitive and overlapping information in them. Readers need help focusing. They
need relevant information in a more efficient format.

“I want that the most important and interesting stories will find me.” – Tiina
16
, 36
“I’m always trying to estimate how long does it take to read the story. I don’t like to stop
reading a piece before finishing it.” – Laura
17
, 34

Lack of control
Online news is fragmented, and stories seem to pop up in random order. News outlets,
websites, and applications feel chaotic. Generally, readers have a hard time getting the big
picture about the news of a given day.

Moreover, news sites tend to be disorganized and noisy, full of disturbing pop-up
advertisements despite the fact that consumers are increasingly frustrated with ads that
disrupt their reading, interrupt content and slow browsing down.

People get satisfaction from accomplishing things, striking completed tasks off their to-
do list. Keeping news short and concise will provide hasty readers with satisfaction more
likely than large packages. For example, a continuous news feed or an unfinished (too
long) story are unaccomplished missions.

16
Interview with Tiina Leinonen, Los Angeles, January 23, 2018.
17
Interview with Laura Kangasluoma, Los Angeles, March 19, 2018.
14
“I’d like to read digital news in convenient, customizable, and clean format.” – Bradley
18
, 29
“I have external feeling. There is so much going on and I am missing things all the time.”
– Laura
19
, 34

Lack of context
Nowadays, most readers enter news sites through shared articles, push notifications,
Google search results or other links and therefore, they are missing the context and
editorial emphasis that is traditionally indicated on front pages. In addition, online news
lacks conventional visual cues – such as sizing and positioning – that indicate
newsworthiness. Readers can easily mix up different news genres and even news articles,
advertorials (ads in story format) and fake news stories.

Facebook and other social media feeds have become the new front pages of legacy media.
Social media feeds are not designed for conveying journalistic emphasis and curation and
therefore people are missing the journalistic context of the stories.

“I have a hard time interpreting what’s important and what’s not. Is this the main piece
or just a side story? What has happened before? Should I invest my time on this?” –
Karina
20
, 26

18
Interview with Bradley Bermont, Los Angeles, April 17, 2018.
19
Interview with Laura Kangasluoma, Los Angeles, March 19, 2018.
20
Interview with Karina Saidi, Los Angeles, April 10, 2018.
15
2.2 Validated Personas

Figure 2. Validated Secondary Persona. Daniel, upwardly mobile professional.

Figure 3. Validated Secondary Persona. Jennifer, tech savvy college student.
16
3.0 COMPETITIVE RESEARCH AND ANALYSIS

I used and analyzed 10 legacy media outlets’ news applications and 8 news aggregators’
applications and listed the pros and cons plus the key features of each product.

3.1 News Outlets

The New York Times
21

Elegant and comprehensive platform for the New York Times content. Stunning visuals
and engaging multimedia storytelling.
Pros: Advanced story formats, elegant appearance, morning and evening briefings,
podcasts.
Cons: Exhaustive, thoroughly long stories, old-fashioned sections, constricted
personalization options.

The Washington Post
22,23

The Washington Post has separate apps for featured stories, daily news and newspaper
replicas. The WP app is a modern and engaging product, whereas the WP Classic is an old
school news application for daily news stories.
Pros: A section for AR stories, engaging story feed on the featured app.
Cons: Too many navigation bars, no personalization possibility, poor information
architecture, stories have dead ends (lacking related articles), traditional look and feel.

21
The New York Times, iPhone ed., v. 6.7 (The New York Times, 2018), accessed April 2–27, 2018.
22
The Washington Post Classic, iPhone ed., v. 3.17.0 (The Washington Post, 2018), accessed April 2–27, 2018.
23
The Washington Post, iPhone ed., v. 1.15.7 (The Washington Post, 2018), accessed April 2–27, 2018.
17
The Los Angeles Times
24

The app is more of a framework for the web content of the Times than a native mobile
application. Therefore, the experience is a bit clumsy and not easy to read.
Pros: Packaging and taking advantage of engaging theme contents (e.g. Jonathan Gold’s
101 Best Restaurants).
Cons: Disturbing, relentless ads. Too many navigation bars.

The Guardian
25

A comprehensive news app that provides lots of features and an up-to-date feel.
Pros: Customizable home screen, follow-the-author function, morning briefings, live
stories, one button navigation, unique look & feel.
Cons: Exhaustive, traditional sections, busy appearance.

BBC News
26

A robust news application for versatile BBC contents: articles, photo galleries, video and
radio pieces etc.
Pros: Highly customizable feeds, My News feed based on preferences and behavior, lots
of video content. Abundant selection of further reading (related stories and topics).
Cons: Official and sterile appearance feels a bit outdated, lacking advanced story formats,
maybe too robust of an app for non-news-geeks.

24
LA Times, iPhone ed., v. 5.0.1 (The Los Angeles Times, 2018), accessed April 2–27, 2018.
25
The Guardian, iPhone ed., v. 6.1 (The Guardian, 2018), accessed April 2–27, 2018.
26
BBC News, iPhone ed., v. 4.9 (BBC, 2018), accessed April 2–27, 2018.
18
BuzzFeed
27

A laid-back news application for young(ish) audiences.
Pros: Clear contrast between news and long reads, engaging video channels and
interactives (quizzes), tagged/labelled story types, quickly catch up -briefing at the top of
the news feed, brief set of topics.
Cons: Navigation is not intuitive, messy articles, noisy user interface, obtrusive ads.

USA Today
28

Traditional news app with decent personalization features.
Pros: Rich notifications include an article preview, neat photo galleries, Apple Watch
integration, customizable news feed widgets, ad-free reading mode, clean look.
Cons: Messy related article selection. Lacking multimedia storytelling and rich story
formats.

Mic
29

Lifestyle news magazine application for young audiences.
Pros: Personal and cool appearance, curated channels on popular phenomenon. The app
learns the user’s preferences and automatically gets more personalized.
Cons: Old stories, not very up-to-date, unintuitive navigation.

Axios
30

Modern news site focusing on brief storytelling and an efficient reading experience.

27
BuzzFeed, iPhone ed., v. 5.42.1 (BuzzFeed, 2018), accessed April 2–27, 2018.
28
USA Today, iPhone ed., v. 5.8.0 (USA Today, 2018), accessed April 2–27, 2018.
29
Mic, iPhone ed., v. 2.5 (Mic Network Inc., 2018), accessed April 2–27, 2018.
30
Axios (website), accessed April 2–27, 2018, https://www.axios.com
19
Pros: Simple structure, brief stories, structured texts / summaries, fresh and clean look
and feel.
Cons: Lacking advanced story formats and coherent story chains.

Vox News
31

News and opinion website that focuses on explanatory journalism: Reporting on the
backgrounds of big news topics.
Pros: Clear focus, story streams and curated story packages, podcasts.
Cons: Monotonous news feeds, the layout is a bit boring.

Figure 4. Competitive Research. The New York Times & The Washington Post.

31
Vox (website), Vox Media, accessed April 2–27, 2018, https://www.vox.com
The New York Times The Washington Post
Left : The New York Times provides readers with two briefings on every
day. The Morning Briefing and Evening Briefing appear on top of the home
screen when they are published. The briefings are simple story feeds.
Right: The NYT is a master of multimedia storytelling. Interactive story
formats are engaging and they differentiate the product from competitors.
Left : The Washington Post has dedicated a whole section for AR stories.
Right: The Washington Post has separate applications for daily news and
long-form featured stories. The traditional news app is designed for hasty
readers and the featured app for more relaxed experience. The reader’s
digest pieces stand out better on the beautifully designed app.
20

Figure 5. Competitive Research. The Guardian & BBC.

Figure 6. Competitive Research. Axios & Vox News.
The Guardian BBC
Left : The Guardian has removed all the navigation bars from the home
screen to give maximum screen real estate for the content. Hamburger
menu button is the only fixed navigation element on the screen.
Right: Users can personalize the home screen by adding topics to the feed
and changing the order of content blocks.
Left : Likewise the New York Times, the BBC News app has several section
feeds that users can change by swiping horizontally. My News is a
personalized feed that lists stories that the user has chosen to follow.
Right: A user can add topics to the My News feed on the Edit My News
modal or by clicking a plus icon on any topic feed.
Axios (website) Vox News (website)
Left : Axios is specialized in effective news reading experience. The website
doesn’t have any story pages. Instead, a user can expand and read the full
story on the news feed. The structure supports fast browsing.
Right: The interface tells the user, how many words are hidden. It also
suggests more reading on the same topic. Stories can be saved for later.
Left : Some of the Vox News stories have a curated collection of related
articles / updates. Vox News website is the only news outlet in my study
that provides users with coherent story streams and contextualization.
Related stories are presented on a timeline.
Right: Vox News website has a comprehensive list of podcasts.
21
3.2 News Aggregators

Refinery29 This AM
32

Super simple morning briefing app from Refinery 29.
Pros: Only one function: Tapping through the eight curated headlines/cards. Modern
appearance.
Cons: Maybe too simple, no engaging images.

News 360
33

Highly customizable news aggregator with variety of sources.
Pros: A flexible and smart personalization system that learns the user’s interests.
Cons: Unintuitive navigation, clumsy user interface and cheap look & feel.

Google News
34

Google’s news app that aggregates coverage from 75,000 publications.
Pros: Short story intros on the news feed, simple user interface, location-based news
filtering, bookmarking interests.
Cons: Sterile and boring, corporate look. Lacking personality and engagement.

Apple News
35

Sophisticated news aggregator app loaded with variety of features.
Pros: Great user interface, customizable My news feed / home screen, reaction buttons.
Cons: Busy, lack of videos and other multimedia elements.

32
Refinery29 This AM, iPhone ed., v. 1.0.14 (Refinery29 Inc., 2018), accessed April 2–27, 2018.
33
News360, iPhone ed., v. 4.5.5 (News360 Inc., 2018), accessed April 2–27, 2018.
34
Google News, iPhone ed., v. 5.0.1 (Google Inc., 2018), accessed April 2–27, 2018.
35
Apple News, iPhone ed., v. 11.3.1 (Apple Inc., 2018), accessed April 2–27, 2018.
22
Yahoo Newsroom
36

Fresh and modern news platform including commenting and other social features.
Pros: Modern look & feel, engaging animations and daily video series, good use of Snap
story format, good selection of topics.
Cons: Lots of carousels, complicated/unintuitive user interface.

Flipboard
37

One of the best-known news aggregator pioneers, it offers highly customizable platform
for a personalized news-reading experience.
Pros: Fully customizable, intelligent platform, personal and modern look and feel, full-
screen layout, following topics, engaging animations, reaction buttons.
Cons: Personalization is laborious, story promos redirect readers to third party sites.

Aol.
38

A robust app that combines aggregated news feeds, videos and an email service.
Pros: Convenient horizontal swipe navigation between sections, weather forecasts.
Cons: Confusing experience, too many features on one app.

Compass News
39

Curates the most important stories from globally respected publishers.
Pros: Need to know headlines (briefings), time-saving article summaries, “Story so far”
context cards, no ads, read time feature.

36
Newsroom, iPhone ed., v. 9.8.0 (Yahoo! Inc., 2018), accessed April 2–27, 2018.
37
Flipboard, iPhone ed., v. 4.2.7 (Flipboard Inc., 2018), accessed April 2–27, 2018.
38
Aol., iPhone ed., v. 5.3.7 (AOL Inc., 2018), accessed April 2–27, 2018.
39
Compass News, iPhone ed., v. 4.3.3 (Sonder News Ltd., 2018), accessed April 2–27, 2018.
23
Cons: The stories open in a web browser! So, readers need to toggle between the Compass
News app and the web browser app — an unbearable feature.

Figure 7. Competitive Research. Apple News & Yahoo Newsroom.

Apple News Yahoo Newsroom
Left : Apple News is a news aggregator that uses algorithms and AI for
learning user’s taste and preferences. For You is the main news feed that
shows stories on the selected topics. Spotlight is a featured section.
Right: The app is highly customizable. Users can select news outlets and
topics to follow and teach the app by liking or disliking stories.
Left : Newsroom takes a good advantage of the Snapchat’s full screen
story format. User can tap through the animated slides and/or enter the
written piece by swiping down. The overall look&feel of the app is great.
Right: Users can start following topics, presonalize notifications and
customize the news feed on the Profile screen.
24

Figure 8. Competitive Research. Flipboard & Compass News.

Flipboard Compass News
Left : Flipboard is the pioneer of customizable news aggregator apps. It has
a very personal full screen layout concept and elegant look and feel.
Right: Users can follow topics and collect favourite stories into magazines.
The app has also a social aspect: users can share content and reading lists
with friends and within the Flipboard community.
Left : Compass News focuses on short updates and effective reading
experience. It curates the most important news pieces under the Today’s
Headlines briefings.
Right: Compass News provides readers with Time-saving article
summaries and “Story so far” context cards.
25
3.3 Features Comparison

Figure 9. Features Comparison.
* The heuristic evaluation (scale from 1 to 5) is based on my personal user experience.
I’ve used the products for several months and tried to focus purely on usability,
functionalities, look, and feel of the products – not on journalistic content.

3.4 News Organizations’ Problems

Printed newspapers were profitable products for a century. Product development was
subtle and was mainly redesigning the visual appearance and content production. There
26
were not a lot of digital aspects in the process. As customers developed new needs in the
digital age, newspapers needed to expand their digital services rapidly. However, many
newspaper companies have been reluctant to invest heavily in digital product
development and hiring people who have expertise in building successful digital
products
40
.

For many publishers, the digital transition means transferring the old newspaper product
to digital platforms. Newspaper companies don’t have adequate resources or tech
expertise to create modern applications, and they are still trying to shove an antiquated
production process through their digital products
41
. App development is expensive and
especially small newspapers lacking mobile product development skills and vision have a
hard time transforming their core business to digital. In many cases, traditional media
news production models and story formats are just outdated.

Text and still images have been the bread and butter of the newspapers for almost a
century. The problem is that the traditional article format, which publishers are trying to
move to mobile devices as such, doesn’t work well in modern context. Newsrooms have
been lacking expertise and determination to push new story formats and technologies
forward
42
. The few multimedia packages that are published time to time easily get lost
when the bulk of stories push them down on the news feed.

40
Frank Arthofer, Niki Aryana, Anna Green, Alannah Sheerin and Neal Zuckerman, “The New News on Print Media Transformation,” BCG,
The News on Print Media Transformation, June 8, 2016, https://www.bcg.com/en-us/publications/2016/media-entertainment-
transformation-new-news-on-print-media-transformation.aspx.
41
Tess Saperstein, “The Future of Print: Newspapers Struggle to Survive in the Age of Technology,” Harvard Political Review, December 6,
2014, http://harvardpolitics.com/covers/future-print-newspapers-struggle-survive-age-technology.
42
Jack Shafer, “What If the Newspaper Industry Made a Colossal Mistake?,” Politico Magazine, October 17, 2016,
https://www.politico.com/magazine/story/2016/10/newspapers-digital-first-214363.
27
Social media platforms such as Snapchat, Instagram and Facebook are providing the
users with modern tools to create visually driven, interactive stories with engaging motion
graphics. Nowadays, anyone can be a publisher and the tools provided are advanced and
easy to use. That makes traditional media companies look even more outdated.

Readers are reluctant to pay for legacy media outlets because people have become used
to getting news for free on engaging social platforms
43,44
. The average daily news coverage
(about the topics that every news outlet cover) have very little value. Moreover, news
outlets have a hard time explaining to the readers why they should pay for digital
subscriptions. On the other hand, tech giants such as Facebook, Google, and Twitter, have
created engaging digital platforms and an ecosystem that serves them but makes it
difficult for news publishers to make money
45
.

3.5 Competitor Analysis Brief

Legacy media news outlets lack many of the cool features that news aggregators possess.
In many cases, news aggregators and social media platforms outperform the legacy media
news services in terms of usability, personalization and engagement. Legacy media outlet
feeds feel monotonous, dull, and heavy because storytelling formats (texts and still
images), information architectures (traditional sections), publishing strategies
(everything to everybody), and functionalities are based on the old media companies’
structures and production models.

43
“Who does not pay for news,” American Press Institute, February 5, 2017,
https://www.americanpressinstitute.org/publications/reports/survey-research/not-pay-news.
44
Richard Fletcher, Digital News Report 2017. Paying for News, Reuters Institute (2017): 34–39,
https://reutersinstitute.politics.ox.ac.uk/sites/default/files/Digital%20News%20Report%202017%20web_0.pdf.
45
Rick Edmonds, “A look at Facebook's billion dollar 2016 hit on the news ecosystem,” Poynter, November 30, 2016,
https://www.poynter.org/news/look-facebooks-billion-dollar-2016-hit-news-ecosystem.
28
Opportunity: Legacy media outlets are great content producers and there is a huge
demand for reliable, transparent, and unbiased reporting
46
. Consequently, there is
evidence that people are willing to pay for quality online news and support journalists’
work if the content is compelling and the product is clear and easy to use and delivered in
convenient, customizable, and clean format
47
.

Recommendation: Legacy media outlets should not exhaust their readers with all the
stories they publish. Instead, they should take advantage of data analysis and artificial
intelligence (AI) to learn from the readers’ preferences and get the news feed smarter and
more tailored to readers’ unique tastes. News outlets should also focus on concise, to-the-
point storytelling and provide summaries and briefings for hasty readers – plus an option
to listen to the news.

One of my key findings is that news organizations have a unique opportunity to give
context to news stories and make news events and developing stories easy to follow. That
said, news outlets should take advantage of their archives, curate their stories better and
create compelling theme packages. That is a value proposition that news aggregators are
not able to give.

46
Nic Newman, Digital News Report 2017. Executive Summary and Key Findings, Reuters Institute (2017): 19–22,
https://reutersinstitute.politics.ox.ac.uk/sites/default/files/Digital%20News%20Report%202017%20web_0.pdf.
47
Shan Wang, “What makes people willing to pay for news online? Quality content; a clean, convenient reading experience,” NiemanLab,
September 15, 2017, http://www.niemanlab.org/2017/09/what-makes-people-willing-to-pay-for-news-online-quality-content-a-clean-
convenient-reading-experience.
29
4.0 VALUE INNOVATION

To mitigate my target audience’s pain points, I will design a news application that
provides users with a 1) personal, 2) engaging, 3) efficient and 4) contextualized news
reading experience.

4.1 Personal News

News outlets tend to throw all the stories on readers’ news feeds regardless of whether
they resonate with them or not (one size fits all model). According to my research, news
feeds should be tailored and filtered so that the news coverage and topics would feel more
exciting and engaging. Personalization is popular among news aggregators but for some
reason most news outlets seem to believe that they know what users want better than the
users themselves.

My news app will learn users’ interests based on the topics and issues they follow and like
(or dislike). It then finds the best stories for them.

Key features / users can...
• Follow curated topics, personalize feeds and make their favorite topics stand out.
• Follow developing news events (Live stories) and get notifications on updates.
• Like and dislike stories and “teach” the AI to give them better story
recommendations.
• Customize push notifications and newsletter subscriptions.
• Save stories for later.
30
In order to make this happen, news organizations need to...
• Redesign information architecture and enhance the use of meta data for curating
intelligent story streams and news packages.
• Take advantage of artificial intelligence and machine learning to understand user’s
individual taste and preferences better.
• Replace traditional, static news sections with dynamic story containers (topics) that
adapt to trends and current news events.

4.2 Engaging News

News outlets publish mostly static, text-based articles. To engage audiences on mobile
devices, publishers need to utilize interactive elements, motion graphics and videos in
storytelling. Multimedia stories should stand out and not get lost in monotonous news
feeds.

Key features / users can...
• Experience news in delightful snap story formats (optimized for vertical mobile
screens).
• Enjoy intuitive, functional and clear design and a superb reading experience.
• Enjoy long-form journalism and great feature pieces on the Featured section.
• Listen to the stories if they can’t read at the moment (e.g. while driving a car).

In order to make this happen, news organizations need to...
• Experiment new story formats that utilize advanced multimedia storytelling
techniques.
31
• Systematically produce engaging story types on their own platforms (not only on
social media sites).
• Focus on contents and experiences that customers consider interesting and valuable.
• Invest in world-class UX and UI design, accessibility and get rid of all elements that
disturb reading experience (flashing ads, pop-ups, etc.).

4.3 Efficient News

Users need to be able to find the most interesting stories easily and digest them quickly. I
want to improve the skimming experience and increase the contrast between brief news
stories and long feature pieces. In addition, I will take advantage of artificial intelligence
to get rid of repetition on evolving news stories.

Key features / users can...
• Read bullet-pointed summaries of stories and get essential information quickly.
• Stay efficiently updated on evolving news topics by following intelligent live stories.
• Receive personalized news briefings (AM and PM) and stay informed conveniently.
• Get most of the stories in a concise and visual format and/or in audio format.

In order to make this happen, news organizations need to...
• Learn new kind of live reporting style in order to break stories in small pieces and
publish intelligent, evolving news stories.
• Construct the stories so that the readers, who jump to the story several hours after
the news even has started, can receive the key information to understand the story.
• Start producing optimized news briefings taking advantage of machine learning.
32
• Deeply understand that people take in information much faster in visual format than
in text paragraphs. And sometimes users' eyes are busy but ears available.

4.4 Contextualized News

Users need to be able to easily evaluate news value and the scale of the story. In addition,
readers should have an easy access to the whole story stream to see the context of the
article and to better understand how the history of a story unfolded.

Key features / users can...
• Explore curated story streams and see stories in a broader context (visualized
timeline that reveals the big picture).
• Get clear visual clues that indicate the newsworthiness, genre and scale of the story.
• Get an easy access to relevant related articles: backgrounds, analysis, opinions etc.
(360 approach).

In order to make this happen, news organizations need to...
• Invest in clear information architecture and systematic news packaging, and
curation instead of just publishing spot stories and letting simple algorithms add
some (often random) related stories on the bottom of the story page.
• Aggregate news contents into coherent theme entities and story streams / clusters.
• Develop a design system that intuitively indicates the story type, genre, size, length,
reading time, scale etc.

33
4.5 Context Scenario and User Stories

Goal-Directed Context Scenario
While standing in a line at a Starbucks in the morning, Daniel checks out the notifications
on his smartphone to see what’s going on. He spots an interesting news story, taps it and
reads the article on the yxz news app. Daniel explores the story stream and finds further
reading: Videos, infographics and in-depth news explainers. Since he is in a hurry, Daniel
bookmarks a background story for later reading. He also taps the “Follow” button to stay
informed about the latest updates of the evolving story. On his way to the office, Daniel
skims through headlines and short summaries on his personal news feed. Since he is
walking, Daniel decides to listen to the audio version of the morning news briefing.

User Stories
“As a busy office worker, I want to get the most important daily news in an efficient and
curated format so that I could stay updated and informed with minimum effort.”

“As a news geek, I want to personalize my news feed so that the most interesting news will
find me, and I can be sure that I won't miss any major piece regarding my interests.”

“As a curious and inquiring person, I want to see stories in context so that I can learn and
understand backgrounds and the big picture of the news entity.”

“As an active person, I want to have an option to use voice interactions and listen to the
stories if my eyes and hands are busy.”

34
5.0 INFORMATION ARCHITECTURE

Figure 10: Information Architecture: All stories, Topics, Story Steams, Stories.
Meta data stored on every story is the core of the application’s information architecture.
Intelligent use of meta information allows smart packaging and organizing content into
coherent topic feeds and story streams.

Figure 11: Information Architecture: Stories and story containers.
35
News organizations could create new products and services by taking advantage of
well-organized meta data. Coherent story streams and themed news packages would
provide the readers with great value revealing the big picture and making sense of the
world.

5.1 Site Map

Figure 12. Site map and the primary user flow (marked with blue color).

36
6.0 WIREFRAMES

Use Case: User enters the application by clicking the app icon on a mobile device and 1)
browses the My News feed, 2) finds a compelling story and opens it, 3) skims through a
few different stories and related stories, 4) explores the story in context on the story
stream screen, 5) likes, shares and saves stories and ultimately 6) feels updated, inspired
and delighted.

Figure 13. Wireframes of the main feeds: News, Topics, Features, Briefings, Saved.
37
6.1 User Flow

Figure 14. Primary user flow and wireframes of the main screens.
38
6.2 Functional Specifications

Figure 15. Home Screen. Wireframes and functional specifications.
39

Figure 16. Trending Topics. Wireframes and functional specifications.
40

Figure 17. Featured Stories. Wireframes and functional specifications.
41

Figure 18. Catch up / News Briefings. Wireframes and functional specifications.
42

Figure 19. Topic. Wireframes and functional specifications.
43

Figure 20. Story. Wireframes and functional specifications.
44

Figure 21. Story map / Story Stream. Wireframes and functional specifications.
45
7.0 VISUAL DESIGN GUIDELINES

The visual appearance of a news app should be aligned with the values and brand
attributes of the news outlet. The look and feel should be clear and reflect trustworthiness
and integrity. A consistent use of typography and colors will give an impression of an
upright professional.

7.1 Typography

I decided to pick an elegant Lyon as a serif font and geometrical TT Commons as a sans-
serif font into my type kit. Modern TT Commons is used on news headlines, captions,
vignettes, charts and index texts. Sophisticated Lyon is used on vignettes, feature
headlines and body text. Strong weight and size contrasts communicate hierarchies and
structures of content and compositions.

Figure 22. Typographic guidelines: Serifs (Lyon) and Sans Serfs (TT Commons).
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!?,.;’@#$%&*()-–“”
LYON DISPLAY BLACK
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!?,.;’@#$%&*()-–“”
TT COMMONS BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!?,.;’@#$%&*()-–“”
LYON TEXT REGULAR TT COMMONS REGULAR
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!?,.;’@#$%&*()-–“”
Vignette 01
LYON DISPLAY 24/28 PX
VIGNETTE 02 TT COMMONS 13/13 PX
Body text LYON TEXT 18/28 PX
Headline 01
TT COMMONS 31/31 PX
Headline 02
TT COMMONS 25/26 PX
Headline 03
TT COMMONS 19/19 PX Captions TT COMMONS 18/20 PX
Visual Design Guidelines
46
7.2 Color Palette

In the Western culture, color blue symbolizes trust, security, stability and
trustworthiness. Hence, a blue color palette is fitting for a news application. Red and
pastel green accent colors provide good contrast and warmth to layouts. Fresh gray works
well on backgrounds and an abundant use of clean white gives a calm, clean and fresh
appearance.

Figure 23. Primary colors, grayscales, accent colors and gradients.
47
8.0 PROTOTYPE

I designed the wireframes and mockups using Sketch and Adobe Illustrator. I
synchronized the Sketch artboards with InVision using the Craft plug-in and built a
clickable prototype on the InVision web application. The workflow was easy and
straightforward, but the demo lacked several UI features (e.g. animations and navigation
clues) since there are many constraints in the InVision prototyping tool.

8.1 Prototype Demo Script

Home screen: User taps the story promos on the main news feed, navigates through a
couple of stories and opens a Story Stream modal by tapping the timeline icon on an
action bar of a story.

Story Stream: User explores content on a timeline, explores related streams and taps a
headline that takes him/her to another news story of the same story stream.

Related story: User finds his/her way back to the news feed, taps the Explore link on
the tab bar and ends up on the Trending Topics.

Trending Topics: User decides to follow a couple of interesting topics. After that he/she
taps on a topic promo and it takes him/her to a topic feed.

Topic: User browses headlines, navigates back and forth between stories, find his/her
way back to the news feed and eventually opens a Live story.

48
Live story: User decides to start following the story. He/she explores the article by
expanding the updates and checking out the Story Stream. Eventually he/she taps back
to the main news feed and decides to proceed to the morning briefing by tapping the Catch
up icon on the navigation bar.

Catch up: User skims through the main headlines, taps the audio button and starts
listening to the morning briefing. He/she puts the phone into his/her pocket and starts
his/her commute to work while listening to the news on his/her headphones.

8.2 Mockups & Demo Screens

Link to the prototype: https://invis.io/4VGRHD8HYMQ#/289513228_News

Figure 24. Mockups: My News feed (home) and Story screens.
The first part of the InVision demo will introduce the main news feed, some basic news
stories and a full screen story format. Users should be able to browse the news feed and
navigate back and forth between stories.
1.0 Home (first screen) 1.0 Home (promos) 2.0 Story (basic) 2.0 Story (full-screen)
Mockups / Prototype Screens
49

Figure 25. Mockups: Story and Story Streams.
The second part of the InVision demo will introduce related articles and the Story
Stream concept. Users should be able to open related articles and explore Story Streams.

Figure 26. Mockups: Trending Topics and Topics feed.
The third part of the InVision demo will introduce the Topics concept. Users should be
able to start following topics and explore stories on topic feeds.
2.0 Story (related) 2.1a Story Stream (timeline) 2.1b Story Stream (legend) 2.1c Story Stream (related)
Mockups / Prototype Screens
1.1 Menu 1.2 Trending Topics 1.2 Trending Topics 1.6 Topics feed (first screen)
Mockups / Prototype Screens
50

Figure 27. Mockups: Live Story and Story Streams.
The fourth part of the InVision demo will introduce Live stories. Users should be able to
understand the concept and read and start following live stories.

Figure 28. Mockups: Catch up / News Briefings.
The fifth and last part of the InVision demo will introduce news briefings. Users should
be able to navigate through the deck and stories.
1.0 Home (Breaking News) 2.0 Story (Live) 2.0 Story (Live updates) 2.1a Story Stream (timeline)
Mockups / Prototype Screens
1.4 Catch up (first screen) 1.4 Catch up (story card) 2.0 Story 1.4 Catch up (last screen)
Mockups / Prototype Screens
51
9.0 USER TESTS

I conducted seven
48
user tests using the Validately online software
49
. The testers needed
to complete five tasks and answer several follow up questions about their experience and
usability. Sessions were screened with audio recordings.

9.1. Research Plan

Goals and Assumptions
I want to find out if users will get the key concepts of my product and validate my value
proposition: 1) Story Streams / contextualized story packages, 2) Live articles / atomized
smart articles and 3) Catch up / morning and afternoon briefings.

The most important things that every user must be able to accomplish on the
site:
• Users will be able to browse the news feed and navigate back and forth between
stories.
• Users will be able to open related articles and explore Story Streams.
• Users will be able to find articles under a specific topic and start following topics.
• Users will be able to read and start following live stories.
• Users will be able to read through daily news briefings.

48
User tests and interviews with Anna Bobadilla-Marino, Peggy Bustamante, Nazli Ghassemi, Divya Jagadeesh, Laura Kangasluoma,
Benedek Mohay and Rachel Symons, Los Angeles, April 9–15, 2018.
49
https://validately.com
52
Primary persona
• Employed, age 25–40, resides in Los Angeles Metropolitan Area.
• Tech savvy, use their mobile devices daily for consuming news, and willing to pay for
digital news services.

Recruiting plan
I conducted the user tests at the University of Southern California's campus and at coffee
shops in Downtown Santa Monica and Downtown Los Angeles. Most of the test takers
used my laptop because I wanted to make sure that there won’t be any technical
constraints. I provided the users with Starbucks coffee shop gift cards as a compensation
for their help.

Screener questions
• What is your age and where do you live? (must be 25–40 and live in L.A.)
• How often do you read news online? (must read at least once a week)
• What do you do for a living? (must be employed)

Establishing questions
• Where and when do you usually read news on your mobile phone?
• What existing news apps or products do you currently use?
• How did you come to choose those apps or products?
• What kind of difficulties do you face when reading news on your mobile phone?

53
Use Cases and Task Scenarios
Completing the tasks and answering the questions will take approximately 20 minutes.
Task 1. You are having a break at work and you want to know what’s in the news. Explore
the top stories on the news feed and open at least three stories and skim them through.
Task 2. Imagine you’re feeling baffled about the ongoing trade war between U.S. and
Russia. Skim through the news story about the sanctions against Russia and open the
Story Stream to see the context of the story. Open a related article.

Task 3. Open a tab that allows you to explore the trending topics, explore the trending
topics feed and start following the US Gun Control topic. Browse the US Gun Control news
feed and open any story.

Task 4. Imagine you’re passionate about the gun control debate and want to know
everything about it. Explore the updates on the live story on the March for Our Lives and
expand some of the updates. start following Live story.

Task 5. You have a brief moment to get news updates in the morning. Open the daily
news briefing and browse it through.

User test highlights reel video on YouTube: https://youtu.be/VBuxxpRubeE

54
9.2 Results and Findings: Task 1 – News Feed

Figure 29. Results: Exploring news feed and navigating between stories.

Feedback
• I like the short, snappy way the “updates” section is laid out.
• Everything looks absolutely beautiful!
• I didn’t understand how to close the articles that I had opened (hard to find back
button).
• I would’ve preferred the back button to be at the top of the screen.
• I would like to open up multiple stories simultaneously.
• I didn’t notice the icon that indicated that the homeless story was a slideshow.
• It took a bit to figure out my options and how to navigate.

Action: Moving the back button to the top left corner or making it more prominent.

55
9.3 Results and Findings: Task 2 – Story Streams

Figure 30. Results: Exploring Story Streams and opening related articles.

Feedback:
• I like that you can get to the related info in multiple ways.
• I wish I would have noticed the zigzag icon sooner. That’s one of the best features.
• There’s just a little confusion with similar font sizes. At first, I clicked on the bulleted
summaries at the top thinking those were links to related stories (since they were
bold).
• I’m used to having a “back” button that easily takes me back to where I came from. I
didn’t find such a button.
• I was just a little unsure of your app’s jargon.

Action: Story Stream was the most popular feature in the demo. Therefore, I decided to
improve the concept by making it more intuitive and prominent.

56
9.4 Results and Findings: Task 3 – Topics

Figure 31. Results: Exploring Trending Topics and following topics.

Feedback:
• It was intuitive to use the “Explore” icon and also the hamburger menu is an intuitive
pulldown. It felt natural to click on it when I was asked to look for something.
• I wanted it to just follow or unfollow without having something pop up.
• The word “explore” is not compelling enough. I would rather choose “Top” or
“Trending”, or “Most popular”.
• Couldn’t find the “trending topics” because it was under a star with the word
“explore” not “trending topics”.

Action: I clarified the concept of Topics and improved the navigation.

57
9.5 Results and Findings: Task 4 – Live Stories

Figure 32. Results: Exploring and following Live stories.

Feedback:
• I like the summary and the updates, it is easy to figure out how it works.
• I was not sure if by following the story I will be following the updates. I liked the
concept.
• I got confused about what was an update and what was not.
• Following the live updates didn’t seem intuitive. They weren’t blinking, like it’s
happening now. If it had come from twitter, I would not have known that it’s a live.
• I didn’t quite understand what the difference between the Updates and the articles
with thumbnail photos underneath them was. And also, what was being updated?
• It took time to realize that the live article I needed to click on was right in front of me.

Action: I redesigned the Live article making it more distinct and making clear what to
click and how to navigate.
58
9.6 Results and Findings: Task 5 – News Briefings

Figure 33. Results: Browsing through the Morning briefing and opening stories.

Feedback:
• It reminds me of Snapchat or Instagram stories so the clicking and reading felt
natural.
• I didn’t know to swipe between headlines.
• Swiping horizontally would be more obvious for me.
• I want to save the stories for later. There was no way to do it.
• I didn’t know how to keep going through my briefing. I only saw the first article.
• I found the briefing under “Catch up” because I guessed, not because I was intuitively
guided to it. Once I found it, I wasn’t sure how to get to the actual briefings. And once on
the briefings, I had a hard time figuring out how to get to the next.

Action: I improved the navigation and added cues where to proceed. Furthermore, I
added the Save for later buttons on each screen.
59
9.7 Results and Findings: Follow up Questions

Figure 34. Results: Follow up Questions.

What were the top two things you like about this experience?
• The timeline and the Story Stream are great ways to contextualize information.
• The daily briefing and the Story Stream.
• I liked how simple the design was: I could read and see everything clearly and it was
a very friendly user experience. I also liked the Story Stream.
• The top 10 short stories to swipe through. And the concept of the live stories.
• I liked following a story to get updates. Not too many options to choose from.
• Group of information (story streams, morning briefings).
• The app is beautiful and captivating. The Daily Feed is a great idea.

What were the top two things you did not like about this experience?
• Hard to get back to the previous screen.
60
• The Live story needs color coding to stand out. All the names should match up.
• The Story Stream should better stand out. I had issues with understanding the
Updates on the topics I was following.
• No way to open multiple tabs or save the stories for later (on the News Briefing
screens).
• I was not too comfortable using an app that can trace my interests.
• Font sizing and weight left me confused as to what was a story link and just a bullet
point. Navigating to the various new features was unclear.
• It was hard to navigate and find some things. Some things just didn’t feel intuitive.

61
10. ITERATION

I decided to focus on the concepts that the users liked most (Story Streams, News
Briefings and Live Stories), improve the prototype and run another round of user tests.

10.1 Concepts

Story Streams: Users found the concept pretty intuitive and clear. However, for some
test takers the visual presentation was pretty vague – even though they saw the legend. I
also had a hard time demonstrating the idea of a zoomable “story universe” on the
InVision prototype. Therefore, I decided to start building an interactive demo using the
Justinmind prototyping software.

News Briefings: Although the users liked the concept of News Briefings a lot, the
navigation was unintuitive, and the audio functions were difficult to grasp. Some of the
users suggested that the Briefings section should be in a more conspicuous location.

Live Stories: Likewise, the concept of Live Stories was hard to demonstrate on the
InVision prototype. Therefore, I decided to use the Justinmind prototyping tool to better
demonstrate the dynamic nature of live stories in the future.

10.2 Prototype

Icons and labels: Some of the page titles, navigation bar labels and links needed
clarification. For example, the users felt that “Explore” and “Catch Up” on the navigation
bar were a bit ambiguous. Users also had difficulties to understand how the Follow button
62
works on the topic listing screen. Moreover, I realized that the alerts and instructions
would need some rephrasing. Also, I needed to make the tab bar icons stand out better.

Navigation: Users had a hard time navigating between stories. Clumsy InVision
prototyping environment caused some of the problems, but the user test revealed that
navigating deeper into the story line and coming back was especially difficult. Therefore,
I improved the navigation system and designed a Story Switcher function to help keeping
track of the browsing history.

Typography: I adjusted font sizes and typographic contrasts to make the hierarchies
more intuitive. In addition, I improved legibility of stories, as well as the story
promotions.

Redesigned prototype screens:

Figure 35. Home screen before and after.
1.0 Home (Live promo)
BEFORE
1.0 Home (Live promo)
AFTER
1.0 Home (Topics)
BEFORE
1.0 Home (Topics)
AFTER
63
Figure 35, left: I redesigned the navigation bar, changing some icons and label names and
moving the Briefings button to the center. I also made the Live story promo stand out
more. Right: I changed the color of the expand button, moved the show all button to the
end of the topic block and added an option to remove topics from the 'My News' feed.

Figure 36. Story screen before and after.

Figure 36, left: I redesigned the Story Stream icon and re-organized the action bar. Right:
I added a 'More actions' icon and a versatile action menu, which includes a listening
feature and a 'Copy link' option. Lastly, I added convenient sharing options.

2.0 Story (basic) 2.0 Story (basic) 2.0 Story (more actions) 2.0 Story (sharing)
BEFORE AFTER AFTER AFTER
64

Figure 37. Story Stream before and after.

Figure 37, left: I designed an alternative, horizontal version of the Story Stream screen. I
wanted to add photos to make the feed more compelling. Right: I added a slight gradient
color to the Related Streams feed.

2.1b Story Stream (related) 2.1b Story Stream (related) 2.1a Story Stream (timeline) 2.1a Story Stream (timeline)
BEFORE AFTER BEFORE AFTER
65

Figure 38. Trending Topics before and after.

Figure 38, left: I changed the text of the Follow button and replaced a star icon with a plus
icon. Right: I also replaced the star icons with plus icons on the small topic promos.

1.2 Trending Topics 1.2 Trending Topics 1.2 Trending Topics 1.2 Trending Topics
BEFORE AFTER BEFORE AFTER
66

Figure 39. Live Story before and after.

Figure 39, left: I redesigned the front screen of the Live story to better indicate the
breaking news nature of the story and to be more consistent with the story promo. Right:
I changed the titles and labels to be more consistent. I also added an audio player to the
prototype to better demonstrate the listening feature.
2.0 Story (Live) 2.0 Story (Live) 1.4 Catch up (first screen) 1.4 Catch up (first screen)
BEFORE AFTER BEFORE AFTER
67

Figure 40. News Briefing before and after.

Figure 40, left: I changed the font of the story summary to TT Commons Regular. I also
added a save for later button and an arrow icon to indicate swiping direction. Right: I
added a delightful illustration to the last screen of the briefing.

Link to the prototype: https://invis.io/4VGRHD8HYMQ#/289513228_News

10.3 Revised Research Plan

I clarified the phrasing of my questions and tried to be consistent on terms and labels. I
want to avoid a scenario in which the users will only be seeking keywords from my user
interface and mechanically tapping through the tasks. Therefore, as Steve Krug suggested
1.4 Catch up (last screen) 1.4 Catch up (last screen) 1.4 Catch up (story card) 1.4 Catch up (story card)
BEFORE AFTER BEFORE AFTER
68
in his famous book Don't Make me Think
50
, I added one task to the beginning that asks
users to freely explore the app for three minutes and find as many new screens as possible.
During the task, users would get a sense of the contents and functionalities. Additionally,
following task instructions became easier to understand.

Revised Use Cases and Task Scenarios

Task 1. Spend 3–5 minutes exploring the app and getting familiar with the content and
user interface. Try to access as many screens as possible.

Task 2. Imagine you’re feeling baffled about the ongoing trade war between U.S. and
Russia. Find stories about the topic and try to get information about backgrounds and
what has happened so far in the story line.

Task 3. Try to find a feed that lists trending story topics. Start following the US Gun
Control topic and try to find stories related to the theme.

Task 4. Imagine you’re passionate about the gun control debate and want to know
everything about it. Find a Live story on March for Our Lives demonstrations, explore the
updates and related articles and start following the story.

Task 5. You have a brief moment to get news updates in the morning. Find a daily news
briefing and skim it through.

50
Steve Krug, Don't Make Me Think, Revisited. A Common Sense Approach to Web Usability, New Riders, 2014.
69
11. CONCLUSION AND NEXT STEPS

I managed to validate the provisional personas, customer problem hypothesis and the
value proposition. I also succeeded in designing a prototype that mostly pleased the
testers. The concepts of Story Streams, audible News Briefings and smart Live Stories are
the most potent, and unique ideas in my experiment. Therefore, I should narrow down
the project and only focus on these features when building a minimum viable product
(MVP).

Figure 41. The current phase of the project and a plan for the future.
Developing the
product idea in a
build–measure–learn
feedback loop
Thesis phase
Build Learn
Data Product
Ideas
Measure
Building the MVP in
a build–measure–learn
feedback loop
Customer problem
hypothesis
and customer
discovery:
Creating primary
and secondary
personas.
Competitive
research and
analysis:
Studying
existing news
applications
and influencers.
Value innovation:
Creating solution
models and
designing key
experiences.
User flows
and use cases:
Designing the
information
architecture.
Design deliverables: Site map, wireframes, design guidelines, mockups
Building
a prototype
User
tests
VALIDATION VALIDATION
Pitching the product idea to potential inverstors
Findings
and iteration
70
Next steps: I will finish the next round of user tests, pitch the product idea to potential
investors, raise funds for product development, hire a team and start building the MVP
in a build–measure–learn feedback loop.

Building an actual minimum viable product requires a team of coders, designers and
information architects. Therefore, I will start pitching the product idea to potential
investors and news organizations. For this purpose, I composed a promotional highlight
reel video about my product ideas and set up an Adobe Behance portfolio site showcasing
my project.

Next-Generation News App promo video on Vimeo: https://vimeo.com/268102954

Showcase portfolio on Behance: https://www.behance.net/gallery/64697315/Next-
Generation-News-App-Stories-in-Context-USC-2018

Link to the prototype: https://invis.io/4VGRHD8HYMQ#/289513228_News

71
BIBLIOGRAPHY

Adams, Laura, Elizabeth Burkholder and Katie Hamilton. “Micro-Moments: Your Guide
to Winning the Shift to Mobile.” Think With Google, September 2015.
https://think.storage.googleapis.com/images/micromoments-guide-to-winning-
shift-to-mobile-download.pdf.
American Press Institute. “Who does not pay for news.”, February 5, 2017,
https://www.americanpressinstitute.org/publications/reports/survey-
research/not-pay-news.
Aol., AOL: News Email Weather Video. iPhone ed., v. 5.3.7. AOL Inc., 2018. Accessed
April 2–27, 2018.
Apple News, Apple News App. iPhone ed., v. 11.3.1. Apple Inc., 2018. Accessed April 2–
27, 2018.
Arthofer, Frank, Niki Aryana, Anna Green, Alannah Sheerin and Neal Zuckerman, “The
New News on Print Media Transformation.” BCG, The News on Print Media
Transformation, June 8, 2016. https://www.bcg.com/en-
us/publications/2016/media-entertainment-transformation-new-news-on-print-
media-transformation.aspx.
Axios. Axios Website. Accessed April 2–27, 2018. https://www.axios.com.
BBC News. BBC News App. iPhone ed., v. 4.9. BBC, 2018. Accessed April 2–27, 2018.
Chyi, H. Iris. “Trial and Error: U.S. Newspapers’ Digital Struggles toward Inferiority.”
Pamplona: Universidad de Navarra 2013.
https://dadun.unav.edu/bitstream/10171/42076/1/201610%20MMM%2014%20
%282013%29.pdf.
72
Compass News, Compass News App. iPhone ed., v. 4.3.3. Sonder News Ltd., 2018.
Accessed April 2–27, 2018.
Cooper, Alan, Robert Reimann, David Cronin and Christopher Noessel. About Face. The
Essentials of Interaction Design. Indianapolis: John Wiley & Sons, Inc., 2014.
4th Edition.
Cooper, Brant, and Patrick Vlaskovits. The Lean Entrepreneur. New Jersey: John Wiley
& Sons, Inc., Hoboken, 2016.
Edmonds, Rick. “A look at Facebook's billion dollar 2016 hit on the news ecosystem.”
Poynter, November 30, 2016, https://www.poynter.org/news/look-facebooks-
billion-dollar-2016-hit-news-ecosystem.
Eyal, Nir. Hooked. How to Build Habit-Forming Products. New York: Penguin Group,
2014.
Fletcher, Richard. “Digital News Report 2017. Paying for News.” Reuters Institute, 2017.
https://reutersinstitute.politics.ox.ac.uk/sites/default/
files/Digital%20News%20Report%202017%20web_0.pdf.
Flipboard, Flipboard App. iPhone ed., v. 4.2.7. Flipboard Inc., 2018. Accessed April 2–
27, 2018.
Google News. Google News App. iPhone ed., v. 5.0.1. Google Inc., 2018. Accessed April
2–27, 2018.
Gottfried, Jeffrey and Elisa Shearer. “News Use Across Social Media Platforms 2017.”
Pew Research Center, September 7, 2017. http://www.journalism.org/
2017/09/07/news-use-across-social-media-platforms-2017.

73
Grieco, Elizabeth. “More Americans are turning to multiple social media sites for news.”
Pew Research Center, November 2, 2017. http://www.pewresearch.org/fact-
tank/2017/11/02/more-americans-are-turning-to-multiple-social-media-sites-
for-news.
The Guardian. The Guardian App. iPhone ed., v. 6.1. The Guardian, 2018. Accessed
April 2–27, 2018.
Krug, Steve. Don't Make Me Think, Revisited. A Common Sense Approach to Web
Usability. New Riders, 2014.
Levy, Jaime. UX Strategy. How to Devise Innovative Digital Product that People Want.
Sebastopol: O’Reilly Media, Inc, 2015.
Lloyd, Alexis. “The Future of News Is Not an Article.” The New York Times R&D Lab,
October 20, 2015. http://nytlabs.com/blog/2015/10/20/particles.
Lynch, Dianne. “Above-and-beyond. Looking at the Future of Journalism Education.
The State of American Journalism. News faces and a new frontier.” Knight
Foundation, March 23, 2018. https://knightfoundation.org/features/je-the-
state-of-american-journalism.
Mic. Mic – News You Actually Care About. iPhone ed., v. 2.5. Mic Network Inc., 2018.
Accessed April 2–27, 2018.
Newman, Nic. “Digital News Report 2017. Executive Summary and Key Findings.”
Reuters Institute, 2017. https://reutersinstitute.politics.ox.ac.uk/
sites/default/files/Digital%20News%20Report%202017%20web_0.pdf.
News360. News360: Personalized News. iPhone ed., v. 4.5.5. News360 Inc., 2018.
Accessed April 2–27, 2018.
74
Newsroom, Yahoo! Newsroom App. iPhone ed., v. 9.8.0. Yahoo! Inc., 2018. Accessed
April 2–27, 2018.
Perea, Pablo, and Pau Giner. UX Design for Mobile. Birmingham: Packt Publishing,
2017.
Refinery29. Refinery29 This AM. iPhone ed., v. 1.0.14. Refinery29 Inc., 2018. Accessed
April 2–27, 2018.
Ries, Eric. The Lean Startup, Crown Publishing Group, New York: Crown Publishing
Group, 2011.
Saperstein, Tess. “The Future of Print: Newspapers Struggle to Survive in the Age of
Technology.” Harvard Political Review, December 6, 2014.
http://harvardpolitics.com/covers/future-print-newspapers-struggle-survive-
age-technology.
Shafer, Jack. “What If the Newspaper Industry Made a Colossal Mistake?” Politico
Magazine, October 17, 2016. https://www.politico.com/magazine/story/
2016/10/newspapers-digital-first-214363.
The Los Angeles Times. LA Times App. iPhone ed., v. 5.0.1. The Los Angeles Times,
2018. Accessed April 2–27, 2018.
The New York Times. The New York Times. iPhone ed., v. 6.7. The New York Times,
2018. Accessed April 2–27, 2018.
The Washington Post. The Washington Post App. iPhone ed., v. 1.15.7. The Washington
Post Company, 2018. Accessed April 2–27, 2018.
The Washington Post. The Washington Post Classic. iPhone ed., v. 3.17.0. The
Washington Post Company, 2018. Accessed April 2–27, 2018.
75
United States Department of Labor. “Newspaper publishers lose over half their
employment from January 2001 to September 2016.” United States Department
of Labor, Bureau of Labor Statistics, April 3, 2017.
https://www.bls.gov/opub/ted/2017/mobile/newspaper-publishers-lose-over-
half-their-employment-from-january-2001-to-september-
2016.htm?mc_cid=e73bf40429&mc_eid=e49f1168cb
USA Today. USA Today App. iPhone ed., v. 5.8.0. USA Today, 2018. Accessed April 2–
27, 2018.
Vox Media. Vox News Website. Accessed April 2–27, 2018. https://www.vox.com.
Wang, Shan. “What makes people willing to pay for news online? Quality content; a
clean, convenient reading experience.” NiemanLab, September 15, 2017.
http://www.niemanlab.org/2017/09/what-makes-people-willing-to-pay-for-
news-online-quality-content-a-clean-convenient-reading-experience.

Abstract (if available)

Abstract Traditional story production, design, and distribution of journalism no longer fit with the preferences for consumption of media. Readers’ mobile moments are short and fragmentary: People are multitasking and being frequently interrupted4. Regardless, news products and articles are mostly designed for focused readers, not for hasty skimmers who enter the sites via social media links. ❧ In many legacy media companies, news production models, story formats and news platforms are outdated and news aggregators and social media platforms outperform the legacy media news services in terms of usability, personalization, and engagement. The purpose of this project is to learn news consumers’ needs and habits, study existing news apps in the English-speaking market, and generate new ideas on how to build a next-generation multimedia news application that provides readers with a personal, engaging, efficient, and contextualized news reading experience. ❧ My vision is to challenge social media platforms, which increasing number of people are using as their primary news source, with an ambitious news application that helps legacy media companies engage with their audiences on mobile devices. Strengthening loyalty, customer satisfaction, and trust will ultimately heal the broken news ecosystem that is one of the main reasons for the financial struggles of news media. ❧ Purpose of the thesis project: • To design a prototype of a hooking and habit-forming news platform and prove that the concept would solve the target audience’s pain points regarding lack of focus, control, and context. • To create design deliverables (site maps, user journeys and use cases, wireframes, visual design guidelines, mockups, a prototype, and user test reports) required for an actual app developing project. ❧ Quantitative objectives: • To find new audiences and increase app downloads, registrations, and number of active users. • To increase customer satisfaction, loyalty, and time spent on the app per session. • To improve story-to-story recirculation and to reduce bounce rates (e.g., to make users continue reading articles after entering the site from social media).

Linked assets

University of Southern California Dissertations and Theses

Conceptually similar

PDF

Hate crime tracker: how to make local news relevant and visually engaging

PDF

Dressing Hollywood: artist behind the screen, story of Hollywood's costume shops

PDF

Voice, participation & technology in India: communication technology for development in the mobile era

PDF

Upvoting the news: breaking news aggregation, crowd collaboration, and algorithm-driven attention on reddit.com

PDF

Toward counteralgorithms: the contestation of interpretability in machine learning

Asset Metadata

Creator Urmas, Stefani Johannes (author)

Core Title The next-generation news application: Stories in context

School Annenberg School for Communication

Degree Master of Arts

Degree Program Specialized Journalism

Publication Date 07/26/2018

Defense Date 07/26/2018

Publisher University of Southern California (original), University of Southern California. Libraries (digital)

Tag Design,graphic design,innovations,journalism,mobile design,mobile development,mobile news,News,news applications,news design,OAI-PMH Harvest,ui design,usability,user experience,user interfaces,ux,ux design

Format application/pdf (imt)

Language English

Contributor Electronically uploaded by the author (provenance)

Advisor Kahn, Gabriel (committee chair), Bustamante, Peggy (committee member), Levy, Jaime (committee member)

Creator Email stefaniurmas@gmail.com,urmas@usc.edu

Permanent Link (DOI) https://doi.org/10.25549/usctheses-c89-25645

Unique identifier UC11672293

Identifier etd-UrmasStefa-6489.pdf (filename),usctheses-c89-25645 (legacy record id)

Legacy Identifier etd-UrmasStefa-6489.pdf

Dmrecord 25645

Document Type Thesis

Format application/pdf (imt)

Rights Urmas, Stefani Johannes

Type texts

Source University of Southern California (contributing entity), University of Southern California Dissertations and Theses (collection)

Access Conditions The author retains rights to his/her dissertation, thesis or other graduate work according to U.S. copyright law. Electronic access is being provided by the USC Libraries in agreement with the a...

Repository Name University of Southern California Digital Library

Repository Location USC Digital Library, University of Southern California, University Park Campus MC 2810, 3434 South Grand Avenue, 2nd Floor, Los Angeles, California 90089-2810, USA