News Tracker

helps you keep track of news you care about.
It works as a news aggregator with links to news websites.

*Concept project*

THE PROBLEM

To keep track of news across all news channels in one app.

Imagine you browse through the internet, you see some interesting news, and you would like to see how it unfolds in the future. However human memory is not the most reliable thing and it is easy to forget  checking the updates about the news you care about. Busy life, engaging family and work, keeping a balance, yet trying to be constantly informed is a challenging task. 

MY ROLE

I was responsible for Information Architecture
UX Design and UI Design

TYPE OF THE PROJECT

Proof of concept for a study project

TECHNOLOGY

Self learning iOS application

MY SOLUTION

Use machine learning or another AI technology to automatically track and filter the messages that are currently relevant to the user.

While browsing the internet, the user may save the article that they are interested in. Based on this, the app will filter published news.

 

Automation is the key. The News Tracker filters the news and presents only these that are relevant to the story that the user decided to follow. This is the primary goal of the app.

 

All the news strictly relevant to the user are presented in the "YOUR NEWS" section.

To keep the social aspect of the app, and to make the user more engaged, and help to discover more stories, I proposed the "FRIENDS NEWS" section


"PROPOSED NEWS" is another section where news that's selected by the app are presented which may be relevant to the user - discovery aspect.

"NEWS COLLECTIONS" is the section that helps the user to segregate and organize the news stream.

Saving news is a functionality of the app that let the user mark and saves the news for future reading. These news is stored in "SAVED NEWS" is the section.

All news is separated and categorized. Every news has a picture, title, name of the publishing site and star button

By taping on the star user saves the news.

After that, the news is possible to find in “SAVED NEWS” section

UNDERSTANDING THE USER

To better understand the user and keep the project priorities I defined the user persona.

BREAKING DOWN THE PROCESS 

The project was developed in four stages:

1st: Spotting the problem and looking for the solution.

While browsing the internet I have noticed that there are some stories that matter to us, but often we keep forgetting about checking them later. What happens next? It is easy to forget in a constantly changing world. I decided to design a simple app that will help track the news, how they unfold in the future. This way the stories that took our attention won't be forgotten anymore.

2nd: Designing the low-fi wireframes in order to consult a developer with the idea.

In order to check if my idea is possible to develop, I had to consult a software engineer. To express the idea better, I draw low-fi sketches.

 

As an inspiration source for certain solutions, I used the mobile apps of Pinterest, Facebook, Gmail, and Zalando.
 

3rd: Finding solutions in technical aspects of the project and design mid-fi wireframes, further testing of the concept.

App design before the registration or login

App design after the registration or login

4th: Designing the high-fi and clickable prototypes.

During the last stage, I designed a high-fi and clickable prototype in Figma. 

Color palette:

#DD1C1A

#005377

#0390B0

#F0C808

Typography:

(Due to technical issues I had to use font Roboto instead of San Francisco)

Headlines | Roboto Medium 24 pt | 87% #000000

Main Text | Roboto Medium 14 pt | 87% #000000

Text | Roboto Regular 14 pt | 87% #000000

SubText | Roboto Regular 12 pt | 100% #000000

MENU TEXT | Roboto Regular 9 pt | 100% #FFFFFF

FINAL DESIGN

App design before the registration or login

App design after the registration or login

Users can check the benefits of the app before registration. 

MAIN ASPECTS OF THE APP

Automate
- User perspective

The core idea of the application is to automate an organic feed that the user receives. That solution saves the user time and also helps him keep track of what interests him, which is not necessarily the most trendy topic.

Social Connections

- User perspective

People are social, that is why I decided to include some social interaction within the app. It is possible to follow other people's feeds, invite your friends, and share the news.

Accessibility

-- User perspective

Having accessibility in mind I used big font sizes that has high contrast. It passes the WCAG 2 color contrast standard with grades AA and the highest grade AAA.

I decided to use colors for strategic actions that are the least susceptible to color blindness.

Ease of discoverability

-- User perspective​

I decided to place little instructions (text and video) on every new screen that doesn't have content yet.

I also added the text under the icons to maintain clarity.

Trial without the registration
- User and Business perspective

An engaging experience is provided upfront without requiring the user to input personal information.

Social Proof

- Business perspective

For a brand new project, social proof is a great way to attract users. I decided to use celebrity factor and made it as a first gateway and content providing opportunity.

TITLE OF THE CALLOUT BLOCK

LESSONS LEARNED

The last stage of this project was user testing, that was conducted with 5 users.

I have noticed that mostly it was clear for users how to use the app. Saving favorite news and managing them in the "SAVED NEWS" section was clear and every user succeed.

Most of them had no problems with understanding the bottom menu except, for the "NEWS COLLECTIONS". This section was tricky to name, that is why I named it at first "collections". Thanks to user testing I changed it for categories; now I believe it is more representative.

Additional changes were replacing "REGISTER' with "SIGN IN". Users seem to understand what "SIGN IN" means much faster.

Like what you see?

Let's chat.