thumb-final copy-min.png

Google News

Google News is a news aggregator service developed by Google. It presents a continuous flow of links to articles organized by thousands of publishers and magazines. Google News is available as an app on Android, iOS, and the Web.

​This case study is about adding more features to the existing app.

Objects

• Design new features based on customer review and user research.

Role

• UX research

• UI UX design

• Prototype

• Usability Testing

Tools

• Figma

• Adobe Photoshop & Illustrator

Year

2021

Design Approach

Design Approach.jpg

Research

Customer review research, competitors research, user research, research findings 

CUSTOMER REVIEW RESEARCH

Researching customer reviews in application stores is always a good way to find out what’s the users thinking about the product. Other than positive reviews, loyal or new customers’ negative reviews are really important to collect thoughts and insights. So I research the reviews from application stores and collect some of the relevant and useful reviews.  

customer review.jpg

Problems

Sources

• Need block sources feature
• Unwanted content
Some content is missing
• Duplicated content
• Missing content when refreshing

Personalization

• Customized subscriptions
• Do not want algorithm recommendations
• Difficult to read wanted articles

Ads

• Excessive ads pop up
• Ads affect experience when reading articles

After collecting some customer reviews from both IOS App Store and Android Play Store, I surprisingly found that there were a lot of complaints from negative user reviews are overlapped. So I believe that adding some new features is a great opportunity for Google News to grow their market or keep their existing users.

COMPETITOR RESEARCH

Numerous news apps are now available in the market, so competitors analyst is a great way to see what other businesses are doing. Traditional mediums like CNN and The Washington Post now is more focused on digital products. And as an enterprise-level App, Apple news would probably be the most directed competitor. Startups like Newsbreak and Smartnews, which focus on some personal subscriptions/feed algorithms/nearby news would be the future star in the field as well.
So I did the research and analyst for these Apps, to see how the features are manipulated in the App, what are their strengths and weaknesses. I believe that would be a powerful tool before I start redesign/add some features for Google News.

Feature Comparison

competitor analyst.jpg

Pros and Cons

Research Findings

The research of the competitors inspired me a lot in terms of features and user experience.
For traditional mediums like CNN and The Washington Post, they are focusing on unique content for users, instead of integrating news, their features and UI are cleaner. And they do include audios, fewer ads, which has better experience for users when they are browsing the news.
As an enterprise-level App, Apple News did a great job between traditional medium and emerging media. Modern and clean UI, audio, and less displaying ads would be the powerful strengths.
Some popular emerging apps like Newsbreak and Smartnews are also strong competitors in the industry. They include local news, which is really powerful especially during the pandemic time. And if you don’t like other medium’s UI, they provide no-ads and clean mode.
I believe these findings may inspire some ideas of adding more features if Google News needs to be more competitive in the market.

USER INTERVIEW & FINDINGS

I chose three interviewees for the user interview. All of them have the habit of checking daily news/breaking news/ other topics they are interested in on their mobile news app. I drafted questions about what’s their daily routine for keeping updated with the world. Obviously, mobile news apps have become one of the most popular ways of doing that. Some traditional channels like TV, newspaper, magazines, radio, etc, need to be competitive or keep their content digital in the future. Each interviewee has their own lifestyle but some of their habits or frustrations are similar when they are using the news apps like Google News, Apple news, Newsbreak, CNN, etc. After the interview, I summarized their thoughts, pain points, or even suggestions for the apps they are using. And I found their opinions gave me a lot of inspiration for adding some features.

RESEARCH FINDINGS

Interviewees

User research findings.jpg

Interview Recap

​Research Findings

What do they need?

I found there would be a lot of opportunities for a News app to improve their customers’ experience after the user interview. Also, based on the users’ feedback that I collected from the IOS app store and Andriod play store, I believe I could add one feature about the ads, which is the biggest problem. And the feature of personal feeds based on users’ subscriptions.

​Define

Persona, adding features, site map, user flow

PERSONA

After I did the user interview, I created the persona of Christina Miller, a financial analyst based in New York. She lives in one of the most fast-paced cities in the world and she needs to keep updated with the latest news every day, not only for work but for her own interesting topics.

google-news-persona.jpg

ADDING FEATURES

No-ads mode

It seems like most users’ frustration about a news app is about ads. Displaying ads, video ads, or other ads according to the algorithm, always keep bugging users’ experience.
For this feature, I would come up with a no-ads mode on the stories page. In fact, for a news app, it’s always hard to gain profit besides adding ads. So Google news may need some trade-offs between that. So in that situation, if a user wants to get rid of the ads, he/she could switch to non-ads mode, but she/he may not see the all photos/videos. The decisions are always made by the users.

Sources/topics/local personal feeds

Google news has so many sources/topics/local cities that users could follow, but users may not check the news according to their subscriptions by time.
So I believe a page that shows the specific news that users are following would be a useful feature. When a user taps the “following” in the menu bar at the bottom, she/he could browse the feeding stories by tapping the “personal feeds” card.

SITE MAP

Site map.jpg

FLOW CHART

Flow chart.jpg

IDEATE

High fidelity wireframes

