UX Research Case Study_Mubi

Background Story

I’m a filmaholic and Mubi is my go-to when I’m looking for something more special and unique. As I learned more about UX, the more I felt that Mubi can be better (because I love it!).

I figured I could use my UX knowledge to see how the UX of Mubi can be improved to attract more users and be more user friendly. I truly believe Mubi is a great platform/product which deserves more attention!

Intro

Mubi is a streaming platform that focuses on classic and art house cinema.

It also produces and theatrically distributes films by emerging and established filmmakers, which are exclusively available on the platform.

Goal

To study the UX of Mubi and understand what's working and what's not working on the Mubi website.

Mubi's UX

Mubi has a clear target user. Hence, its visual design concepts are very clear, which are: lots of image, clean, minimalism, coherent design (compared to other platforms).

Mubi focuses on curated content. Users will see different programs on the page. Mubi tries to keep the page clean while giving users more information on each film. Hence, it requires more clicks for users to find what they want to see.

Research Method

In order to understand what's working and what's not working, I decided to use 4 methods to conduct the research. Since Mubi is a video streaming platform, I chose the desktop version as my testing platform.

• A. Competitive Research Matrix: To understand similar products on the market and what's unique about Mubi.
• B. Heuristic Analysis: To understand if Mubi's design follows accepted usability principles.
• C. Usability Testing: To see what's working and what's not working for users.‍
• D. Site Map Revised + Card Sorting: To explore how to revise the site map so it's easier to navigate.

‍

‍

I used this template to analyze if Mubi meets the general UX principle. I summed up with 4 top-priority points and 4 medium-priority points.

Proto-persona

‍A film lover who's sick of watching Netflix and YouTube

Scenarios

‍Max works in the office from 9-5. He used to be a huge film lover and would go to the cinema once a week by himself. He would watch all kinds of strange and independent films. Since he started working, he has less time and energy to watch films or go to the cinema. Not even mention watching the festival films which might be 3 hours long and require full attention. His main resource of entertainment is Netflix and YouTube. However, he now finds Netflix and YouTube are full of brainless films. He wants to find some films that are entertaining but still different from Netflix or YouTube.

Tasks

1. How would you do when you first visit the website and would like to sign up?
2. After signing up, what would you do to explore?
3. You see an interesting still, and you would like to know a little more about the movie.
4. You want to choose a movie to watch.
5. You find the movie that you'd like to watch, what would you do next?
6. The movie isn't as attractive as you thought, what would you do?
7. You look around the website, and decide to give the movie you were watching another try. What would you do?

Psychological usability heuristics
Overall Evaluation:

There were 10 main categories. Within each category, there were 3-7 UX design principles. The categories which were marked in red meant the website didn't meet that UX standard. The full report could be found here.

‍

Top Priority - 01

Tasks should be designed taking previous users' mental models of every task into account.

Mubi is good at providing film information. For example: the popular film festival titles or films that the actor/actress participated in.

When you click on those titles, they'd appear in a section looks like the rest of films. But the film "is not available" on Mubi and users won't know that until they've read all the information.

‍

‍

‍Top Priority - 02

The objects on the screen should have the right affordances; clickable things look clickable.

The icon which tells users to scroll right is very unnoticeable. Contrast is quite low and size is quite small.

‍

‍

‍

‍

Top Priority - 03

The system should be prepared for user errors, anticipates what they will be, and tries to prevent them.

Users would generally like to watch the trailer before committing to the whole film. However, there's no option to watch trailer first (the play icon is to play the whole film).

‍

‍

‍

‍

Top Priority - 04

The system should take advantage of users seeking (food, sex, information, etc.).

It's hard for users to decide what to watch since the information is quite limited on the main page (rating is only available after click the film for more info).

Maybe they can try to explore the Thumb's up/down, but make it more professional (rating by the film critic etc).

‍

‍

Medium Priority - 01

The system should not require more user work than needed.

Users have to scroll all the way down to see all the programs / Hard to decide which film to watch.

Mubi has a very niche target market, maybe by studying how those audience choose what film to watch, Mubi can come up with a easier way for audience to navigate the page (for example: different pages for different topics, mood, production year...etc)

‍

Medium Priority - 02

