[ENGLISH] — UI/UX Study Case: Redesign & Improving Watching Experience on Disney+
This is the English Version of this Study Case, For my Indonesian fellows that want to read it in “Bahasa Indonesia”, you can find it here
Introduction
Hi everyone 👋, Wassap? My name is Vetrick Wilsen, you can call me Vet or Sen. I am currently studying at a private university located in Gading Serpong, Tangerang with a Business Information Systems study program. Besides studying, I also work remotely as a part-time UI/UX Designer in a Design Studio and also actively take on several freelance projects. As a designer, I always upgrade myself by taking the time to explore designs and I usually publish these designs on online platforms such as Dribbble, Behance and Instagram.
To see my exploration or my full profile feel free to visit my Dribbble Page 😍.
Note: This Study Case is one of the school assignments, that is “Human-Computer Interaction” and in addition to fulfilling the value of the assignment, this Case Study is also one of my documentation or practices when working on design projects or doing design explorations.
Overview
Of course, We are all familiar with Disney+, Disney+ is an on-demand video service in the United States owned and managed by Walt Disney. The primary focus of Disney+ is films and television shows from Walt Disney Studios and Walt Disney Television.
And then Disney+ acquired Hotstar (Hotstar is a streaming service originating from India and this service is used by at least 300 million active users) to include their services in Southeast Asia, one of which is Indonesia.
Also below are Disney+ earnings from 2020–2022. It can be seen that the revenue from Disney+ is increasing.
Disney+ enters Indonesia on September 5, 2020
In the following, I also provide some screenshots from the comments section on the Playstore application about how users feel about the Disney+ application.
After conducting initial research through reviews from Playstore, I found several problems that users often complain about in the Disney+ application, such as:
- There is no option to lock the screen while streaming
- There is no option to set the film rotation speed
- There is no option to adjust the screen brightness
- There is no option to skip the intro
- There is no option to zoom in on subtitles
- There is no option to stop the autoplay trailer
- Cannot see the profile of the actor/actress who played the film and other films played by the actor/actress
- Difficulty finding films by category
- There is no page for application settings
Most of these issues arise when shows are streamed using the Disney+ app. Users feel uncomfortable when using applications that have the potential to cancel subscriptions in the following month.
Objective
In this case study, I also do the research phase with UI Exploration as well.
Design Process
These are my Design Process when working on this case study.
In the Design stage, there will be a UX (User Experiences) Design stage and also a UI (User Interface) Design stage.
Tools
Tools that I used for this case study
- F*gma (not sponsored 😜)
- Figjam
- Miro
- Google Meet
- Google Docs
- Google Spreadsheet
Business Goal
- Acquire new users and maintain old users to stay (renew subscriptions)
- Increase user satisfaction with Disney+ services
- Enlarge revenue / increase the number of viewers on the application
Research Goal
- Understand how users feel when streaming using the Disney+ app
- Understanding the motivation of users in subscribing to the Disney+ application
- Understanding user pain points when using the Disney+ app
- Understand user expectations when using the Disney+ application
Research Methodology
Apart from using data from the comments section of the Play Store application, I will also use the qualitative interview method, by collecting data through an oral debriefing process that takes place in one direction, which means that the questions come from the interviewer and the answers come from the source concerned.
Participant Criteria
There are a total of 8 questions that I asked 5 participants, the following are the criteria for participation in this research
- People who have purchased subscriptions on Disney+,
- Aged 15–50 years
- Male / Female
- It will be a plus if the participants have used other streaming applications such as Netflix, IQIYI, Viu, and others
Timeline
The Case Study took about 8 weeks to complete with a total of 20+ screens. Sometimes I spend around 1–2 hours a day doing this Case Study, but sometimes I don’t even do it in a day if my schedule is tight 😔.
Start Date: 16 October 2022
Users Persona
After conducting an interview session with the participants, the next step is to create a Users Persona. Simply, User Persona is a summary or grouping of users, so with that, we get to know more about our users. The User Persona will contain or cover the behaviour, attitudes, and goals, also with the user’s pain points.
Customer Journey Map
The Customer Journey Map is the journey of the user’s feelings (user experience) when interacting with a product. The Customer Journey Map will contain how the user feels when carrying out an interaction or a task with a product, whether the user is happy, sad, disappointed, or angry.
Prioritization Matrix
Prioritization Matrix or Eisenhower Matrix is a reference or matrix that contains the tasks to be performed first. The Eisenhower Matrix consists of 2 columns and 2 rows, including Do First, Schedule, Delegate, and Eliminate. (Template from Figma Community)
User Flow
User Flow is the flow of users when interacting with the product, starting from the first stage users open the application to the final destination of users when using a product. An example of User Flow in the Disney+ application is when the user opens the application until he finds a suitable film to watch.
Information Architecture (IA)
Before entering the design stage, there is Information Architecture. Information Architecture is a structure or component that will be filled in a design/screen later. For example, on the Home view, will have a Header, then what other components are in the Header, for example, Logo, Search bar and others.
Wireframe (Lo-fi & Mi-fi)
At this Wireframe stage, I usually divide it into two parts, usually, I will make Lo-fi (Low-fidelity) or rough sketches for the design and the other one is Mi-fi (Mid-fidelity) wireframe which is neater and already uses tools, like Miro, Whimsical, or Figma (but still in black and white).
There are also those who call Mi-fi (Mid-fidelity) Hi-fi Wireframe
Usually, for sketches, I only use it for myself, because in my opinion, more ideas will come out if we use pencil and paper or digitally such as an Ipad/Tablet.
As for Mi-fi, I usually design and demonstrate it for clients, receive feedback from clients or show it to developers, so that developers get a rough idea of the product or application that will be built later.
In this Lo-fi work, I use Miro as a tool for sketching.
After the sketch is finished, the next step is to make the Mi-fi (Mid Fidelity)
UI Design Process
In the UI Design Process this time there will be 3 processes, including exploring the moodboard and then proceeding with creating a design system which will later be used for the visual design (Hi-fi Design).
Moodboard
From the name Moodboard, of course you can guess that this Moodboard will contain design inspiration that will become a guide later or become a final visual reference that will be created in the application to be designed. At this stage, I usually look for Moodboards through special design online platforms such as Dribbble or Behance and of course I also don’t forget to look for inspiration from Real Designs or application designs that have already been developed.
Design System
In simple terms, a Design System is a component that can be used repeatedly and when the parent component is changed, all the child components will also change, so we don’t have to change them one by one again. In programming, Design System is similar to Function, which is a code that can be used repeatedly and can be modified easily and quickly.
Creating a Design System might take a little time and is also quite complicated, but it’s all worth it because when it’s used in a design, our design will look more consistent and when there are components that we want to change we don’t have to change them one by one again. And also making a Design System will make it easier for us when we want to work on a prototype of a design, because we can use Interactive Components.
Style Guide — Colours Document
Style Guide — Typography Document
Style Guide — Grid System
Style Guide — Icon Document
for icons, I use icons from Vuesax and for some icons that are not on Vuesax, I search online and look for styles that are similar to Vuesax icons.
Button Component
The component button has 4 properties, including:
- Type (Icon Text, Text Only, Icon Only)
- Size (Large, Normal, Small)
- Variant (Primary, Secondary, Outlined, Danger, Text)
- State (Default, Hover, Focused, Pressed, Disabled)
Input Field Component
There are 2 parts to working on this Component Input, the first is working on the Field first and the last is combining the Field with Text so that it becomes an Input (Atomic Design Method).
In the Input Field, there are 3 properties, viz:
- Type (Text Only, Text Icon, Double Icon)
- Status (Default, Danger, Success)
- State (Default, Hover, Focused, Filled, Disabled)
Others Component
Hi-fi Design
Because we have created a Wireframe from the application beforehand, it will be easier for us when we want to design Hi-fi. Because we already have an overview of the application that we are going to design, it only takes a few touches, such as adding color, text style, spacing or layout.
At this stage, I redesigned the Disney+ look but still tried to keep up with the current Disney+ look.
Usually the layout of the Hi-Fi design will change or be different from the results of the previous sketch, because the sketch is only a rough description of an application.
Onboarding Process
What’s New?
- Redesigned the Welcome Screen display so it doesn’t look boring and added a Login button so that users can enter immediately if they already have an account
- Added login options, such as logging in using Email, Google, or Facebook
- “Onboarding — 1”, if the user is a new user, then when they successfully create an account they will be redirected to a page
Onboarding — 1. - “Onboarding — 2”, After choosing a category that users like, then users will be directed to the stage of selecting several films that are liked or liked
- “Onboarding — 3”, The final stage is to add several films/movies to the Users’ Watchlist, based on the Genres selected by the users
Homepage Design
What’s New?
- Added Filters to the Homepage view, so users can filter films based on the category or country they want to watch
- Added the Play Button and the Add to Watchlist Button to the Hero Section, so that users can easily and quickly add the Movies they want to watch on the Watchlist.
- Added Movies Name and minutes remaining to finish the film, so users know how long it will take to finish the film.
- If what you are watching is a Drama, the remaining minutes will be displayed to complete the film along with the episode being watched.
- Added a genres section on the Homepage, so that users can easily and quickly select films according to the genres they want to watch.
Main Page Design
What’s New?
The navbar from the previous design contains Home, Series, Disney+, Movies, and Local. And after redesigning I replaced it with: Home, Category, Disney+, Coming Soon, and Download.
Because the contents of the old Navbar will only display movies according to the category (Series, Disney+, Movies, Local) we choose, so I changed it to a section on the “Popular Movies” Section Category Page.
- Then on the Disney+ page, not much has changed, only a few sections, such as the Hero Section and the addition of the “Weekly Popular” Section.
- The Coming Soon page is a new screen on Disney+, because previously Disney+ didn’t have that section. The Coming Soon page will contain movies/episodes that will be coming soon, along with a “Notify Me” button as a notification to remind users.
- And on the Download Screen page, not much has changed, only when what is downloaded is a Drama, then the list of episodes will be put into a “folder”.
- The Sidebar Expand display hasn’t changed much either, it’s just the addition of a user’s profile photo and also the addition of an option to let users change the theme between dark mode and light mode.
- The last one is the Category Details Screen, a page where when we select a category, movies/dramas will be displayed based on the selected category.
Movie Streaming Design
What’s New?
The essence of this Case Study is centred on the display when users are streaming so in this view there are many designs that have been changed.
- In the “Movie Details Screen” there are several changes, such as adding a volume icon in the movie trailer section, so that users can turn off the volume of the trailer. Then the most important section in this change is the addition of the “Starring” list section of the actors who played the film so that later users can find out who the actors from the film are.
- The “Actor Profile Screen” is an advanced screen from the “Starring” section of the Movie Details screen. When users select a player profile, users will be directed to a short page about the actor, along with other films played by the actor.
- “Streaming Screen” is a display when users are watching using the Disney+ application. In this view, there are several additions such as the option to speed up the rotation of the film, the option for the lock screen, the option to adjust the volume, and the option to adjust the light intensity.
- “Streaming Screen / Audio & Subtitle Setting” in this section has the addition of Subtitle Size so that users can freely adjust the size of the subtitle.
Search & Filter Movies
What’s New?
The display in this section is the display for Search & Filter. The filter is a newly added feature in this Case Study because previously the Disney+ application did not have a Filter feature.
- In “Filter Options” there are several options that users can choose to categorize films, starting from Genres, Regions, to Times periods.
- “Filter Result” is a display when users press the Apply Button on the Filter Options display, so users will be directed to several film recommendations according to the filter that users selected earlier.
- “Search Expand” is a display when users are looking for a movie they want to watch and in this view, there are several changes such as adding a History Section and also displaying movies that are currently popular, along with Play and Save buttons, so users can easily save these movies. into the Watchlist
Prototyping
After all the screens have been designed, the next step is to make a prototype of the design, so that the design becomes clickable and playable. This prototype will also be used for the User Testing stage.
And in working on the Prototype this time I have also used Interactive Components so that it will make it easier to create interactions between components.
Figma Embed Prototype
You can try to play the prototype here.
Usability Testing
And the ultimate goal of designing or developing an application is to be used by users, so it will be very important for designers to carry out usability testing on prospective users who will later use the application to get feedback.
At this testing stage, I provided several “Design Tasks” that would later be carried out by users, along with questions that would also be asked of the participants when they finished carrying out the Design Task. The following is the Design Task and also the questions that will be asked to prospective users.
- First Task
Design Task: Try creating a new account until it successfully enters the homepage
Questions after the test:
- What do you think of this new flow register?
- Are you having trouble when you want to create a new account?
- Is there anything that can be developed further in your opinion?
2. Second Task
Design Task: Try selecting the comedy category via the Homepage and watch the film Family Guy
Questions after the test:
- What do you think about adding the genres section?
- Are section genres hard to find?
- Do you think there is anything that could be developed further?
3. Third Task
Design Task: Try filtering films by the comedy, family, and kids genres, as well as China and Indonesia regions.
Questions after the test:
- Do you think the buttons for filters are easy to find?
- What do you think about the addition of this filter feature?
- Do you think there is anything that could be developed further?
4. Fourth Task
Design Task: Try searching for the film Mulan, and search for the name of the Jetli player and see his full profile.
Questions after the test:
- Is it helpful for you to have a list of the cast of a film?
- Do you think there is anything that needs to be developed further?
5. Fifth Task
Design Task: Try setting the film speed to 1.5x, then changing the audio to Japanese, changing the subtitles to Indonesian, and changing the subtitle size to Large. Then change the video quality to low, and lock the screen.
Questions after the test:
- What do you think about the options given in this streaming view?
- Are there any more options that need to be added?
- What do you think about the placement of these options?
6. Sixth Task
Design Task: Open the coming soon page via the navbar and “notify me” for the soundtrack drama.
Questions after the test:
- Do you think the Coming Soon page is easy to spot?
- In your opinion, is there anything that can be developed further, for example in terms of layout, or the User Interface?
User Testing Prototype
You can also try running User Testing using the following Figma Embed Prototype:
Feedback From the User Testing Stage
After doing User Testing on several participants, here is the feedback that I got and tried to implement:
- Homepage
Feedback from users is that the genres section is a bit difficult to find on the Homepage page, because I have to scroll first, so I decided to move the genres section below the hero section.
2. Movie List
The next feedback is to give a title to the movie list, so it’s easier to identify and search for.
3. Movie Streaming Page
The third feedback from users is the hard-to-recognize Speed Icon and also the change of text from Settings to Video Quality.
4. Navbar
And then the last feedback is to add writing to the Navbar, so that users can immediately know the meaning of the icon from the Navbar and not get confused.
Closing
In this Case Study, I learned more and more about Design Systems, how to apply them correctly and create interactive components from there, and make prototypes (I rarely make these), to do user testing to get feedback.
I am also aware that this Case Study is far from perfect and may still not cover everything, due to time constraints as well. Hopefully, in the next Case Study, I can make a better one than before and have neater writing.
And yes, here is my Study Case and the Design Process that I usually use in working on real projects.
Thanks for reading! have a nice day everyone! ❤️
Let’s keep in touch!
