Newsfeed: Covid-19 News Source

Platform

iOS & Android

Timeline

1 Month

Role

UX, UI, and Interaction Design

When Corona Threw a Wrench

As the travel industry stopped operating because of Covid-19, Wego needs something to keep our users engaged with our apps. We decided to make a Covid-19 News source for users.

The purpose is to update travelers about what's happening in the travel industry and when will they be able to travel again.

Challenges

No time to lose

We needed this feature to be published fast. To keep our app alive and as an effort to reduce our uninstall rates.

Choosing the right content to show

We have a lot of different news resources available. Which one should we focus on? Which would be the most useful for our users? What kind of content should we include in the newsfeed?

Exploration Phase

Concept Model

I started with a concept model to visualize what should be inside of the feature, and how might the users interact with it. Concept model helps me expand the idea further.

Initial sketches

After I got the gist of how we want the product to be, I created rough sketches and user flows using pen and paper.

What I really like to do is to sketch a bunch of different ideas for a component. In the example below, I sketched out multiple ways of visualizing a news card component.

What's next?

At the end of the exploration, I discussed the flow with the devs and PM. The purpose is to understand whether the idea is feasible or not.

Wireframes

Once we agreed on the rough concept, I moved on to create wireframes digitally on Sketch. These are the concepts and ideas that was explored on the wireframe phase.

News card exploration

Based on the paper sketches I made, I moved them digitally to Sketch. The focus here on how can I layout the elements and make it easy to understand. Here are some examples of the explorations I've made.

Higlighting important news

If there are any important news that would be essential for our users, we want to highlight them. We would also use the same style to highlight trending topics or news based on the users location.

Onboarding and topic selection

The newsfeed should also be personalised. We want users to be able to choose which topic they are interested at. The onboarding will serve that purpose.

Helping users to understand what's going on

To make this feature more helpful, rather than just showing a list of news, we need to have a different value to sell. I had the idea of having a "tips and tricks" carousel sections to help users learn something regarding this Covid-19 situation.

I found that we could do two things for the tips section. The first one is to keep it simple and straight forward, as a carousel. The other is to make a more detailed version of it.

Reviewing and collaborating with dev and PM

In this phase, I went back and forth reviewing the design with the dev and my PM. We brainstormed ideas and concepts that is feasible to be developed as fast as possible, because this project is time-critical.

User Interface Exploration

First UI exploration

The first interface that I came up with does not change a lot from the wireframes I made. The reason is because we want it to be quick and we want to publish the feature ASAP.

Quick test and iteration

With the screens above, I went around and test it to people in the office. The main feedback is that the list is confusing to look at. It feels overwhelming and most of the participants squinted when they look at the design.

Using the feedback above, I understand that the problem lies within the news card. Too much text, poor readability, unclear spacing, and the touch points are not distinct enough. I decided to do some more exploration on the news card.

Second UI Exploration

I decided to go with the news card without any news snippet, because it is more straightforward. Based on the feedback I received, nobody cares about the news snippet - it is too short to give any context of the news - the title itself is already self explanatory.

On the second iteration, I also explored the dark mode design.

Final flow result

After another round of quick usability tests, we decided to move forward with the leftmost bottom corner news card design. Here is the final flow of the feature:

Learnings

Without the users feedback, I'd have gone with the initial news card design - too much text, poor readability, unclear spacing, and the touch points were not distinct enough. I am glad I took the chance to gather feedback from other people before moving forward with the design decision. Even if the design is needed ASAP, a quick and small user test is better than no test at all.