Research: Product Review
We started this project by conducting a product review of the existing app with persons who were not familiar with it. We asked them to briefly interact with the app and then tell us their first impressions, as well as what they liked and did not like about the app.
Previous design of the Loop News App. Newsfeed, article page, and menu on display.
Common feedback:
The first impression of most users was that the app was extremely colourful
They liked that they could see how many persons had commented on stories
The didn't like that some of the ads seemed to block content
Research: User Feedback
We also received user feedback by going through the user comments that were posted in the app stores. This step was necessary to get a sense of the pain points that regular users were experiencing.
User comment found in the Google Play store
Research: Comparative Analysis
To better understand the world of news apps, we downloaded and tested a wide range of mobile news apps. The findings from this analysis were used to form a set of user experience best practices for designing an engaging and high usable news app.
Popular news apps
UX best practices from comparative analysis:
Make ads less intrusive by employing the use of sponsored content, and also embed ads within the content
Use big images to better illustrate news stories - "Pictures are worth a thousand words!"
Less is more when it comes to colour
Design: Wireframes
The insights gathered from the product review, user feedback and comparative analysis were used to create wireframes for all screens of the app.
The creation of the wireframes was a very iterative process. This was as a result of several "click through" exercises, used to identify elements of the new user flow that were problematic.
Wireframes of the newsfeed and article page
Design: Visual Treatment
After the wireframes were approved, we created the final look and feel of the app through typography, colour, and a variety of other graphical elements.
Visual Designs of Loop's newsfeed, article page, and menu.
