Project overview

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Responsibilities:

Role:

UX/UI designer

Problem:

People often face the inconvenience of long lines, uncertainty about seat availability, and difficulty in securing preferred seats when planning a trip to the movies, which hinders their overall enjoyment of the cinema experience.

Solution:

Design a ticket ordering flow that helps users seamlessly and efficiently purchase movie tickets.

User research

Adults who watch movies once a month at the cinema

Primary group:

Results:

Many target users view watching a movie as a fun and relaxing activity when they want to spend time with family and take a break from their busy weekdays. However, many cinemas' websites are cluttered and confusing to navigate, which frustrates many target users. This caused a normally enjoyable experience to become difficult for them, defeating the purpose of relaxation.

Persona: Anna

Problem statement:

Anna is a tech-savvy working professional who needs an efficient and user-friendly movie ticket booking platform because she often faces the frustration of spending too much time in long lines at theaters.

User journey map

I created a user journey map of Anna’s experience using the site to help identify possible pain points and improvement opportunities.

Paper wireframes

Because customers order tickets on a variety of devices, I began working on designs for additional screen sizes to make the site fully responsive.

Desktop - 1440

Mobile - 393

Digital wireframes

Low-fidelity prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was ordering tickets, so the prototype could be used in a usability study.

View the GrabFly App
low-fidelity prototype

Usability study: parameters

Unmoderated usability study

Study type:

Location:

USA, remote

Participants:

5 participants

Length:

10-15 minutes

Usability study: findings

Users want to check how far cinemas are from their homes using a map.

Map:

Seats information:

Users want to know more information about the type of seats.

Filter:

Users did not understand why they needed to filter cinema addresses.

Mockups

Based on the insights from the usability study, I made changes to improve the site’s time page.

One of the changes I made was the ability to sort addresses and check them on the map.

This allowed users to see where the cinema was located without having to go to a third-party site.

Before usability study

After usability study

Mockups

To make it even easier for users to select places, I added place information that allowed users to recognize different types of places.

Before usability study

After usability study

Mockups

High-fidelity prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study.

View the VividView Cinema
high-fidelity prototype

Accessibility considerations

I used headings with different-sized text for a clear visual hierarchy.

I designed the site with alt text available on each page for smooth screen reader access

Used icons to help make navigation easier.

Sitemap

With the app designs completed, I started to work on designing the responsive website.
I used the JobBridge sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.

Responsive designs

I included considerations for additional screen size in my mockups based on my earlier wireframes.

Because users buy from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as desktop and mobile so users have the smoothest experience possible.

Takeaways

Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.

Impact:

What I learned:

I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.