UI Design
Redesign
Branding
Carolina Burandt (UX & UI); 3 days
scroll down
Overview
Ever heard of Mubi?
Mubi is a movie streaming platform which is specialised into arthouse, indie and international movies.
I enjoy their service for a long time already but looking at the existing app I realise that it comes across a bit outdated designwise and lacks some structure in regard to information architecture and intuitivity of use.
Empathise
Strengths and Weaknesses
To gain a comprehensive understanding of the existing app and its features, the process began with cloning the existing screens. This was followed by conducting a heuristic analysis and, finally, a visual comparative analysis.
Cloning existing screens
I start the process by looking at the app and choose three screens which I’ll be applying the redesign on. I decide for the Home Screen, Profile Screen and Settings Screen. Below you see screenshots of the original on the left and the cloned screens on the right.
While cloning I get acquainted with the existing app structure and get an overview of style and functionality.
Heuristics Analysis
I continue with a heuristics analysis to get an even deeper understanding of the design patterns the app is currently using.
I quickly realise that the Navigation Bar is quite minimalistic and lacks features as a search option or a profile. The film selection on the Home Screen follows a very specific curation and is divided into categories such as festivals or focuses on certain directors, which makes the film selection more difficult if you are not familiar with the festival or director. This gives the app a rather exclusive flair.
When Mubi started they had only one movie for each day of the month. Every day a new movie was added and others deleted. Thus, the selection was very clear and clearly structured. There is still the “film of the day”, but this unfortunately goes down a bit, as the typography is very small and the movie image disappears under the description text.
On the Film Detail page, it’s unclear whether buttons are clickable or more informative. Also, it is a very long scrollable screen that seems to have no end.The Settings Screen is kinda like the profile but lacks a welcoming, personalised flair. It looks rather technical.
Visual Competitive Analysis
In the next step, I take a look at the competition. What do the apps of the streaming providers Netflix, Apple Tv and Disney + look like?
I also decide to create a style tile for the current Mubi app to position it and its user interface against the competition. I figure that all of the competitors offer more personalised home screens as well as profile screens and stick to a rather dark color palette with some accent colors. Another thing I realize though is that there is such an overload of movies that deciding for a movie is not an easy process.
Define & Ideate
Defining the Problem & Brainstorming Ideas
To enhance the functionality and likability of the Mubi app, the first step involved a detailed examination of the current issues. This was followed by defining a problem statement and identifying design opportunities through "how might we" statements. Subsequently, the focus shifted towards the brainstorming and ideation phase to generate innovative ideas and solutions.
Problem Statement
With all the insights gained I am now able to propose a Problem Statement as well as How Might We Statements:
Brainstorming
I do a quick session of Crazy 8’s since I really love this technique and understand it as valuable tool to generate ideas in a quick, creative and efficient manner. This helps me to get some ideas of how I want to redesign my chosen screens.
Rebranding
A New Visual Identity
By utilizing brand attributes and developing a moodboard, I establish the visual language for my redesign. This process involves selecting a typeface, color palette, and components that harmonize to create a cohesive style tile. With these elements in place, the transformation of the design is nearly complete.
Brand Attributes & Moodboard
I create new Brand Attributes for my redesign of the mubi app and come up with a moodboard. After some moodboard testing I can now proudly present you the vibe of Mubi Reloaded:
Style Tile
With this I am now able to come up with a color palette as well as type chart which I will be using throughout the app. You find them in the style tile below. The brand attributes in mind I am aiming at a new edgy and artsy but also younger and fresher look:
Now I have made you wait long enough — get ready for the reveal!
The Home Screen
Below you see the home screen before and after:
As you can see the overall appearance changed completely by applying the chosen colors and typeface and by restructuring the information architecture.
I blew up the “film of the day” caption since I understand it as one of the core features of what makes mubi special compared to other movie streaming apps. I also took away the description text to unclutter the page and don’t overload it with information.
Also I added buttons with which you are now able to directly watch the movie, get information about it and add it to your watchlist.Below I added a selection function which lets you order the available movies by category.
It opens a new page which a slider to scroll through the different categories and choose one.Another new feature is the categorisation of movies by mood, which is another cool method of helping you to choose just the right movie for your current mood!I furthermore personalised the home screen by adding a feature which shows suggested movies based on your interests (handpicked for you).
Last but not least I changed the Navigation Bar by adding a search icon and changing the settings icon to a profile icon. Also the icon changes it colours when you are on the corresponding screen.
The Movie Screen
Below you see the movie screen before and after:
I made the difference in between the info tags and clickable buttons clear with the help of color and rearranging their positions.
I also added links to the about section, trailer, ratings, similar / suggested movies and extras. The Download and Add to List button are positioned in a more prominent manner.
The Profile Screen
Below you see the Profile screen before and after:
I changed the Settings Screen to a Profile Screen and creating thumbnails for different users as well as the option to add new profiles.
The Watchlist and History buttons are on the top since I figured that they are quite important and should be clearly visbible and easy to reach.
Final Prototype?
Watch a walkthrough of the final prototype below.