How can the user experience for HBONOW’s iOS app be improved?

The objective for this project was to identify pain points of the HBONOW app for iOS by creating a customer persona and guerrilla testing users. I also did a redesign of the app based on my findings from the usability test.

PART I: User Research

To begin my process, I created a proto-persona to conceptualize the HBONOW user as well as to help scope out the ideal user for usability testing. With my proto-persona in hand, I went to a local coffee shop to tests and record users using the application.

Persona for HBO-user

Meet Julia “the typical HBONOW customer”

Tasks/Scenarios

By creating user tasks and scenarios, my goal was to see how users performed simple tasks like watching an episode of a popular show or find a specific category of movies. Below are the main tasks:

User tasks
  • 1. Find all the movies that go under the category of drama.
  • 2. Watch the first episode of the latest season of True Detective.
  • 3. Find the tv show called ‘the wire ‘and save it so that you can watch it another time.
  • 4. View the cast and actor list of the first episode of the first episode of Game Of Thrones.

Data Synthesis

After the user interviews and usability tests, I reviewed the recordings from the usability test and jotted down pain points on sticky notes. I then sorted the sticky notes into similar issue buckets in order to discover patterns for the most common pain points and eventually help create design solutions.

>Pain Points sorted by user and difficulties

Pain Points sorted by user.

Pain point sorted into issue buckets

Painpoints sorted into similar issue buckets.

Critical Findings From The Usability Test

According to the usability testing, HBONOW was surprisingly less intuitive than I had initially thought. Users struggled to accomplish basic tasks like watching a specific episode of a TV-show. Below are some examples of issues that users ran into using the app.

Critical Findings From The Usability Test

Critical Findings From The Usability Test

Pain Points Discovered

Search is disabled in the main menu

By default, the search function is disabled for users while viewing the main menu. Users didn’t understand why it wasn’t enabled.

Hard to find an episode’s info page

The more info button label is very unclear and misleading. For example, the more info button for True Detectives is “TV-MA”.

Unable to add a tv show watchlist

Many users had no idea how to add a show to their watchlist. They frequently tapped the tv-series cover photos trying to find more options which instead resulted in that the episode started playing.

Unclear that tapping cover photos begin playing the episode or movie.

When users were asked to find the cast and actor list about a tv episode some users tapped the cover photo for the episode and expected to see some more info about the episode, and the seemed confused when that interaction led to that the episode started play.

Season navigation is hard to use

Three out of six users had difficulties using the drop down menu to change the season for a tv show. It often resulted in users started to play an episode by mistake.

One user that ran into this issue where so frustrated that he wanted to delete the app:

”At this point I’m probably already just gonna close the app and try to get rid off it.”-Test User 1

Season navigation is hard to use

Test user having difficulties using the season navigation for TV-show

PART II: Design Suggestions

Knowing the difficulties users faced, I started to sketch on some alternative design solutions to improve the user experience. I then did some quick validation on my sketches with some typical users that matched my persona, before I proceeded with my high fidelity sketches.

sketches on alternative design solutions to improve the user experience

Low fidelity sketches of design solutions to improve the user experience.

PART III : High Fidelity Sketches

1) Design improvements for Main Page

I added a sub navigation to sort out the content on the main page but also to show what type of content is showed to the users. This was unclear to users in the current version of the app.

A play icon over the cover photo was added to clarify that an episode starts playing when the user taps the cover photo.

The episode info button was renamed to ‘More Info’

Design improvements for Main Page

Old design to the left and the proposed solution to the right.

2) Design improvements for TV-Show page – Selecting Season Menu & Watchlist

To solve the difficulties selecting particular seasons, the dropdown menu was replaced with a swipe menu. Extra spacing was also added to avoid miss-taps.

An ‘add to watchlist’ button was also to the series page because users often expected this button to be placed here during usability testing.

Design improvements for TV-Show page – Selecting Season Menu & Watchlist

Old design to the left and the proposed solution to the right.

3) Design improvements for Search Page

To solve the disabled search feature pain point, the magnifying glass was simply enabled.

Design improvements for Search Page

Old design to the left and the proposed solution to the right.

Retrospective

If I had more time and/or resources on this project it would be interesting to conduct another usability test to see how my proposed design works out. If you have any thoughts or feedback regarding this study I would love to hear from you. Feel free email me at tommy@tommyengstrom.se

Disclaimer: I don’t work for or represent HBO. HBONow is one of the few products I use daily and love and I’m exploring how I might make it better.