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.
• Design new features based on customer review and user research.
• UX research
• UI UX design
• Usability Testing
• Adobe Photoshop & Illustrator
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.
• Need block sources feature
• Unwanted content
Some content is missing
• Duplicated content
• Missing content when refreshing
• Customized subscriptions
• Do not want algorithm recommendations
• Difficult to read wanted articles
• 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.
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.
Pros and Cons
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.
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.
Persona, adding features, site map, user flow
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.
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.
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.
User test, affnity map, findings and changes
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.
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.
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.
• Increasing text size and spacing
Sources/topics/local personal feeds
• Sources’ name and logo
• Following category title
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.
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.
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.
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.
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.
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.
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