DISHTV WEBSITE

Enabling users to enjoy Dishkiyaon Entertainment

Research | UX Interviews | UX Design | Prototype | Test

The Challenge

DishTV wanted to revamp its website and following were the key objectives of the redesign :

  • Enhance the credibility of the brand & generate interest in their products & services

  • Provide information about new/existing products & services

  • Seamless & delightful buying experience

  • Let users easily design / modify their channel packs according to the newly launched TRAI guidelines

My Role

I lead a team of 2 people on this project. My role was was not only to guide the team but to also create concepts for key flows and journeys. The most challenging part of the project was to simplify the tedious process and make the experience better for a user.

Project Duration: 7 months

🔨 Tools Used: Figma, X-Mind, Invision

📲 Platform: Adaptive

Process

Product Definition

A little about Dish TV

DishTV is the largest DTH provider in India with a total of 17.7 million active subscribers. Over and above live TV channels, they also provide value-added-content-services and Internet video on demand services like Prime video, Voot, Zee5 & more

What the client asked for

🐝 Hover over to view what we understood

35% of users are repeat visitors who comes for recharge or pack change

Reduce customer dependency on call centres

Most of the customers today recharge for small amounts which leads to inactive days

Make it world class

Consumers come to channel guide on a daily basis and the current page is not very easy to use

Current purchase flow is confusing which is leading to drop-offs

 

Feature Comparison

Research

Competitor Analysis

I did a competitive analysis to understand what other providers are doing in terms of the user experience, customer acquisition, promotions, new offerings, etc. I discovered that almost all competitors have a tedious pack selection process. The booking journey is confusing and counter-intuitive. Most used features like recharge, buy a new connection, etc are not given enough prominence.

 

Understanding the user

We initially assumed that OTT would be the most preferred entertainment platform nowadays but we learned that the main target audience for Dish TV is semi-urban /rural, users who aren’t as heavily touched by platforms like Netflix, Amazon Prime yet. The website is majorly accessed via mobile.

What do users mostly do?

What devices do people use?

New vs existing user visits

Age group of visitors

Heuristic Evaluation

Key shortcomings of the existing website

  • There are so many links in the navigation which increase cognitive load.

  • The overall website lacks visual hierarchy-

  • Complex pack creation process

  • TRAI guidelines were not clearly communicated

  • Forms are non - intuitive

User Interviews & observations

The purpose of this exercise was to understand the usage frequency, usage pattern, pain-points, and user awareness about various products. We interviewed existing Dish TV customers, customers from other providers, indirect users (occasional users who recharge on behalf of others)

Analysis

Creating user personas 

The target users for this app were existing customers of all age group, and that added up to 10 million+. That was a wide-ranging audience to please.

To dive deeper and understand the usage frequency, usage pattern, pain-points, discoverability of various features and the time taken to perform an action, we conducted user interviews with 8 users from our workplace of which 5 were Dish TV Customers and 3 were users of other DTH providers. From these interviews, along with client provided details and analytics, we created 3 personas.

Frame 9.png

Key findings

  • Non-users also use the platform to recharge the account for their relatives

  • There is a significant rise in channel pack modifications during sports tournaments, special events like a movie premier, etc.

  • Users dropped-off due to flawed recharge flows, slow load-time, lack of information, and tools (comparison, pricing, offers) to help make purchase decisions.

  • Although, the target audience of the product is from a rural area the majority of traffic was from the metro cities.

  • The poorly optimized mobile experience led people to use third-party apps (Paytm, Phonepe, MobiKwik) for recharging.

InformationArchitechture

Sorting the information in hand

While designing the IA, our goal was to simplify the navigation in a way that the users can quickly get to their destination without being bogged down by multiple options and guesswork. Their earlier version had about 9-10 menu items. We cut it down to 5 by grouping information in an optimum manner. We also defined the hierarchy and placement of the menu items without missing out on the important links. The end result was a cleaner, functinal IA which helped both the business and the users.

ia 2.png

Design

Wireframing

We created several concepts for different pages (Homepage, Product Detail Page, Channel Guide, Buying jouney, Recharge flow, Packs & Channels, Help etc.) While we wanted the business to help showcase their product in the best light, we also wanted the user to feel that Dish TV worth their time and money. We wanted to keep the propcess transparent, we wanted it to look simple yet premium and most of all we wanted to keep the flows super intuitive. We ensured to keep all kinds of users in mind while redesigning the website.

 

