Embedded Files
Role
UX Designer, responsible for all aspects from beginning to end.Duration
June 2023 - August 2023
The Product
The Product
Prime Cinema is a fictional high-end movie theater for the latest blockbusters, arthouse films, and movies from decades past. The average user is between 30 and 65, all with varying professions. Prime Cinema’s goal is to bring audiences back to the theaters by presenting movies not just as entertainment but as an artform.
The Problem
The Problem
Many theater websites offer limited preview content for current showings and/or content that is commonly found elsewhere. Few sites offer anything different to garner added interest in the movie theater experience outside of what audiences already know.
The Goal
The Goal
To portray movies as an artform and add something unique to the Prime Cinema website not offered by competitors.
Research
Research
Competitive audits and user interviews were conducted prior to turning that information into empathy maps, personas, and problem statements to get a better understanding of the user’s needs.
Sitemap
Sitemap
The initial sitemap design included six main parent categories with secondary offspring categories. This approach was further slimmed down to focus solely on the "preview experience" outlined in the project's beginning stages. From here, the idea of a movie theater website turned into an extension of the theater's main website. The "Experience" extension would focus on various forms of media for the movies being featured, and showcasing only that, as opposed to everything seen above that might be found on the main theater's webpage.
Paper and Digital Wireframes
Paper and Digital Wireframes
Paper wireframes were created for each screen in the main user flow. Digital wireframes were based on those designs with a few iterations as they were arranged to the desktop screen size.
Seen to the right are ideas for the "Discover" screen, culminating in a tile layout of screenshots, soundtracks, and quotes, all from featured movies.
Careful attention was placed on what would appear above the fold. This was one of the factors that prompted a few changes to be made from the paper wireframes. Of the images above, the two on the left showcase some examples of this while the image on the right shows a wireframe of the home screen.
Overview of the low-fidelity prototype connections.
Low-Fidelity & 1st Usability Study
Low-Fidelity & 1st Usability Study
The user flow is focused on the “preview experience” as opposed to a specific actionable task. For this, the low-fidelity prototype is heavily connected with no right or wrong user path.
View the complete low-fidelity prototype.
High-Fidelity & 2nd Usability Study
High-Fidelity & 2nd Usability Study
Additional iterations were made based on feedback following the high-fidelity usability study, mainly in terms of layout for a few of the different pages.
View the complete high-fidelity prototype.
Iterations to the movie page layout, among others, were made following the first usability study. This shows a preference for a "zoomed out" viewpoint.
Accessibility Considerations
Accessibility Considerations
The following accessibility considerations were added to ensure users would have a successful time with the end product: (1) High contrast colors for an easy reading experience, (2) text displayed in simple hierarchical order for screen readers, and (3) the inclusion of an "accessibility" link at the bottom of the page for additional optional features.
Final Designs
Final Designs
Key Takeaways
Key Takeaways
Taking the time to step back and really think about the purpose of a project is very important. Implement something unique, get real-world feedback, and don’t assume your first few ideas are the ones that will always work.
“I’ve never had this many options—virtually—to explore. It makes me want to go to the movie theater.”
—quote from a usability study participant
Want to learn more about this project? View the in-depth Prime Cinema case study.
Page updated
Google Sites
Report abuse