SHORT DESCRIPTION
This is my case study work from Google UX certification. I decided to take this course to close some gaps in my knowledge of UX researching.
And while taking this course, I made the design
of a movie theater mobile app. Here is a description
of the work I made while designing it.
And while taking this course, I made the design
of a movie theater mobile app. Here is a description
of the work I made while designing it.
The product:
The Movie theater app is a mobile app for buying tickets from a network of cinemas located and operating in Belgium.
Project duration:
June 2022 to August 2022
The problem:
Simplify the process of buying tickets and selecting movies for customers of a particular theater, to enable them to do it online.
My role:
All design work: from UX research to UI prototyping.
Responsibilities:
Conducting interviews, auditing competitors, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The goal:
Design a movie theater app that makes it easy for users to find movies to watch in the theater and buy movie tickets.
Project overview
I conducted interviews and created empathy maps to understand the users I was designing for and their needs. The main group of users identified in the study were adults between the ages of 18 and 65 who buy movie tickets at least twice a month. This user group confirmed the initial assumptions about movie theater customers. And further research and wireframes tests identified misses that I did not pay attention to in the first study.
User research: summary
Understanding the user
- Online order
- Queues
- “What to watch?”
User research: pain points
Problem statement: Kevin is a project management intern who needs an easy way to determine what to watch now at the movie theater because he needs a break from his work.
Persona: Kevin
Mapping user Kevin's journey showed how helpful it would be for users to have access to a dedicated The Movie Theater app.
User journey map
I made a competitor analysis and chose several competitors with different roles:
Competitive audit
3. An app for purchasing tickets that is not available in the region where our cinema is located
4. A related app - for buying theater tickets, but not movie tickets.
4. A related app - for buying theater tickets, but not movie tickets.
1. A direct competitor (an app of the same cinema chain, available in the same region).
2. A ticketing app available in many regions, including where our movie theater is located
2. A ticketing app available in many regions, including where our movie theater is located
After spending time on paper iterations of each application screen, I made sure that the elements that would go into the digital diagrams would be well-suited to solve users' pain points. For the home screen, I chose a quick and easy movie selection process to help users save time.
Paper wireframes
Starting the design
As the initial design phase continued, I tried to base the screen design on user feedback and research. I've added options to quickly find a movie to watch.
Digital wireframes
We help the user with selecting a movie to watch without forcing the user to leave the app to search for more information on third-party resources.
Low-fidelity prototype
Using an off-the-shelf set of digital circuits, I created a low-fidelity prototype. The main user flow I linked was viewing available movie sessions and buying a ticket, so the prototype could be used in a usability study. View the Movie theater app low-fidelity prototype.
Usability study: findings
I conducted two rounds of usability studies. The results of the first study helped guide the design from sketches to mockups. The second study used a high-fidelity prototype and found out what aspects of the layouts needed refinement.
In previous versions there was no option to sort movies, but after usability analysis I added more options so that the user can find the right movie sessions faster.
Mockups
Refining the design
Here is the result, hi-fi mockups:
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for finding suitable sessions and buying movie tickets. It also met the needs of users to be able to quickly find suitable sessions.
View the Movie theater app high-fidelity prototype.
View the Movie theater app high-fidelity prototype.
Accessibility considerations
Takeaways
Going forward
Next steps
Let’s connect!
Thanks for taking the time to review my work! If you'd like to see more or get in touch, write me on telegram: @kvinn
get in touch
CONTACT
Telegram:
https://t.me/AirDsgn
All my links:
https://airat.design
https://t.me/AirDsgn
All my links:
https://airat.design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
