Mirage Cinema Story
Mirage Cinema app is my first Product Design project I've done for Google's UX Design Certificate Program. Mirage Cinema is a fictional movie theatre in need of a check-in app for their guests who have already purchased their ticket online or offline. Through an initial user research, I found out that some theatre guests wish to avoid human interactions to check-in at the theatre as much as possible due to various reasons such as long lines, language barriers, and cultural differences. Some also buy their tickets in advance and has hard time keeping track of them and organized. In this project. I designed a check-in app that lets its users check-in at the theatre more efficiently by letting them keep their tickets digitally and providing any necessary information online.
Project Overview
For this project, I followed the Design Thinking Process, following 5 steps - Empathize, Define, Ideate, Prototype, and Test - and repeated the process to iterate and improve on the prototypes. As a solo project, I took part in every step of the process such as User Research, UX Design, Visual Design, Prototyping, and more.
Design Thinking Process (pc. Google UX Design Certificate Program)
Understanding the User
I conducted interviews to identify goals and pain points for my user base. The primary user group represented people who wanted to avoid as much human interaction as possible including a long line and talking to a service clerk.
This user group confirmed that user would mainly use a check-in app for convenience. This research further revealed that there were many reasons underlying the avoidance pattern, including language barrier, time management, and current COVID situation. Other pain points included worries for internet connection and security or privacy issues.
User Pain Points
With the research findings and data I have gathered, I created a user persona to be a representative user for my product. It helped me form a profound problem statement for my project: Amina is a middle-aged immigrant woman who needs an app to help her check-in with the least amount of human interaction because she doesn’t want to experience inconvenience due to her language barrier.
User Persona
The User Persona also helped me create a User Journey Map, showing the journey Amina would have taken to go check-in at a theatre with her reserved ticket. I thought of smaller steps within each of the 5 bigger actions to reach her goal and empathized with the Amina to see how she would feel in each step. This careful reflection on the user guided me to figure out improvement opportunities in each step of the way, which would come in handy further into the Design Thinking Process for my project.
User Journey Map
Starting the Design
First step in the design process was competitive analysis on several film/entertainment brands with a mobile app that allows users to keep their tickets digitally and allow users to check-in at the theatre using the app. The brands included AMC, Fandango, CMX, and Bowtie Cinemas. I learned how clearly they organized the movie information and found gaps in accessibility such as offering only one language options in English.
.png)
Brands Chosen for Competitive Analysis
Based on the findings from analysis and user journey map, I made a User Flow on getting into the app and finding ticket information for checking in at a theatre. This would be basis of my product going forward. I focused on making the process as simple and easy as possible to target my User Persona who is not so tech savvy.
User Flow
Next in the Design Process came Paper Wireframes. For example, I sketched 5 fast iterations of a single log-in page for my app that included important key features such as ‘Forgot your Password’ and ‘Continue as Guest’ that addresses user pain points on Security/Privacy concerns. Best iteration of each feature is marked by a star. These versions are then combined to create the final refined wireframe on the bottom. I focused on smooth user flow and hierarchy of the features for my design.
Paper Wireframes
Based on these sketches, I created Digital Wireframe on Figma. I made sure to respond to some of the important the user pain points I discovered during my research from very early in the user journey. The Login page addresses two pain points, language barrier and privacy concerns. Furthermore, I focused mostly on the most important and informative part of the app - Ticket Information page. I addressed other two pain points, crowd and connectivity issues in an organized manner.
This addresses pain points for many non-native English speakers from the very start.
This is for users who don’t wish to provide personal information if possible.
Electronic ticket will save a lot of time and inconvenience when checking in.
In preparation for a low connectivity, user can download the electronic ticket ahead of time.
Digital Wireframes
Expanding on the wireframes, I built my low-fidelity prototype on Figma, adding more features and layouts.
The user flow starts with the login page, followed by the home page with all of the user’s saved tickets. Once the user selects on a ticket, they can view the corresponding electronic ticket with all the necessary information and more. This page also includes Refund option in case user wants to cancel the movie. Simple, easy-to-follow refund process takes place once the user selects the option.
Lo-Fi (Low-Fidelity) Prototype
With my first prototype built and functioning, it was time for me to test it on users and get some feedbacks via usability study on 5 participants, ages ranging from 18 to 55. After some background questions, participants went through unmoderated, prompted usability study where they recorded their thought process while completing each prompt, such as "From homepage, figure out a way to add a new ticket to your list." At the end of the study, participants were asked to explain how they felt about the app experience as a whole. This study was repeated on my High-Fidelity Prototype, the iteration on my Low-Fidelity Prototype. After identifying patterns from gathered data, here are the insights I drew out from the studies:
Refining the Design
Based on the insights found from my usability study on Lo-Fi Prototype, I iterated on the prototype to create mockups and a High-Fidelity Prototype. This stage not only involved improving the user flow but also visual designs, such as layout, typography, colors, and more.
Sticker Sheet
Usability study revealed that multiple test participants struggled to find the Add New Ticket button and explicitly expressed concerns for it. As a response, I have moved the add button to the top of the screen so it is easier and clearer to find the button.
Furthermore, before a usability study, the Refund My Ticket only had information on prices and payments. After the study, I have made sure to include the ticket information so that users can check if they are getting a refund on a correctly intended ticket.
Mock Ups
High-Fidelity Prototype
During the course of my design iterations, I made sure to consider accessibility for my apps so that it can be available for as many users as possible regardless of disabilities, age, ethnicity, o gender. First and foremost accessibility concerns I considered was language barriers. I included an option to change language settings on the login page, the very start of the user flow. All the animations in the prototype is set to accessible range of timing, under 500ms. I made sure that each user flow has multiple ways of getting to the destination. For example, you can get to the Profile page from three different hotspots including both image and text buttons.
Going Forward
" You know, I'm 55 years old and I don't usually use these kinds of apps and just have my children do it for me, but if I have to, I would use this app."
As my first product design project, I have learned a lot about the entire process. Besides learning how to research and to use the software, I also learned a lot about accessibility and importance of it through both my usability studies and personal research.
​
Next steps to follow for this project would be:
-
Iterate on the design so the dark mode can be viewed interactively on the prototype.
-
Work on the missing side features and user flows such as Food & Drinks page, Search and Filter function, and accordion menu for the FAQ page.
-
Review the accessibility guidelines and iterate on the design to match the guidelines as close as possible.
Thank you!
Thank you for your time reviewing my first case study!
You can find more of my work on my design portfolio, https://yoonseomok.wixsite.com/design
For business inquiries, you can contact me via email on octis.em@gmail.com
Thank you!