Online cinema platform Mymovie

UI design UX  Figma
Full case on Behance

This is a concept for a cinema portal, where users can read about movies, make and share lists, get recommendations, rent movies to watch online, or buy tickets to a cinema.

Research: customer journey map

This research is split into 4 steps: discovery – use – appreciation – profit. It outlines possible user journeys, their problems and ways to solve them. It consists of two parts: what would the customer journey for new users be, and how would it look for the existing ones. The conclusions are based on competitors analysis.

I. Non-users (unaware about the product)

(click the image to see full size)

II. Existing users (already using the product)

(click the image to see full size)

Customer journey visualisation

This is schematic visualisation of the initial user interaction with the website, from logging in to searching for the movie and proceeding to payment with all the possible situations: wrong login, movie not found etc.

(click the image to see full size)

Paper prototyping

A quick paper prototype was done to visualise the path from logging into one’s account to searching a movie, creating a new list and adding the movie to the new list.

Moodboard

UI Kit

The main colour theme was defined based on the moodboards: a multi-colour gradient and single colours, which it consists of are used as accent colours. It is also repeated in icons, loading screens and other graphic elements. The main colours got adapted for both dark and light theme, in order to have good contrast and readability in both modes.

First rough design sketches

First drafts were put together in order to visualise the same journey a bit more in detail and to start eventually looking into design and structure as well.

The structure for the main page was outlined, having customised sections for logged in users like recently watched movies/series, new episodes of followed shows and suggestions.

Various states

The logic for screens like registration, login, mistake states, password recovery etc was made and the screens in both light and dark theme were prepared:

Final design for including a movie into a user’s list as well as the process of creating a custom list and adding the movie to it was also done:

Then the logic for expanded search function and application of filters in the search process was designed:


Screen overview