Create an Account Sharing Feature for Disney+ Hotstar: UI/UX Case Study
Introduction
Hello, everyone! My name is Farid Muhammad, and this is my UI/UX case study for Disney+ Hotstar, create an account sharing feature. This is a first case study UI/UX Case Study from conducting a research until Usability Testing of the designs. If you want to read the detailed UX Research process, you may read it in here.
Overview
Background
Disney+ Hotstar is a dedicated streaming application for the biggest global and Indonesian hits, all in one place. It brings together your favorite shows, Hollywood movies and award-winning content from Disney, Marvel, Star Wars, Pixar, National Geographic, and many more. Users can use Disney+ Hotstar from their phone (Android, iOS) or watch it on TV using device like Chromecast. It was established in Indonesia on September 2020.
This research conducted to gain insights from Disney+ Hotstar users to increase numbers of subscriber since the app wanted to become more global and well-known after being launched for two years in Indonesia. In addition, we also want to know about user behavior, pain points, and needs to improve the app.
Role: UX Researcher, UI/UX Designer
Scope: User Research, analyzing, user flow, information architecture, wireframing, design system, mock up design, prototyping, and usability testing.
Objective
There are 4 (four) objectives that created for this UX Research:
- Understand user behavior of Disney+ Hotstar users
- Understand user pain points when using the app
- To increase number of viewers in Disney+ Hotstar
- Get to know user insights of what user needs in the app
Research Methodologies
There are 2 (two) methodologies that used for this UX research:
- In-depth Interview (Qualitative): To know the behavior, personality, needs and pain points when using Disney+ Hotstar.
- Competitor Analysis: Getting know about other apps and compare with Disney+ Hotstar about how they perform. We compared the app with Viu and Netflix.
Research Timeline and Process
The research was conducted for around 16 days in the middle of August 2022 until early September 2022.
Respondents Target and Criteria
Total of 6 respondents were gathered who meet the criteria for in-depth interview that conducted for this research.
- Disney+ Hotstar users (Male/Female)
- Age range from 18–40 years old
- Using Disney+ Hotstar at least 3 times or more in 1 month
- Likes to watch film/drama/documentaries
The respondents were recruited through sharing a screening survey in Google Form throughout social media. Interviews are conducted through Zoom, Whatsapp calls, and offline interview.
Findings
Results after In-Depth Interview
The results of interviews with 6 respondents were recorded in form of the text that created in Google Spreadsheet. To analyze the data collected, we used Affinity Diagram to help organize the information. The information then divided into different groups, themes, or categories depending on the similarities.
We analyzed the Affinity Diagram and transcripts together. You may see the transcript on this link.
Insights
Overall, based on the affinity diagram results, we gathered information below:
- People choose Disney+ Hotstar due to affordable price, yearly subscription option available, and when buying an internet package on certain provider, it’s included 1 month subscription. Users usually using Disney+ Hotstar together with friends or family, and most of the users watch Marvel, Disney Original, or Korea.
- Login method was limited with using only phone number. The OTP (One Time Password) code always late to sent of failed to sent
- Subtitles are too formal, the film/drama cannot fast forward or rewind when tapping twice on the left/right side of the smartphone screen, and the curations of the category available that are not familiar to users
- Film/drama that available in the app are not too many and 1 of 6 respondents felt like Disney+ Hotstar is too exclusive.
- 1 of 6 respondent complaint that the subscription that user paid, is not available when the user wants to use Disney+ Hotstar outside of the country, and have to buy a new number on the visited country.
User Persona
Based on the insights above, a User Persona create to know the characteristic of the user and to understand user in every kind of group.
Customer Journey Map
Customer Journey Map is made to visually map out the customer journey while interacting with Disney+ Hotstar app.
Competitor Analysis
Beside in-depth interview, we also use Competitor Analysis to identify main competitor similar to Disney+ Hotstar (Viu & Netflix) to know the competitor’s feature and compare to feature of Disney+ Hotstar.
Based on the Competitor Analysis, we obtained information below:
- Disney+ Hotstar registration and login method only using phone number, while the two competitors provided another methods, like email (Netflix and Viu), and login using their social media (Viu)
- Korean movie/drama segments are all available in the apps
- Netflix has a “Rate” feature to help convince the users to watch the films/series/documentaries, while Disney+ Hotstar and Viu didn’t have any
- Compare to Netflix, Disney+ Hotstar and Viu had the cheapest monthly price
Recommendations
The Eisenhower Decision Matrix
After discussed about actionable plan and opportunities, we used the Eisenhower Decision Matrix to decide and prioritize tasks by urgency and importance.
Here are the results after we tried to discuss the actionable plans and try to prioritized it using The Eisenhower Decision Matrix:
There are 3 (three) actionable plans that we listed as “Do It” section (urgent and important), but for this UI/UX case study, I chose the “Create account sharing feature”:
Create account sharing feature
Most of the user like to share their Disney+ Hotstar account with their friends or family, but, the problem is that 1 account is for 1 profile only (with the device can stream for up to 4 devices). So if there are more than 1 users use the account, the recommendation might not be accurate or represent what user wanted. Enabling account sharing feature will help so that each of members in 1 account can enjoy watching their favorite film and getting recommendations based on their each preferences.
This is a new implementation as there is no feature available in the current Disney+ Hotstar, so there will be a limitation available during the UI/UX Design process.
Limitation
- The design of user flow, information architecture, mockup design, and prototype only consist of selecting a profile, create a new profile, see a list of profiles inside the account, and showing the information of what Admin can do
- Usability Testing (UT) process will consist of a 4 scenarios
Ideate
User Flow
As this account sharing feature is new, the following image below are the user flows of ‘Select a profile and create a new profile’, ‘See a list of profiles’, ‘See information of what Admin can do’.
Information Architecture
For this UI/UX case study, the IA that created will be limited to the picture below, consist of ‘Disney+ Homepage’, ‘Hamburger Bar’, ‘My Account’, and ‘Create a new profile’.
Wireframe
Before conducting the mock up design, create a wireframe will help us to get a basic outline about design that will be created. I created the wireframe in low fidelity (lo-fi) using a pen and paper. At first, I created a lo-fi wireframe for profile select, create a new profile, and list of profiles.
Design Solution
After created the lo-fi wireframe, I created the Hi-Fi mockup design for the selected solution. You may see the details below:
Profile Select: I proposed to create a profile select. Before enter the Disney+ Hotstar homepage, user required to select a profile that already created inside of the account. Then, the user must put a PIN and could see if they already select the correct profile before proceed.
Create a new profile: I re-designed the ‘My Account’ menu to be more clean, and then ‘Create a new profile’ menu and design. Inside, the user can add their photos, name, phone number, and their location. Then, they will set a new PIN. A success message will show up after the profile is created.
List of Profiles & a tooltip of information about what Admin can do: To know how many profiles in 1 account, I proposed a menu in ‘My Account’. Then, inside the hamburger menu, if the user touch the admin icon, it shows a tooltip about information of what an Admin can do inside the account.
Design System
You may see the Design System that I created consist of Text Style, Color Style, and Components for Disney+ Hotstar:
Prototype
I created a prototype for the mockups. The prototype will covers the user’s journey contains 50 frames which includes activities from selecting your profile, create a new profile, see the list of profiles, and see information of what Admin can do. You may see and try the prototype below:
Disney+ Hotstar: Create an Account Sharing Feature Prototype
Test
Usability Testing (UT)
The UT was conducted online using Maze shared to 5 participants, who use Disney+ Hotstar and/or competitor apps and familiar or not familiar with account sharing feature. Participants shared their screen when the UT conducted.
The objective conducting the UT are to see if the users are easy to understand about account sharing feature prototype implemented in Disney+ Hotstar app and to get an insights and feedbacks from the new solution provided in the prototype. Beside UT, I also used in-depth interview method.
To see the completed report about UT, you may check the slides in the link below:
Disney+ Hotstar: Create an account sharing feature UT Report
5 participants were given 4 tasks to complete:
- Task 1: Select a Profile
- Task 2: Create a New Profile
- Task 3: See the list of Profiles
- Task 4: See information of what Admin can do
UT Results and Summary
After conducted the UT, 4 out of 5 people experienced a difficulty in task 3 and 4. Only 1 people succeed the task 3 without any difficulties. All of 5 people succeed the task 1 and task 2 without any difficulties.
I also found that highest misclick rate happened in Task 4 (30.00%) after 5 user conducted the UT.
There are also key insights that I got for each Tasks:
Task 1:
- Create a simple alternatives for checking the profile inside the app after login (to make a fewer step to check)
Task 2:
- Create more understandable flow for ‘Create a new profile’ feature
- Change the ‘Success Message’ color design (1 of the user said that he surprised that the ‘Success Message’ suddenly using a green color while the overall designs are using blue color)
Task 3:
- Make the text also clickable, not only the arrows
- Placement of the ‘List of Profiles’ should be located in a different page/section
Task 4:
- Create the information of what Admin can do in a separate page/section instead of a tooltip
Overall, all of the task from 1–4 are completed without any failure in completing the tasks. 5 users succeeded in completing Task 1 and 2, while 4 out of 5 users had a difficulties in Task 3 and 4 (Succeeded, but not easy). Some of the users said that the design is simple and not too complicated. The flow is also easy to remembered, except for the Task 4. For the usual Disney+ Hotstar user, they had no difficulties for some scenario because the patterns (flow) are similar to what they have imagined.
Recommendations
- Create a simple alternatives for checking the profile inside the app after login (to make a fewer step to check).
- Provide tooltip or onboarding message for first timer user, so they can understand purpose of create profile menu
- Re-design some of the pages or component to make it more consistent, compact, and accessible to everyone
- Place the ‘List of Profiles’ should be located in a different page/section
- Create the information of what Admin can do in a separate page/section, not a tooltip to reduce the misclick by users
New Designs after UT
Based on the recommendations above, I re-designed some of the current design.
Profile:
Success Message:
Information about Admin:
Lesson Learned
Through this case study, I learned about how important it is to testing out your prototype to the users and to see if the proposed solution will solve their problem or not. As someone who is new to UI/UX Design, I also learned about how to create a good design from scratch, and also how to create a good experience for users about the proposed solution.
