UX/UI Design / Consultancy
The Newsroom — Providing unbiased News
Overview
The Challenge
Redesign the current user flow and adding an explore page
The Client
The Newsroom
Role
UX/UI Designer / Consultancy
Duration
10 days (full-time)
About The Newsroom
The Newsroom is a Portuguese startup fighting misinformation and promoting plurality online, founded by Jenny Romano and Pedro Henriques. As a result of their self-developed explainable AI approach, they provide unbiased and trustworthy information by comparing many sources. The Newsroom aims to create an entirely original experience when engaging with information: they share 5 pieces of news per day to fight information overload and protect mental health.
Collaborating with Newsroom: Insights and Excitement at Stakeholder Meeting
First, we met with Pedro Henriques, one of the co-founders of The Newsroom. This helped us learn more about the company, the app development, and the roadmap for our collaboration. Furthermore, we exchanged existing data about user insights and discovered pain points and their style tile. It was a great kickstart for us to start the project with a lot of excitement.
Uncovering App Flaws
The first step for us was to have a deep look into the existing app and conduct a heuristics analysis to better understand the current pain points.
We found the following problems:
The usage of the category tags for the topic is not recognizable.
The function and positioning of the political bar is confusing.
It is difficult to understand how information is generated and separated.
Usage of publishers’ logos is challenging to understand which logos belong to which news publisher.
The Interest section in the personal profile section is overwhelming.
Revolutionizing Online News Consumption for the Youth
In the following stage, we looked more closely at what companies are already doing to provide a solution for young people interested in consuming news online. Our analysis of six different companies’ products revealed potential for The Newsroom, such as a section with different topics, personalization, and highlighting the sources of articles. One of the strongest selling points of The Newsroom is its political bar that displays a publisher’s left, right or center leanings.
Insights into Potential Users’ News Consumption Behavior
Aside from understanding the market and competitors, we also needed to better understand the behavior of potential users. Consequently, we surveyed 97 potential users and gathered insights into their news consumption behavior as follows:
More than 1 out 2 consume news daily.
97% of people consume news that aligns with their interests.
87% are interested in learning about different perspectives on topics.
76% want to be able to check the sources of news articles.
67% want to know which political side (left/right/center) reports on a specific topic.
61% want a customized feed regarding their interests.
Interview Insights: Understanding the Needs of Online News Consumers
The survey has provided us with valuable insights into understanding the needs of potential users. However, in order to gain a deeper understanding of their thoughts and concerns, we conducted five interviews with individuals aged between 28 to 34 years old. The participants were particularly interested in consuming news online and combating the spread of false information.
“It’s difficult to understand which source and publisher to trust.” — Viola
“For me, it is important to understand a different point of view to form an opinion on a topic.” — Miriam
“I don’t think there is any media that always tells the truth.” — Ekaterina
Say Hello to Critical Christine
By examining the app’s current issues, studying competitors, and gathering feedback through interviews and surveys, we identified the requirements, objectives, and challenges of the user persona called Critical Christine.
In order to develop a deeper understanding of her perspective, we designed a user journey map that illustrates her experience attempting to access news content in a fresh and impartial manner, which involved downloading The Newsroom application.
Ideating Ways to Transform her Challenges into Chances
Based on the user journey map and problem statement, we formulated How might we-questions (HMW) to focus on the main problems to solve.
Defining the Problem
After analyzing the results, we formulated the problem statement as follows:
Curious, but non-avid readers who want to stay informed but perceive news as biased and overwhelming, find the Newsroom’s navigation counter-intuitive or don’t immediately understand how the app solves their needs.
From Problems to Priorities
Having identified the problems to focus on, we brainstormed potential solutions and how to visualize them. With theMoSCoW Method, we prioritized them.
Flowing Through the App
We created two user flows: the main user flow for the user starting the app (top image) and reading an article and the user flow for the new explore page (bottom image).
Improving User Experience: Concept Sketches and Feedback
Our next step was to create concept sketches for the updated version and conduct concept tests.
Initially, we received feedback that the political bar and its accompanying text, presenting various perspectives, are still unclear.
Additionally, users reported confusion over the multiple pages and dedicated icons in the navigation bar.
It was their wish to be able to click on the image of an article and be taken directly to the summary.
A page displaying users’ interests and preferences should be placed as the first page, while a separate page should be devoted to global news. In this arrangement, it would be easier to understand.
Turning Confusion into Clarity
At this stage, we have encountered a challenging issue for both potential users and ourselves. There is a lot of confusion regarding the political bar in the Newsroom app, as users are not sure where the information comes from or how it is created.
The biggest reason for confusion is that the political bar and the dedicated description text “Differences” are not related to each other.
While the bar displays the political positioning of all publishers writing about a given topic, the text aims to present the different perspectives publishers take on the same topic, but without consideration of their political orientation.
As a result, there is a disconnect between the two features, which causes confusion for users and presents a challenge for us. During the mid-fi wireframes, Pedro, the co-founder, clarified exactly how that information is generated.
From Lo-fi to Mid-fi: Testing and Refining Wireframes
Once we finalized the concept, we proceeded to visualize all the features. To simplify and enhance the subsequent usability testing, we transformed our Lo-fi wireframes into Mid-fi wireframes. Following that, we tested the Mid-fi wireframes with current and prospective users and integrated modifications based on their feedback through an iterative approach.
Defining Brand Attributes for an Updated Look and Feel
We decided to retain the current logo for the updated look and feel, as the founders had received positive feedback and recognition with it. Using the existing branding as a foundation, we established the following brand characteristics.
- Color & Typography
Our aim is to follow a simple design strategy that highlights the news content itself. To make it more attractive for our target audience, comprising Millennials and Gen Z, we suggest using the logo’s colors as accents. For improved readability, we propose using Lato, a sans-serif font, instead of the current serif font employed for titles.
- Style tile
We continued working on the design of the UI design by producing significant features such as the navigation bar, article card layout, and category tags.
Testing the Contrast
As part of our accessibility testing, we verified if the colors used in The Newsroom’s logo provided sufficient contrast. The colors that passed the test were deemed acceptable, and we proceeded to use them.
Hi-fi Wireframes: A Before & After Comparison
Homepage:
We removed the political bar from the homepage.
The content on the first page is now based on the user’s interest.
A navigation bar and a “read more” button was added.
Summary:
We added the information that the generated summary was revised by a real person to increase trust.
The section “Differences” is now below the summary and creates no more confusion if it is linked to the political bar.
Sources:
We added information about how the publishers are being sorted.
The publishers are now not only displayed by their logo but also with their name. A colored border makes it easier for the user to see where in the political bar the publishers are sorted.
Filter:
The filter is now detached from the profile page and quickly accessible over a button on the home page.
The new design and the categories simplify the navigation.
Information about The Newsroom:
A new page, which is quickly accessible by a button in the header, gives the user more information about the people behind The Newsroom, how the app works, and the value proposition. By being completely transparent, trust can be build.
Hi-fi prototype
What’s next?
To develop the app even further we recommend:
Implement a new onboarding process
Perform more tests for validation.
Improve the filters by creating precise categories.
Thanks to The Newsroom, our interviewees, and my team members André Fernandes and Marie Schmidtsdorf.