Users should be able to look to others for guidance or recommendation.

There's a "Feed" page, but the source is unclear and hard to catch user's attention.

‍

‍

‍

‍

‍

Medium Priority - 03

To grab the attention, the system should use bright colors, large fonts, beeps and tones.

The title of the program is noticeable but not super noticeable. But that's a very important information since Mubi is a curated platform.

‍

‍

‍

Medium Priority - 04

The system should take unconscious processing into consideration.

There's no progress bar on "Continue Watching" films.

‍

Future Development

1. The system should use headers and short blocks of info or text.
   -> Overall interface is clear but could do with more header and short text

2. The system should take users' mental models into account.
   ->  Too many similar icons on the film page comment section

3. Fonts should be large enough and easy to read.
   -> Sign up message could be larger / Title of the program is too small

4. There should be good color contrast; red text on a blue background or viceversa is not used.
   -> Since Mubi uses movie still as its background, low contrast can become a problem sometimes

‍

In order to understand how users explore Mubi. I conducted 2 moderated usability testing with testers

Participants

Tasks

Findings

1. Sign up and intro page

• Only landing page showed “Try 7 Days for Free”.
• Both users didn’t click “Try 7 Days for Free” to sign up.
• No clear price, but price was within 3 clicks so it’s acceptable.
• Description of the platform wasn’t clear enough, even misleading for users.

-> Change “Try 7 Days for Free” to “Sign up & Try 7 Days for Free”

2. Now showing / Film info page

• “Now showing” page was clear enough for users to know what it does.
• More info of the film could’ve popped up to help users find the film to watch.
• User couldn't watch trailer directly from “Now showing” page.
• “PLAY” icon would vanish on the film intro page when the cursor moved away.

-> Provide more information without leaving “Now Showing”. Maybe play trailer in a small window or a drop-down synopsis. Same to the cast & crew info page.

3. Browse page (under hamburger menu)

• Layout and sort/filter function was pretty good.
• User didn’t know the difference between “Browse” and “Now showing”.
• It was a very bad user experience to realize that some films on the page weren’t available on the platform.

-> Make it clear that the films on “Browse” aren’t all available on Mubi

‍

4. Top menu bar

• “Feed” and “Notebook” weren’t clear enough to know what they’re about.
• Only very few icons under hamburger menu would attract users to click.
• “View history” didn’t work properly.
• Over all, menu wasn't clear enough, users only clicked one or two because they didn't interested or understood the menu.

-> Change “Feed” and “Notebook” to something easier to understand
-> Rearrange the menu bar

‍

‍

During the usability testing, I found that the sit map didn't work very well. There were too many categories so users didn't even want to figure them out. Therefore, I figured redesign the site map might help users explore the website.

I studied the site map of Mubi and did both moderated and unmoderated card sorting to understand how to improve the site map.

Current-state site map

According to the official site map. There're 17 main tabs, which could be hard for users to explore. I categorized them and picked 20 cards (the max cards I could use for my testing version) for testers to do the sorting.

Card-creation process

• Used OptimalSort to create the card sorting survey.
• Created 20 cards.
• Chose 2-3 cards from each category
• Didn’t include the category that I thought should be included under another category (in order to make the menu cleaner)

Card-sorting process & results

• 2 moderated open card sort then 10 unmoderated open card sort
• 10 (55%) people completed my study out of a total of 18 participants. 8 abandoned.
• Completed participants created an average of 5 groups.

‍

‍

5 main categories

1. About (of the platform)
2. Membership / Setting
3. Recommendation
4. Movie Information
5. Movie News (or anything with long titles)

‍

‍

‍

‍

‍

‍

‍

‍

‍

Revised site map_Process

This is how I revised the site map. I mainly tried to make the menu shorter and matched the card sorting results.

Reasons for revision

1. Since Mubi is a streaming service, users might connect/project the website to a big screen. Mubi tried to create some shortcuts. However, this made the main menu is quite packed.
   -> In order to make the interface clean. I tried to shorten the main menu.

2. Shorten the main menu according to the survey results (5 categories).
   -> Recommendation / Film Info (like IMDB) / Movie News (Articles) / About / Membership (Setting).

Revised site map

‍