UX/UI: Reimagining the News Experience for the Digital Age

For my final ‘UX Research and Methods’ class project, I was tasked with developing a project plan centered around a topic I was passionate about. At the time, I had a strong interest in current events and was searching for an efficient way to stay engaged and updated. This project quickly became a passion for me, driven by a personal connection to the subject.

2023. 09 ~ 2023.12

The Challenge: Finding Today's Method

Various news outlets share stories that are accessible to the general public, but today, news consumption patterns have changed. By understanding how this generation chooses to stay informed and connected, I decided to redesign the news experience to better meet their needs. My goal is to develop a solution that offers a captivating and engaging way for today’s generation to stay connected to the world around them.

User Interviews and Usability Testing

Starting off with our user research, I wanted to identify the patterns target users shared in the news consumption experience. I began by conducting in-person interviews with four people born within the digital age. These interviews provided qualitative insights into user pain points and engagement when looking for news.

Then, I gathered five additional participants to employ the think-aloud protocol. I asked them to walk me through their typical news search process and observed how they interacted with each feature. This approach allowed me to understand how they felt at each stage of their search, providing a comprehensive understanding for feature prioritizations in the final solution.

Below are some key discoveries to note:

Compare and Contrasting Competitors

For the second half of my user research, I wanted to examine existing news platforms to better understand the features needed by today’s generation. What was successful, and what needed improvement? Were there specific reasons certain features were being avoided or preferred? For this comparative analysis, I observed two direct competitors focusing on news articles (AP and Google News) and one indirect competitor focusing on trendy content (TikTok).

Persona and Journey Map

With the information gathered, I developed a persona to represent users in the digital age and illustrate the problem statement. Leah Simpson is a 22-year-old college student who keeps herself updated through social media platforms like Twitter and Instagram. This year, she is making an effort to stay informed by reading news articles from reliable sources.

The Problem Statement

At this step, I typed all my research notes and responses into one document and began organizing them into simple categories. The purpose was to eliminate any remaining assumptions and create a space where I could analyze recurring themes of frustrations, needs, suggestions, and ideas.

A little after, the problem became clear: When news is excessively negative, time-consuming, unreliable, and complicated, users tend to disengage.

Today, the people favor quick, straightforward, and visually appealing content. They desire trustworthy, unbiased information and want to stay informed on current trends without feeling overwhelmed or powerless. So, I decided to create a UI design system for a news mobile app that aligns with today’s needs.

Feature Prioritization

As I laid out the design materials, my goal was to create an experience where users felt familiar with some aspects of the system. Recognizing that constant news updates can be overwhelming, I aimed to incorporate features from social media while maintaining the serious tone of news platforms.

To focus on user needs, I identified pain points and paired them with potential solutions. Each solution was evaluated based on the effort and cost required for implementation versus its potential user impact. Using this feature prioritization chart, I designed a sitemap to serve as a blueprint when creating the wireframes.

Wireframing and Iterating

Following the sitemap guidelines, I converted the textboxes into mobile interfaces. These low-fidelity wireframes allowed me to provide users with a tangible prototype for user testing. I wanted to double-check for any areas of confusion or challenges as users navigated the design. Three of my classmates tested the mid-fidelity wireframe and provided a range of feedback, from font size adjustments to suggesting new features. These comments were kept in mind when redesigning for a high-fidelity design.

Introducing the New... News

In today's fast-paced world, the design needs to be able to follow the trends. This news app is designed to meet these needs perfectly. With a simple, yet familiar UI and a focus on delivering concise and reliable information, staying informed has never been easier or more enjoyable.

Onboarding Process

After creating a new account, the user lands on a preferences/ interest page that allows them to choose which topics they would like to see most on their feed. The personalized news feed allows them to feel heard as an individual and offers a news experience that enhances engagement. Upon choosing the topics, their algorithm will prioritize these ideas on the user’s home feed.

The ability to filter and limit news. They suggested that this feature would increase the personalization as well as create a safer space for those who need trigger warnings before viewing certain topics. As a result, I designed a filter system when creating the account to block out keywords the users would like to avoid.

Home/ News Page

The home page serves as the main hub for news updates. It provides a centralized place for users to quickly access the latest information making it convenient and time-efficient. There are four key interactions to note:

What's Trending

To meet user needs for current and popular stories, I’ve added a page that displays a chart with worldwide trending keywords. Users can save time by using the search engine or choosing a category to find specific trends. All keywords are labeled under categories for better understanding. To encourage engagement, the top 5 keywords will be highlighted with an inclining arrow icon.

Spreading the Word

In comparison to having access to the community opinion, it’s also helpful to have a space for private conversations with people you know. This page allows users to quickly discuss and share news within their social circles.

Editing Your Profile

The profile page displays the users information, preferences, settings, and customer service. It provides a way for users to track their engagement and adjust their preferences whenever they’d like to.

Refection

A Look Back on the Project

As one of my first few UX/UI project, I found myself most challenged by the continuous iterations, critical thinking, and human-centered design. As a class, we've learned about the various needs and opinions of users, as well as the importance of navigating between familiarity, clarity and creativity. This mobile app design has led me to seek for more opportunities to experiment with what could be released to allow interactions to become easier in society.