RetroFilms

Goal: As a en emerging cinema, competing with stablished companies, RetroFilms needed an App and responsive website to bring people to the cinemas, by giving the user an easy way to book tickets from wherever they are, wherever they can. Fast, easy, fun!

Challenges:

1. Design an easy-to-understand and intuitive user flow for the booking process.

2. Give the user a well organized array of films, with all the information they need to decide.

3. Reflect brand personality through every design, word and button used.

4. Give the user a reason to be part of the RetroFilms' Community. Give them interaction within the community of film lovers.

Role: UX/UI designer, UX Writer

Location Company: London

Kick Off

Initial questions I asked myself

Who is my user?
What's their main goal?
Where will my user be while completing this goal?
What are they looking for when using the app/website?
What information do they need to choose a film to watch?

As an initial approach, I conducted both a quantitative and qualitative research to understand the landscape and answer these questions with real data. I created an empathy map, built the main personas, drew the main user route, while also digging into our competitors for a competitive audit.

Creating Personas

Meet Anita

Age: 19

Occupation: Filmmaking Student

Anita is a young woman who has a clear goal in her life: become the best filmmaker. That’s why she loves going to the cinema at least once a week, to enjoy good films while learning from them. She needs to watch films from diverse directors and different countries.

Meet Dominique

Age: 26

Occupation: Manager

As a single person, he likes to date and forget about work when going to the cinema. His job can be tough which is why he like things easy, quick and effective. He likes to book cinema tickets online and not stand in line for hours. Info easy accessed, and tickets easily obtained.

Meet Sandra

Age: 39

Occupation: Teacher

Sandra is a teacher and a full time mom. The cinema is the perfect place to have some family time with her kid and husband. But as a mother, she’s always taking care of what her child watches on a screen, so she always relies on researching the film before buying tickets. It’s annoying when she has to do so elsewhere because the cinema website doesn't have the info.

Meet Jorge

Age: 65

Occupation: Retired

As a retired man, Jorge has a lot of free time and he likes to spend it at the cinema. Yet, he not only has a hearing problem, he doesn't know much about tech and apps, so usually he goes to the cinema to stand in the cue and spends a lot of time deciding on the film. Sometimes he even ends up walking into an horror film. He hates horror!

Competitive Audit

Through a competitive audit of both apps and responsive websites, I analyzed the strengths, weaknesses, gaps and opportunities for growth of 3 competitors.

In this audit, I focused on analyzing aspects like features, accessibility, user flow, navigation, visual design (consistent brand identity), content (tone and descriptions)

Opportunities - Value Proposition RetroFilms

A Quick Booking button for those users who already know which film they want to watch

Film page with info (trailer, genre, synopsis, etc) and additional info (articles and reviews)

Array of films in the main page organized: Playing Now, Alternative Cinema, Soon to Come

Accessibility: Optional timetables with Close Caption (easy to find) for users who need it.

Especial feature: a To-Watch-List for users to log in and add films they want to watch at some point

Architecture Information

User Flow 001_ Booking a Film Ticket.png

Wireframes & Low Fidelity Prototype

Screen Shot 2022-12-05 at 8.55.42 AM.png

Other screens

Usability Study

Through conducting an unmoderated usability study with the Low Fidelity Prototype of the main user flow (Book/buy a ticket), I pin pointed some pain points the users where experiencing in the process.

Screen Shot 2022-12-05 at 9.10.31 AM.png

Through the insights gathered, I adjusted the wireframes to make the suer flow easier for the user to understand and do.

Mockups

Following the clear path I had marked out with my research process, the ideate process, wireframes and low fidelity prototype, I created the mockups based on the brand's color palette and following strict accessibility rules with them. All colors were tested with the WebAIM to make sure it was all legible.

Typography: Hindi Kochi

Main Color Palette

Gray Palette

Secundary Palette

Main Buttons

High Fidelity Prototype

Responsive Website

Takeways

Apart from being a UX/UI designer, I am a filmmaker and have experience in the Film Industry, so I know for a fact (and through the research I conducted for this project) that people from all ages and backgrounds love to go to the cinema and watch a film; that was the real challenge, to design for a wide range of users.

Through this project I truly understood the importance of accessibility, not only for an app but for the service the company is providing. Even though I added accessibility features (CC, text reader and change of language) I would have wanted to add additional features, and learn more about how accessible an app or responsive website can truly be.