Case study: video news for mobile — an insight into the design process.
By: Gurpreet Singh
Tags: Product Design, Ui Ux Design, Case Study, Design Process, App Design

Goal

Redesign the mobile web experience of the Hindustan Times Video news section & improve the user experience to increase user retention and lead to better engagement of users with the content.

The Human-Centered Design Process

Photo courtesy: http://greatergoodstudio.com/hdcprocess

While redesigning or revamping any web page or app it is always advisable to use the web page or app or feature thoroughly to understand the challenges users might be facing. In this case, it is the mobile web video section of the Hindustan Times. While navigating through the video section my primary objective was to observe the categorization of videos and the way they are displayed to users currently. Also, what the web app is doing well already and what can be improvised.

The problem statement was pretty much clear but to have to have more insights I presented it to users and documented the findings.

Research

Usability Testing

To have insights into users’ needs & values and to learn more about usability issues, I conducted usability testing with my colleagues. Here are the given tasks:

Explore the video news section from the homepage

Find and watch the videos as per your personal interest

Share your experience

During the task, I have asked a couple of questions to the users :

How often they watch video news?

What is the first impression of the video section page?

What type of news do they prefer to watch?

What could have been added and is there anything unnecessary or missing in the video news feed?

Below are the findings of user interviews :

Categorization of the video news feed is not clear to users

As per users feedback, they prefer to navigate news through trending or most popular sections

UI is not pleasing aesthetically, most of the users found the UI dull.

Advertisements are overshadowing the news content.

Also, It’s interesting to know that the majority of the users showed interest in videos related to politics.

Competitive Research

I explored a number of other web apps. Economic Times, CNN, BBC, Times Internet, and Newyork Times are some of the names. I found some familiarity in all of the interfaces and at the same time scope of improvement.

Screenshots of the video section of different news apps

Basic Sitemap

After primary research and competitive research, I decided to categorize news into three main sections which are at World Level, National Level, and Cities Level. These three categories further can be explored by tags above them named trending, politics, sports, technology, and many more. Although one can dig deep into the usage of tags and how to prioritize them on the basis of user research both quantitative and qualitative.

Wireframes

I explored some ideas at the wireframe stage. I have tried three versions of the video listing section. By discussing the merits and demerits of each option with my colleagues, I finalized the first version to continue with.

Visuals

The idea behind adding categories (World, India & Cities) along with tags above them to create variations in user's video news feed. The selection of tags leads to the personalization of feeds and give a better experience to the users.

At the same time, category names are highlighted with the bigger and bolder font for easy visual identification.