Project Overview
Many nonprofit movie theater websites are cluttered and confusing, making it hard for users to find and purchase tickets to films. My goal was to create a website that is visually pleasing and user friendly, with a fast and easy checkout process. I kept the same palette as the app but upgraded the look and feel to make it more sophisticated. If this were a real world project, I would standardize the design across platforms, however, since this was created as part of the Google UX Design Certificate, the inconsistency is meant to highlight the evolution of the design. As with the app, for this project I conducted interviews, did paper and digital wireframing, made low and high-fidelity prototypes, conducted usability studies, and went through several design iterations.
Information Architecture
I wanted the sitemap to be as simple and intuitive as possible. That way the checkout process would be fast and our less tech-savvy users could still navigate the site successfully.
Initial Designs
Sketches
Low-Fidelity Prototypes
Wireframes
User Testing
I conducted a moderated usability study with 4 participants across different demographics. I gave them several tasks to complete while interacting with an AdobeXD low-fidelity prototype.
Main Findings:
Showtimes: Some users attempted to click the movie image instead of the showtime
Navigation: Users found the navigation to be intuitive
Order Summary: Users want a thorough summary of what they’re purchasing.
Design Updates
Before Usability Study: Initially the showtimes were below the movie image.
Before Usability Study: At first, the order summary showed the ticket type and price.
After Usability Study: After users tried clicking on the image instead of the showtime, I made showtimes available on hover. That way it’s clear they must be clicked.
After Usability Study: Some users wanted to see more information so I added the time, seat, and theater details.
Final Designs
Conclusion
Users reported that The Cleo was easy to navigate, visually pleasing, and functional. Personally, I learned that small design changes, such as incorporating additional fonts, can make a big aesthetic impact.
Next Steps:
Flesh out the more complicated aspects of the navigation, such as where Film Series should live
Create a profile page where users can check their membership status and access their rewards.
Find a less time-consuming way to hook up the seat selection part of the ticketing flow.