James Phuong logo
back arrowback arrow white
Back

Flix

Watch movies your way.

Role

Product Designer

User Research, Information Architecture, Interaction, Visual Design, Interactive Prototype

Timeline

Nov 2021 - Mar 2022

Project Overview

Flix is a movie mobile ticketing application that draws UX inspiration from its predecessors allowing the users to browse a collection of movies currently playing in select theaters and purchase tickets at the place of their choosing. There is also an opportunity to plan more strategically with the functionality of inviting others.

INITIAL RESEARCH

I conducted a survey to understand the needs of the users I would be designing for and the primary user group identified through research were college students who needed a way to relieve their stress. The user group confirmed initial assumptions about moviegoers and their experiences, but research revealed that lining up to purchase movie tickets wasn’t the only factor ruining their experience when going out to see a movie. Other user problems include party size, organization and showtime availability, all of which can discourage people from making a trip down to the cinema.

To have some restrictions in place, I asked myself...
HOW MIGHT WE

...Improve the process of purchasing tickets based on different time slots?

...Make it easier to schedule a showtime with a larger group?

...View seat selections before making purchasing decisions ?

INFORMATION ARCHITECTURE

After doing a deep dive in researching competitors, I started to create a task flow in order to organize the information to primarily focus on using the movie ticketing app to purchase movie tickets as a group in advance.

user flow image for flix

JOURNEY MAP

After creating a task flow, i went ahead and created a journey map on how I envision the user would purchase their tickets. For the MVP of this product, I wanted to focus on the feature of purchasing tickets with the intention of seamlessly inviting other people into the group viewing party.

journey map image for flix

SKETCHES

I sketched out multiple variations of each screen to envision possible solutions throughout the task flow. Afterwards, I created a final sketch for each screen to lay out the ideal structure using the UI components I found to be most suited while keeping hierarchy and accessibility in mind.

sketches for flix

WIREFRAMES

After going through my sketches, synthesizing my research findings and creating a task flow in order to envision the user’s journey, I worked on quickly creating a user-friendly, preliminary set of mid fidelity wireframes in order to get the flow tested early on by target users in order to see what aspects of the design are viable to move forward with.

mid fidelity screen 1mid fidelity screen 2mid fidelity screen 3mid fidelity screen 4mid fidelity screen 5mid fidelity screen 6

USER TEST

I created a series of tasks for users to complete in order to observe their plan of action. All of the users performed their tasks under unmoderated user testing sessions with heat maps displaying their actions and misclicks throughout the flow.

14 USERS  |  3 TASKS
gif of task 1 for flix
Task One

Choose a movie and select a showtime

Results

92.9% of users found the task to be relatively easy.

gif of task 2 for flix
Task Two

Select your seats and invite others

Results

66.6% of users completed task either directly/indirectly;

Users with issues wanted a full screen view of aisle and seat numbers for easier selection when asked for process improvement suggestions.

gif of task 3 for flix
Task Three

Continue to purchase tickets after inviting

Results

62% of users found the task to be confusing as they weren't sure if they would be paying for the tickets of the invited people as well, and wasn't sure why the timer was relevant.

TEST RESULTS

The results widely varied among the users. I was able to gain some valuable insights from the variation in completion times, the different paths users would take, as well as the inability to complete tasks from some users that eventually gave up and left the task incomplete.

FINAL DESIGN

After I went through the inputs I received from testing, I decided to move forward with redesigning and rearranging the flow slightly to better accommodate the users.

final design for flix gif 1
Home Page

After observing the user behavior during movie search, I realized there was an opportunity to enhance the user experience by implementing more intuitive and user-friendly mechanisms for discovering movies that cater to the user’s specific preferences.

final design for flix gif 2
Showtimes

Users no longer have to go through the frustration of selecting a showtime only to find out that their preferred seats are already taken. By integrating the ‘Check Seats' feature at an early stage of the process, users will be provided with a hassle-free and efficient purchasing experience.

final design for flix gif 3
Purchase Tickets

The new design prioritizes the user’s convenience by first offering a more logical and intuitive hierarchy that allows the users to first select the number of tickets needed before proceeding to selecting their seats. This will save users the hassle of manually adjusting the number of tickets at a later stage.

final design for flix gif 4
Seat Selection

I recognized that users faced challenges in selecting their preferred seats, primarily due to the lack of a feature that enables them to magnify the view of the seats. After several rounds of iteration, I introduced a more comprehensive and magnified view of the seats, complete with aisle and seat number details, drastically improving the overall user experience.

final design for flix gif 5
Order Summary

Purchasing movie tickets can be a stressful and overwhelming experience, especially when you’re unsure of the final cost. I wanted to make the process as transparent and effortless as possible with a clear breakdown of the total price.

final design for flix gif 6
Invite Friends

I wanted to make the process of inviting friends easier when coordinating a movie outing. With just a few clicks, you can send invitations directly from the platform and your friends can easily purchase their tickets and join the watch party.

DOCUMENTATION

I wanted to create a seamless handoff process between design and development by implementing a system to keep my design file organized and easily accessible. This approach allows me to stay focused on the main user flow and ensure that my designs are created with the end goal in mind — handing them off to developers with clear visuals and a smooth transition between screens. By maintaining an organized documentation of my designs, I am better equipped to stay on track and create a complete design from start to finish.

documentation for flix mainflowdocumentation for flix extra screens

STYLE GUIDE

I understand the importance of creating a strong and cohesive brand identity for an app, so I wanted to utilize a warm and stimulating color palette that would effectively capture the essence of the brand. The bold orange color I ultimately selected not only reflects the energy and enthusiasm associated with movies, but it also provides a sense of fun and comfort that feels welcoming and engaging to the users.

flix design system for fontsflix design system for typographyflix design system for colorflix design system for interactive
Octi
Previous arrow
Previous
next arrow icon
Next
Crunchyroll