Date
3 mos
Role
Visual + UX Designer
Type
Mobile App
Software Used
Figma
Date
3 mos
Role
Visual + UX Designer
Type
Mobile App
Software Used
Figma
Date
3 mos
Role
Visual + UX Designer
Type
Mobile App
Software Used
Figma
Project Overview
Background
For my very first project assigned in my Google UX Certificate Program, I was assigned to create a movie ticket mobile app for a Movie Theatre. I created PopCon. On PopCon, users could expect to have a quick and intuitive user experience that took the hassle out of planning friend group outings. With this being my first project ever, I was most curious to discover my strengths alongside areas of growth that needed extra attention in my design process.
Defining the Goal
Painting the Picture
I chose to tailor the PopCon app for college students in dire need of a study break. Having done my undergraduate years at UCLA, I can reminisce on the good times I had going to the Regal Cinema down the street with my friends. However, I can also remember how insecure we were all day about tickets being sold out upon our arrival. Of course we could have just ordered the tickets online, but think about all the steps that one has to go through to do that:
- Open the Safari browser on your phone.
- Search for the Regal Cinema website.
- Make sure your geo-locator is on, or else you have to enter your zip code for the site to find the nearest Regal to you.
- Then, scroll down the uncoordinated list of movies on the movie list.
- Select the movie you want to watch.
- Select the date and time you want.
- Select your seats
- Type in your payment info and submit your payment
- Close the app
- Access the ticket in your email
Out of breath after reading all that? Me too. Time to roll up our sleeves!
Research & Empathizing
Interviews
In order to empathize with the user cohort, I selected 4 peers of mine to conduct interviews. All of these peers were students, 2 male, and 2 female. I interviewed each interviewee with the same list of 7 questions:
- What is the most important quality you want in a ticketing app?
- What’s been the most challenging thing about buying tickets online?
- What’s the best part about buying tickets online?
- What color(s) screams “cinema” to you?
- What’s your favorite part about the movie-going experience
- Do you already know what movie you want to watch before you look to buy a ticket to a movie, or do you ever casually shop around?
- What’s your favorite movie genre?
User Personas
After conducting my interview, I composed user personas that highlighted the common insights captured from my interviews. Meet Kiara and Stephen:
(click to enlarge)
User Journey Maps
(click to enlarge)
I built a journey map for my personas (Kiara and Stephen) to map out their feelings and experiences as they purchase a movie ticket on the app. Additionally, this would give me the opportunity to identify ways I could respond to their negative experiences and emotions with my design. The most prominent emotion was impatience.
User Pain Points
Once I finished my interviews, building out my personas and my journey map, it became apparent what the common user pain points were when they engaged with movie ticket apps:
(click to enlarge)
Competitive Audit
My next step consisted of conducting a competitive audit on 4 competitors (2 direct, 2 indirect) in the market: Fandango, MovieTickets.com, Ticketmaster and LiveNation. I wanted to learn how these apps/websites had responded to the user pain points, if at all. Likewise, the audit would be a great opportunity to gain some inspiration for my design.
My competitive audit informed me of competitor weaknesses like their (1) cluttered interfaces, (2) relatively long purchasing processes, and (3) poor visual design elements (i.e. – choice of typeface, poor display of Gestalt principles.)
Defining the Goal
Problem Statement
Based on the insights I gathered from my foundational research, my process of empathizing with the user, and my competitive audit, the problem I was meant to solve became clear.
Stephen and Kiara are both busy people, who need a hassle-free, time-saving way to buy movie tickets because they don’t like to waste valuable time and energy.
The Goal
After defining the problem, I could define my goal.
The movie ticket app must let users that have little time to waste buy movie tickets in a quick and easy fashion.
Prototyping
Close-Up User Storyboard
(click to enlarge)
I created a close up storyboard and user flow in order to inspire my design ideation and how I wanted to simplify the user flow. One early decision I made was to allow the user to skip the seat selection step in the typical movie ticket user flow and automatically be assigned a seat on the app instead. This would shorten the time on task.
Paper wireframes
(click to enlarge)
I decided to draw out some design layout ideas that included the information and features I determined would provide a more simple and seamless user flow, and shorten the time on task.
Digital wireframes & Lofi Prototypes
After working on my paper wireframes, I decided to build out a low-fidelity prototype and prepare for a usability study. The following are the 3 guiding principles I came up with to simplify and quicken the user journey:
- Minimize number of pages
- Give the user the option to skip “unnecessary” steps
- Circumvent the entry of card information’
(click to enlarge)
Usability Study
Usability Study
I conducted a moderated usability study with 5 participants. I sought after a diverse set of young adults ranging from 18-30 in age. All participants were students at a university/college, or employee that works at least 40 hours a week. I led the users through a scripted, step-by-step process to highlight any pain points.
Findings
The goal of my research was to find out if the app was intuitive and easy to navigate. Here are the responses I gathered.
Moving forward, I planned to respond to the insights from my usability study by implementing the following:
- Adding a QR ticket code ready for use to the confirmation page
- Adding an “Add to wallet” button to the confirmation page
- Add Date and time display to more pages in the checkout process
- Scrapping the sidebar navigation menu for a footer navigation menu
Refining the Design
My Reiteration
My next move was to develop my high-fidelity prototypes while reiterating my designs to respond to the insights from my usability study. I planned to make the
(click to enlarge)
(click to enlarge)
(click to enlarge)
High-Fidelity Prototype
Next came my time to reiterate my designs based on my insights from the usability study and create mockups and a high-fidelity prototype.
(click to enlarge)
Visual Design Elements
Next came my time to reiterate my designs based on my insights from the usability study and create mockups and a high-fidelity prototype.
(click to enlarge)
Mockups
(click to enlarge)
Accessiblity
Takeaways & Next Steps
What I learned
It was challenging for me to ideate ways that quickened the ticket purchasing process. I’m aware that some of my solutions might not be accessible or valuable to many users. For example, some users always want to pick where they can sit in the theater, making my skip to checkout feature useless. Likewise, the Apple Pay function is irrelevant to someone with an Android phone. Nevertheless, I believe the best solutions I offered came from optimizing the app navigation with genre filters and a footer navigation menu, along with simplifying individual steps.
Next Steps
I carried the goal of wanting to shorten the user’s time on task, however I did not implement this KPI into my usability study. It’s likely that my design would have a shorter time on task considering the simple addition of Apple Pay and and optimized navigation, however if I tested this I would have been able to determine more accurately if my efforts to make my app “quick” were effective.
My next step in this project is to conduct another usability study that will compare the time on task users have on my app to my competitors and explore ways for users to link their accounts with their friends to allow voting polls on the showtimes that align with their schedules.