Hulu TV App Redesign - SCAD.jpg

Hulu TV App Redesign

Explore this UX test and redesign process of the Hulu TV App for my Savannah College of Art and Design graduate school class.

 

Hulu TV App Redesign

I redesigned part of the Hulu TV App during one of my classes at Savannah College of Art and Design


Project Duties

User Experience
UI Design

Objectives

The goal of this assignment was to take a process during your day-to-day life, that does not function correctly, and brainstorm, test, and redesign to make it efficient. To hear me explain this project (instead of reading), feel free to play the project video.


Critique of the Current Process

Switching between episodes on the Hulu TV App is extremely cumbersome and unnecessarily difficult. I do not think it is intuitive to pause the show, click down on the remote, arrow up two times, see a TV show overview screen, and then get the option to change to a different episode. I feel like that is too many steps to complete a task that happens so regularly when streaming TV shows. One obvious pain point is understanding that the “episodes” tab is hidden under “Go to Details” after you arrow down on the screen. The user only finds this out after really exploring the app. This is not a feature that naturally gets discovered.

What I would try to change, is that when pausing a show, I would like to see screen number two (from the list above) appear without having to scroll down. I would also change the two buttons “Go to Details” and “ + Episode to my Stuff” because they carry the same weight to the eye. It should be more obvious that “Go to Details” is the more important button to select. However, the screen to change the episode is designed well, it is getting to that point that creates unneeded confusion for the user.

Current Process.jpg

My Initial Sketch

For this redesign, I ended up testing sketch number two, but I wanted to explain both sketches below.

Initial Sketch.jpg

Sketch One

Screen One: Shows the paused TV show before doing anything to try and change to a new episode.

Screen Two: The user would then pause the show and on pause the “Go to Details” button would appear on the pause screen. I would want the pause screen to stay on the display and not disappear after 3 seconds like it currently does. This step would eliminate the need for the user to arrow down to select the “more to watch” button.

Screen Three: This would be the typical “episode overview” screen the user is used to seeing. There, they can change the episode.

Sketch Two

Screen One: Shows the paused TV show before doing anything to try and change to a new episode.

Screen Two: On this screen, the user has paused the TV show. When the episode is paused, three boxes appear on the screen. The first one gives the option to select the previous episode, the second box gives the user the option to select the “next” episode, and the last one gives the user the option to go straight to the episode overview screen to select more episodes if the user does not want to watch the previous or next episode. Also on pause, the “Go to Details” button appears as well so the user has two choices to go to the episode overview section.

Screen Three: This would be the typical “episode overview” screen the user is used to seeing. There, they can change the episode.


How I Completed this Test

The Hulu TV is intended for all audiences, but I wanted to focus on young adults from 18-34 for this software redesign. When users interacted with my redesign, I wanted them to have a positive experience that does not leave them confused or questioning the system. I also wanted this design to give users positive feedback by highlighting in color the interactions the user makes. I also wanted this design to play on the mental models users already have when dealing with applications regarding streaming video. Another goal was to have the user switch the episode to a different episode within a series in less clickable steps than the current designed version. I used both paper models and flow charts to help display a new redesign. 

I asked my users to play a series they are currently watching and while watching the show, switch to a different episode. I first asked my users to use the real Hulu TV App to see if they were able to perform the task. I then used paper prototypes with my app redesign and asked them to complete the same tasks. I wanted to see if my steps were easier or more difficult for the user.

Tasks I Asked the User

  • Change an episode on the Hulu TV app using the remote and describe the process as you do it.

  • While watching the show on the paper prototype, what would you to to change to the next episode on the series?

Tasks I Performed During the Test

  • While the tester is changing the episode on the Hulu TV app, I will be asking them questions on why they are doing that and noting any confusions that may have.

  • During the paper prototype I will be doing the same thing while making sure not to interfere by giving hints to the “answer” I am hoping to get.


Testing Results

User Test for User 1

User 1 knew right away that they had to arrow down to get to the series overview page, to change the episode. This was quick for them and not really a struggle.

During User 1’s paper test they felt it necessary to pretend to click on the items, which was something I didn’t consider. Next time I should tell my testers to pretend to be using a remote. Also, during User 1’s test I did not prompt them to move onto the Go to Details screen, but they understood what that screen meant from dealing with the Hulu TV App so often

Overall, User 1 believed that the redesign was an improvement from the current Hulu TV set up because it was quicker to get to the desired outcome.

User Test for User 2

User 2 struggled to change the episode on the actual TV because they wanted there to be a “back button.” They tried two times to find a back button before they eventually found the correct way to change the episode.

During the test they successfully went to the next episode. I then prompted her to move onto the “go to details screen.” They understood that it was easier to use the new “go to details screen” because of the obvious buttons.

User 2 liked the new redesign because they didn’t have to think about where to find the information. On pause, the information appeared which they felt solved the problem. As a redesign, it could be a good idea to implement a “back” button because this was User 2’s initial though to go to a new episode.