QIHUA YU
News Break
APP - Independent Project
2018.8 - 9
MyRole:
UI Design/UX(Research) - I led and conducted the User Interview, Competitive Analysis, User Flow, Contextual Inquiry.
Team Member:
Qihua Yu,
Icey Zhao(AirBnB)
Tools:
Sketch,
Principle, Photoshop
Case Contents
Design Overview
Design Challenge
Design Process
Design Delivery
Overview
Almost every user has trouble finding news stories that they want.
Think about this scenario: you are searching for a particular news story but fake news and ads are annoying. When you finally find the News Break app to help you find what you want, you can’t figure out how to use it, How frustrating is that!
News Break App responds to a desire which has long been requested. In 2018, we kick-started the process of redesigning the app.
I’ll share my team’s story about how to develop this app. We figured out how to turn it around to improve their enjoyable reading experience.
Solutions?
Enjoyable Reading Experience
- keeping your informed
What is the enjoyable experience?
Based on users interviews , feedback and secondary research
-
Users find the interesting topic;
-
The article shows quickly and relevant;
-
Users can interact with articles (to save, like, share and make a comment);
-
Users can keep reading other articles related to the similar topic if they want;
-
Users feel comfortable after they read for a long time.
You must have a question:
How we get there?
User Research -
We counducted a multi-methodology research to better understand user to define their enjoyble reading experience, what content they want to see, how they want to capture them.
What are the real voices of the users?
We collect the public comments data and conducted a manual categorical analysis on randomly chosen 100+ posts.
Problems
Insights
Scenario
We put user scenarios into visualized as the user flow. In this flows display, the enjoyble reading exprience should occurs once user start browsing, and reading the news.
Priority
Our design priority is based on the most frequent and common issues from our research. Obviously, all the issues are pointing to the user reading experience.
So we decided!
Personalized
Selected contents
An enjoyable reading experience!
IDEATION
We think about our product
Product Logic
We spend a week to understand the product logic.
We created this model to indicate that
How this product reacting with users.
The engineers collect all the news from massive
contents, though capture, filter, select to screen the
high-quality articles. And input to our app.
The users based on interest topics or articles to
give interactions for the app. These all the data will
be applied to machine learning techniques.
Then, the app will select the keywords based on
users interests, behavior and articles keywords to
gives user relevant articles.
Product Limitation
!
Copyright Issue:
Due to the copyright policy, the copyright holding by all the content provider (CNN news, CNBC, etc.), if any content aggregation apps does not buy/pay for the copyright holder, they must show a web view first when the user reads an article.
So! What was the reading experience back to 2015?
Ads, Ads, Ads....
Loading Too Long....
No Responsive Design
Now we face a serious question
How to show an original website with the improvement of the enjoyable reading experience?
Brainstorming
After brainstorming, we summarized in 2 different directions to improve web view reading experience:
-
Improve “Web View” experience.
-
Showing both “Quick View” and “Web View” at the same time.
01 Improve web view experience
-
Web view has lots of limitation (loading time, and uncontrollable ads).
-
Web view always has one article, no relevant topic.
-
Information distracts that causes users to feel uncomfortable.
Structure
02 Separated to Two Views
To handle the limitation that causes by the Web View, we decided to build the other view feature the "Quick View".
-
The "Quick View" feature
-
Display quickly (Less loading time).
-
Ads block
-
Provide related articles underneath.
Structure
How to introduce “Quick View” with understanding the improved reading experience?
We proposed a few solutions on “Quick View.” We hope that users can understand Quick View through a simpler design.
-
Affordance: “QuickView” should have visibility, let users know it has abetter reading experience.
-
Signifiers: Trying to use an arrow, flip, swipe up design elements, to trigger this feature.
-
Feedback: Give users quick loading feedback on “Quick View” by displaying an article quickly.
ITERATION
User Feedback
VERSION 01
• Button showing range-wide (Loading time) 0.2s - 4s
• User don’t understand red button means
• No motivation to tap the button
VERSION 02
• Visually improved
• Finger point signifiers users “Quick View” is ready.
• Mapping the structure
There are more thinking!
Even we received much positive feedback from the A/B test, data and user’s feedback...
Is this necessary for users to understand our structure?
Had we solved the problem with improvement?
Can this new design delivers an enjoyable reading experience or worse?
VERSION 03
After thinking about our design deeper, I proposed another solution:
• A user won’t need to understand the difference between “Web View”&” Quick View.”
• This design forces on “Affordance,” as users don’t need to learn but follow instructions to simplify this interaction.
• Less confusion and tried to achieve the user’s mental model.
USER FLOW
LOGIC:
-
If users scroll up, the app will show “Quick View,” user still can go to the “Web View” tap the web link.
-
If users wait for loading “Web View,” the “Quick View” will move down, the screen page will show “Web View.”
OTHER FEATURES
-
Functional features to improve the reading experience. We had this features from the previous version.
-
Add interaction, when users scroll up, this tools bar will be hidden. When users scroll down the tools bar will show up.
Measure success
15% +
DAU rose in a month
20-25
PV rose each time
Outcome:
NewsBreak successfully re-launched on App Store with no issue. Users’ could enjoy reading without distraction as ads were filtered out on every article, while all other features retained.
Based on this product. I trained my product thinking and critical thinking. I tried to stand outside the box to think about design.
As a designer, we should design a simplify and organized product for users. Bring empathy as a user to understand context. Context is very important!