JOHANNA BüLLING

PRODUCT DESIGNER

Product Desginer - Hyper Island alumni Based in Stockholm

Contact

johannabulling@me.com
@BullingJ (Twitter)

The process of creating a News app today Part 3

The final iteration was implementing the features to create a seamless experience where the purpose was inspired by "don't make me think" by Steve Krüger. 

Cut the slack  Final iteration

How can we integrate these valuable needs in to our solution?
 

Top stories

Inside the feed the top stories is always in the top, labeled as “top stories”
 

Filter feature

We choose to not go with the checkboxes.

Why we had them there in the first place was to help the user sort out what they did not want in their feed. Looking at the user research that i not what the user need. The users want a feed that is personalized for them with minimum effort. 

The users also indicates that sometimes they want to choose a category and just skim through that specific category. This can be applied for all article based services. The content that the service provides, divided into different categories, and depending on interest or mood, the users can go into that very specific feed.

We added the “my feed” in to this filtering view in our solution. This means that you can switch between the features and easily go back to your feed.
 

The feed

The feed has three major features integrated

Portions

The feeling of accomplishment is very important in terms of handling content. By adding this to our solution, the user will get a positive relationship to the service. How? It is a portioned news feed, 10 articles at a time. When done swiping them away, the user can load 10 more.

If the user choose to not swipe an article away, maybe hen wants to save it for later, they will still be introduced to the “load more” button.

We have made this very clear, swipe away and clean up your news before getting on to the next one. This also generates a feeling of control and a way to have an overview of the articles being provided. A lot of news is produced every day and the users easily feel overwhelmed.

 

 

 

Swipe and expand

Swipe right when you're done and want to archive. Swipe left when you’re not interested. Measuring these behaviours we can improve the feed to be customised for the users.

Expanding the article into “short version”, and read the short version inside the feed. 

Using a blurred and faded line of the text indicates that it is expandable. If the users want the full article they just tap “read full article”.

 

On boarding

When entering the application for the first time the user will get a card in the same way they get the news, the card will invite them for an introduction of how the app works. As the other cards, the user can just swipe it away. It will appear every time the user visit the service if they haven't logged in yet.

The second time the user will meet the “log in” screen is when swiping through the first 10 articles. And then the next ten, and so on.

The third time the user will meet this is when visiting the profile icon. 

We decided to do the on boarding this way due to the fact that we are working with an web app, and the users expect to be able to use the service without logging in, and also getting a soft on boarding process, with reminders, or the way we like to call it, levels of log in. The further you get to know the app, you grow the need to log in.

 

Design

We had two design approaches, one being “treat it like a startup” and the other was considering expressens loud design.

 

The startup design

Landscaping the market of the target audience (20-29yrs) gave us the input in how the users expect their news to be delivered, and what their pain points was - design-vise.

Flat design, shades of grey, easy and without anything disturbing their eyes except the content. Working with news in this project the UI and UX got mixed up, because the UI really is depending on the needs of the users, such as having summarises, big pictures, easy navigation etcetera.