Web design for a retro movie theatre focusing on ticket ordering flow.
This project took four weeks to complete using Figma and resulted from a generated prompt from Sharpen.
The Problem: There is a lack of flow from users’ click-action to view a movie they want to see in into the cart and back.
The Goal: Create a smoother, more intuitive flow for users from when they read about the movie they want to view to when they press “buy.”
My Role: Lead UX and UI Designer
Understanding the User
User Research
Summary:
I conducted an unmoderated usability study to determine how users interacted with the website and whether it got users to the end goal of purchasing their movie to view with efficiency.
I went into this study with more experience from the last round. I made sure I added the same components to this design that I did to my app, but I learned that the payment screen could be better, and there are a million ways to do that screen to suit all types.
Personas
Emma is a busy, young, professional who needs technology to be intuitive, accessible, and easy to use because she wants to maximize the feeling of nostalgic experiences rather than waiting for clunky websites to load.
Ronald is a retired veteran who needs technology to be accessible, easy to use, and efficient because he wants to lessen the frustrations of his kids and younger grandkids so that they can share and enjoy experiences with him.
User Journey Map
This website aims to reduce user frustration and unnecessary hassle and maximize the user’s time in experiencing the full effect of a delightful movie.
Starting the Design
Sitemap
My goal for the site was to keep it simple. I wanted users to know that they have all of these options, but I didn’t want to overwhelm them to where it takes away from the experience of choosing a movie to watch.
Paper Wireframes
I wanted to keep it simple and allow users to see other goings on within the theatre. I liked many formats but felt that users would get overwhelmed by some of the elements I drew.
Digital Wireframes
➡
⬅
1. Carousel of options that provide users other sources of entertainment or inform them in some way.
2. Movies readily available to view so that users don’t have to work hard to get to where they want to go.
Digital Wireframes: Screen Size Variations
⬅
I kept the same mentality here, even for the smaller-sized screen. Generally, if someone is looking up movies from their phone, they will be less likely to scroll endlessly to find what they need, hence the search bar at the top.
Lo- Fi Prototype
Click on the image for the link to the original prototype.
Note: You can see where there is limited mobility for the users within the app.
Usability Study
Users didn’t have a way to edit the number of tickets in their carts.
There was no easy way for users to enter their payment and billing info.
Log in/ Sign Up isn’t clear.
This was an unmoderated study done remotely in the U.S. with five participants and took 20-30 minutes.
Parameters:
Findings:
Refining the Design
Mockups
➡
BEFORE
AFTER
I added the stars, which most felt helped the users in their selection process. Most importantly, I added the date/ time buttons rather than the calendar for simplicity.
➡
BEFORE
AFTER
I added a little note reminding users to screenshot the ticket OR to check their email for the ticket.
Mockups: Original Screen Size
Accessibility Considerations
1️⃣
Labels more clear for screen readers.
Use of icons with words for understandability across all languages.
2️⃣
3️⃣
Alt text for pictures on screen.
Going Forward
“Really well thought out and clean.”
What I learned:
I learned A LOT more for this round, and I will find my bearings in web design.
🎬
🎬
Next Steps
I will continue making adjustments for accessibility.
Add a few other buttons and tools to allow users to enjoy the experience without doing more work to coordinate things with friends.