News App Redesign

 

Overview

The media group planned to redesign their original news app based on the current user feedback, but the team is without a clear direction to move forward. They need someone to clarify what users really want and care, and which behaviors may be neglected during the original process. I, as the in-house designer, was assigned to execute the redesign project with innovative proposals.

Design Role 

  • User Experience Research
  • User Interface Design (UI)
  • Interaction Design

Timeline

Nov., 2014~ Mar., 2015

Background

There are already more than 100K users, majorly from 25~34+, in Taiwan using the News App. However. there are still a range of competitors in the market, like Apple Daily, Liberty Times, Yahoo News, etc.

As one of the major media groups, there should be something different and interesting from the old version. Also, it was lucky enough that we already got enough user feedbacks and user behaviors from the original data. The team expected to go beyond the old school style and develop a more cheerful app with Material Design. I was responsible for the user experience research and UI design, and co-worked with 3 mobile developers (both iOS and Android). After continuous analysis and usability tests, the MVP (Minimum Viable Product) was finally delivered by the team.

Brand Identity

Because the company expected the App to be an up-to-date news informer and attract more young people to use, the design is assumed to be clean, simple, fun, attractive and easy to use. The app is set to be a magazine style and I collect some materials to determine the tone of the product. 

Brand Identity 

 

We suggested the brand with young, energetic, and cute personality. Based on our research and expectation, the Volcano News Brand Identity was born, representing an exploding and up-to-date News channels.

 

User Behaviors

There are already a number of user behavior we found interesting from GA (Google Analytics). We found that our users:

  1. Only read some of the categories with high CTR but almost neglect the others.
  2. Always leave the app after reading one~two news.
  3. Seldom using the news collection feature and becoming the app member.

Above all are three major behaviors we found after 3 months launch. After discussion and market analysis, I decided to improve and redesign the app as below:

  • Rebrand the app with cheerful character.
  • Enable users to select the categories they want to read.
  • Recommend relevant news based on time and keywords.
  • Redesign the member page and simplify the login flow.

 

Based on the direction, the structure is redesigned as the following sitemap and wireframe.

 

螢幕快照 2016-01-17 下午6.12.38

Sitemap

 

As mentioned above, we focused on three areas of redesign, category selection, relevant articles, and member page to improve the app performance. We used low-fidelity prototypes to collect user feedbacks. In theory, low-fidelity prototypes are helpful in enabling early visualization of alternative design solutions, which helps provoke innovation and improvement. An additional advantage to this approach is that when using rough sketches, users may feel more comfortable suggesting changes. Also, Nielsen has found that the biggest improvements in user experience come from gathering usability data as early as possible. (usability.gov)

螢幕快照 2016-01-17 下午6.12.30.png螢幕快照 2016-01-17 下午6.23.05螢幕快照 2016-01-17 下午6.23.16

螢幕快照 2016-01-17 下午6.40.06螢幕快照 2016-01-17 下午6.40.22.png螢幕快照 2016-01-17 下午6.39.39.png

螢幕快照 2016-01-17 下午6.40.35.png螢幕快照 2016-01-17 下午6.40.44螢幕快照 2016-01-17 下午6.50.12

Low-fidelity Wireframes

 

Interface Design

The interface design is based on the low-fidelity prototypes and the brand identity we had developed in the early stage. The high-fidelity prototypes are more realistic with true representation of the user interface, which can be more effective when we were demonstrating the products to the management and doing usability test.

Full screen List view (1) Side Menu 2Articles Liked Articles scrolling

螢幕快照 2016-01-08 上午3.33.33.png

 

 

 

 

 

 

 

 

 

High-fidelity Mockup

 

 

Achievement 

Above all were the first stage development. However, the app was evolving to another version since the company decided to develop News to “Entertainment News”, while keeping the original style and structure. It is usual that a product evolves with time and user feedbacks repetitively.

The current product just launched, you can play it here: https://play.google.com/store/apps/details?id=com.set.app.entertainment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s