Redesigning the recharge flow

One of the most frequent tasks performed by our users is recharging their DTH subscription. The trouble with their existing flow was that the offers were not visible upfront and the interface was not as user friendly as a PAYTM or Mobikwik would offer. We were losing a lot of our customers to competitive apps. 

We decided to make the recharge flow smooth by

  • Showing the account balance, switch-off date, and regular recharge amount upfront

  • Suggesting recharge amounts in a way that the user can avail maximum benefit (Ex.Recharge for 3 months to get extra 7 days of free viewership)

  • Allowing them to pay from any e-wallet along with showing which e-wallet is running a discount offer

  • Adding contextual Dish exclusive offers in the journey so they can enjoy more entertainment by paying less

High fidelity wireframes

Quick Recharge 2.png
 

Redesigning the booking flow

60% of the users accessing the Dish TV website are new users who might be visiting the website for the first time and would be interested in getting a new subscription. 
The booking flow was a bit confusing, unintuitive, and left potential customers wanting for more information.
While redoing the booking flow we took care of all the pain points. We tried to make the flow simple while keeping all the potential actions like Help, compare with the user's reach making the journey smooth and intuitive.

Booking flow 1.png

Redesigning packs and channels

When TRAI announced its new guidelines, all DTH subscribers lost their peace of mind. Overnight, their packs were modified without their consent and they didn’t know how to get back their share of entertainment the way they like it.

It was a hard nut to crack but we got our Sherlock hats on to solve this problem. After multiple rounds of discussions, brainstorming, sketching and few concepts and user testing later we arrived at a clear, easy, and step by step journey which involved:

  • Creating a guide by clearly differentiating ways in which users can go about modifying their packs

  • Designing for mainstreams and extremes by allowing them to either pick their own method or a simpler way where they can answer a bunch of questions based on which Dish TV will curate a dishkiyaon pack for them

  • Making the UI look and feel as simple as shopping on Amazon, where everything is upfront, transparent and easy to understand and implement

  • Most importantly clearly communicating what charges will be incurred and what is the basis on which these charges are applicable

  • Iterating our concept multiple times as DTH users pointed out most of the loopholes we missed in our first draft
     

DishNXT HD 2.png

Testing

Test. Evaluate. Repeat.

The testing was done phase-wise. As soon as a couple of wireframe states were finalised within the team, we would schedule quick user testing sessions with other employees of the company. The number of users varied from 3 to 5. After incorporating relevant user and client feedback, the final wireframes then moved into the UI design phase and finally into development. 

 

The final homepage

Let's break it down for better understanding

Simplified navigation with only the most important menu items

Prominent Recharge for existing customers

Offers placed contextually so users know what all they can avail

Use of fun and dishkiyaon tone to match with their brand personality

Beautifully displayed content to keep users updated of the upcoming shows & movies

Beautifully displayed content to keep users updated of the upcoming shows & movies

The final homepage

Let's break it down for better understanding

Simplified navigation with only the most important menu items

Prominent Recharge for existing customers

Offers placed contextually so users know what all they can avail

Use of fun and dishkiyaon tone to match with their brand personality

Letting users know what all they can do with a Dish connection, creating interest and trust in the brand

Promoting the Mobile app but also highlighting how easy it is, to manage a Dish TV account

Beautifully displayed content to keep users updated of the upcoming shows & movies

Simplified 3 step process so users know how quick and simple it all will be

Buying journey starts right on the homepage for better conversion possibilities

Listed the most pressing FAQs upfront which will help users as well as reduce calls to customer support

Key Desktop Screens

Key mobile screens

ccccccccccccccccccccccc 1.png

Final outcome

The end product turned out much better than what we envisioned it to be. A beautiful and functional website, which stands out amongst its competitors. The website allows the user to perform all important tasks seamlessly. It also makes those not-so-commonly-used features discoverable, delightful & inviting if the user ever needs it.
To ensure that the interactions (and features that enable them) remain relevant in the years to come, we integrated our UI/UX framework with simple yet trending features personalization, predictive journeys based on past behavior, smart suggestions and contextually placed nudges to make the experience as intuitive and business-friendly as possible.

This case study is just a highlight of the massive project which included 500+ screens only at UX level. 

Next Project

next project anu.png

Anant University - Website