Early Word

Stay informed and connected. 

Role: UX/UI Designer

Date: January - March 2021

The Problem

During the age of news fatigue and information overload, keeping up with the news that is important to you is harder than ever. For this project, I wanted to create a more customized, organized, and accessible way to stay current on local and world news. 

DISCOVERY

PROCESS

PROCESS

Discovery (3 weeks)

Ideation (3 weeks)

Validation (2 weeks)

Competitive Analysis

Design Personas

User Stories

Wireframes

Prototype

Survey

Affinity Mapping

"How Might We" Statement

User Flows

User Testing

Testing & Iteration

User Survey

To get started, I conducted a survey for 18 people to understand their experiences consuming local news. I wanted to uncover what was most important to users when engaging with the news, so I could stay mindful of them every step of the process.​

​

Some of the more vital questions I asked during my survey were: 

​

-What do you mainly use online publication applications for? 

-What time of day and in what setting do you normally engage with this product? 

-What do you like about the application you currently use? 

-What would persuade you to use this application more? 

​

These questions helped me get to the crux of the problem and see what works in pre-existing products and where they could be improved. They also revealed to me the context of use of these applications and how best to design for the circumstances in which they are being used. 

Affinity Mapping

Based on survey results, I created an affinity map to visually categorize common themes, pain points, and successes of users' news experiences. 

During the affinity mapping process, I discovered that many users desired a more organized and clean interface. Users also favored an application that could quickly update them on the most recent breaking news. However, users seemed to be split in terms of how much social engagement they were willing to have. These discoveries helped me begin brainstorming designs that would satisfy my users' needs.

User Personas & User Stories

In order to keep my design human-centered, I developed three user personas to keep in mind while I worked on the project. These three personas consist of two extreme users and one moderate user. Designing extreme personas was incredibly helpful in ensuring my thinking encompassed a wide audience. 

​

How might we redesign the local news experience so that it is easily digestible, more legible, and allows for engagement within the community?

IDEATION

User Flow

Wireframing

VALIDATION

Throughout the prototyping process, I was constantly iterating my designs based on feedback. Due to COVID-19, I was not able to test in-person outside of my family. However, I found this to be an incredibly helpful experience. Having one older parent with low vision and another parent knowing English as a second language kept me in check for accessibility issues within my design and made me want to keep constantly improving my design to meet users' various accessibility needs.

​

The most important issues raised during user testing were as follows: 

​

First round: 

• Difficulty navigating home without back button (major flow issue) 

• Users were used to being able to scroll horizontally through articles and became confused/frustrated when this application did not function similarly. 

• Notifications for new comments on articles you have commented on. 

Second round:

• "Hidden" features (swipe for next article, tap to open reading menu) needed to be more prominently displayed and advertised. 

• Cosmetic tweaks (enlarging bookmark buttons for larger fingers, etc.) 

• Added additional features after reaching MVP. 

​

This project really brought to the surface how invaluable testing is. I was not aware of how many logic jumps I was making while designing, and rounds of user testing uncovered how best to design flows and elements that make sense to everyone. 

INTERFACE

Moodoard

In terms of the user interface, I wanted to replicate the mental model of minimalist black and white newspapers and pre-existing news applications. I gravitate towards minimalist interfaces because of their high contrast and inherent accessibility. Additionally, I wanted to allow for adjustments of the interface by the user to better fit their specific needs. 

​

For the typography, I used a combination of serif and san serif fonts. I wanted to use serif fonts for headings to continue to the newspaper look, but I wanted to use a sans-serif font as the default boy copy for easy reading. 

​

The Medium mobile application was a source of great inspiration for this project. Medium does an exceptional job of presenting pertinent information to their users in a polished interface that allows for user customization.  

​

I also turned to my beloved Dribbble to see how other designers were tackling minimalist interfaces/news feeds. 

UI Kit

Headings - Playfair Display

Body - Futura Medium

#00000

#FFFFF

#D3D2FF

#FEFFD2

Buttons

Bars

Navigation Bar

Reading Settings Bar

Icons: Material Design Icons Light

SOLUTION

I am really happy where this project took me during this time. In hindsight, I wish I went about user testing in a more standardized way to get better data. In the future, I would love to incorporate even more accessibility features. Additionally, I would love to figure out solutions to make the news less traumatizing. I recently saw this fascinating post by Theresa Slate discussing the importance of trauma-centered design, and I want to try to be cognizant of it in the future. 

​

In the meantime, please let me know what you think. Anything and everything is sincerely appreciated. :-) 

Jot

Eventure