HIGH-FIDELITY WIREFRAMES

After the decision of two adding features, site map, and user flows, I started designing the wireframes based on Google Material Design
For the no-ads mode, I designed the icon myself for this specific feature since Google doesn’t include that in their material icons. I chose a green color that stands for clean and no barriers, and the lines inside stand for text only. Then I designed the whole no-ads mode page, which allows users to browse text basis stories.
For the personal feeds, I added that into the “Following” page because users could manage their subscriptions here, so the functions connected well, I added that section on top of this page so users could review that as soon as they are redirected to this page. There would be four stories max on this page and if the users want to browse all their feeds, they could tap the"Personal feeds” or “View all personal feeds” button.
The personal feeds page lists all the stories that users are subscribing to, from the most lasted to the least lasted.

wireframes.jpg

TESTING

User test, affnity map, findings and changes

USER TEST

After I designed the high-fidelity wireframes, I did the user test based on the prototype. The following process shows the steps of the two adding features.
All the participants will go through the prototype and finish the following tasks:


- Read a story in the non-ads mode.
- View the user’s personal feeds in the following tab.
- View a story in personal feeds and read them in non-ads mode.

Live Demo

AFFINITY MAP

I collected the feedback from my interviewees and another participant.
I made the affinity map to summarize their pain points and suggestions towards the two adding features, also I got some compliments from the prototype of the wireframes.

affinity map.jpg

RESEARCH FINDINGS

The user test inspires me a lot in terms of the shortness of the wireframes.
For no-ads mode, text size could be improved because users will only see text on the page, so more spacing and bigger text size may not disturb the experience.
For the icon, the user may not be used to it in the first place, however, the no-ads page will reveal the title after the user redirects to the no-ads page like the full coverage page. So I may keep the design for now.
Now users could only see the cover photo/video because for a news app, displaying or other ads may be their only way to gain profit, so this is a trade-off between no-ads and no-photos, but I believe we could polish this feature and unlock more photos/videos in future.
For the personal feeds, some participants may want a sorting option, but now this feature is assumed to sort by time like Facebook or Twitter, so I may keep it as the original.
The source’s name would be shown beside the logo as the “Saved Stories” page.
A title that shows the following category is a great suggestion, because users may want to know where is the story comes from the topic, local, or source.
Now Google News doesn’t provide a “mark as read” feature, so I’ll keep the original design, I believe that would be a great idea in the future adding features.


 

CHANGES

No-ads mode

• Increasing text size and spacing

Sources/topics/local personal feeds

• Sources’ name and logo
• Following category title

PROTOTYPE

UI Design & prototype

I started working on the UI based on the feedback of my wireframe user research. The following steps show the process of how users read a story in the no-ads mode and browse their personal feeds in the "following" tab.

2.gif

Home page

In the home of Google News, users could view the content in the “For you” tab. Users could tap the story/coverage directly on this page.

Story page

When the user taps a specific story, she/he will be redirected to the story detail page. That will redirect the user to the source’s story page.

p-2.gif
p-3.gif

No-ads mode page

If the user wants to read the story in no-ads mode, she/he could tap the no-ads icon and read, but she/he could not view all photos/videos except the cover picture.
Also, the user could go back to the regular mode any time by tapping the “go back” icon.

Following page

The user could tap the “Following” icon to jump into the following page. The personal feeds are at the top of the page, and there would be at most four stories in this card. Users could tap the “Personal feeds” or “View all and manage” to jump into the personal feeds page.

p-4.gif
p-5.gif

Personal feeds page

The personal feeds page including all the sources/topics/local stories that the users are following. The stories are listed by time from most updated to least updated.

If the user taps a specific story, she/he will be redirected to the story detail page.

Product Prototype

WHAT I LEARNED

This case study is about adding new features to an existing mobile app. I believe most product designers will meet the situation during their work especially when you work for a big company like Google. I definitely learned a lot from this project.

Google Material Design

Google Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. I used the open-source components to create wireframes and UI. I also designed the user interface based on Google's color, typography, shape, etc. I believe Google Material Design is a powerful tool for designers and I found out the significance of consistency in a big company like Google.

 

The power of research

I started my research from the online customer reviews from IOS and Andriod stores, which inspired me a lot because the real users could always find the flaws of a product from their perspective. On the other hand, competitor research gave me a lot of ideas, too. The horizontal vision lets me know what are other news apps are doing, what are their pros and cons, where are the opportunities for Google news. The user interview also makes the project more concrete when I have some conversations with real users. 

The research gave me a better understanding of when a product needs to be moved forward, how I decided whether add some features or not, what are the main pain points for users, and the reasons behind that. Even though there were a lot of potential features that could be added, I could decide which ones are better to add on for broader targeting customers. 

 

Adding features on an existing app

It’s never easy to iterate the existing product, especially for some huge changes. When I was designing the new features, I noticed that as a product designer, I need to add them seamlessly and smoothly to the previous version, so I need to have a comprehensive understanding of Google news: Google material design, the architecture, the design pattern, etc. Fortunately, I could add the two features nicely into the app after the site map, user flow, and product wireframes.

Thank you for scrolling :)

More Case Studies