Movie app for Sureseats
Erica Olavario
The product:
Ayala Mall Cinemas App, also commonly called as Sureseats, is a nationwide-used app that caters to moviegoers of cinemas located in Ayala Malls in various locations in the country. Sureseats targets consumers in a wide age and occupational range.
Project overview
Project duration:
August 2021 to May 2022
Preview of selected polished designs.
The problem:
Busy workers often lacks time to check details of movies and misses movie start time
Project overview
The goal:
Design an app to minimize the energy the users have to put in to look for and reserve and resched a movie
My role:
Lead UX designer designing an app for Sureseats from conception to delivery.
Project overview
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding
the user
User research: summary
To understand about the users, I conducted a research, interviews, empathy map, and a user journey map.. A primary user group identified through research �was working adults who find movies a form of relaxation after a stressful week at work.
The research revealed the common pain points and goals of the users when using the app. It�also revealed that going to the cinema is a form of recreation for most users, and added effort in reserving movie ticket could cause stress, rather than enjoyment.
User research: pain points
Time
Users would like to have control over their schedule, including flexibility on changing movie schedules
Information Architecture
Users find it confusing to browse through movie apps, especially with finding details and navigating
Accessibility
Users would like to have perceivable information
1
2
3
Mycha
Age:
Education:
Hometown:
Family:
Occupation:
28
Bachelor's Degree
Quezon City
Single,Living with parents
Entrepreneur
“I have a busy schedule so my plans could abruptly change. I like taking my time.”
Goals
Frustrations
Mycha is an entrepreneur. She spends most of her days working with clients. She finds it difficult and unnecessary to browse on apps when her laptop is always readily available and she can browse in one go with a wider screen. Since she’s already preoccupied with office tasks, she likes having the flexibility and ease of doing personal tasks like online shopping or going to the cinema. She finds it inconvenient if she’s unable to reschedule a movie that she missed.
Add image that represents this persona
User journey map
The user journey map demonstrates the feelings and improvement opportunities there is on Mycha’s journey using the app.
Starting
the design
Paper wireframes
The paper wireframes helped ideate and identify important elements on each screens. It is a quick and easy process, which allows room for changes, before proceeding with the prototypes.
Image of paper wireframes including five different versions of the same screen and one image of the new, refined version
Digital wireframes
The goal in this phase is to cater on the wants and needs of the users according to the initial research. This includes the usable details of the movie.
This button on the bottom of the app allows the user to proceed with booking a ticket.
This play button on the top of the screen allows the user to see the movie teaser.
Digital wireframes
Having a token that gives the users convenience and freedom to use their time is a key point.
This QR code allows the user to have a portable token to enter the cinema.
Insert first wireframe example that demonstrates design thinking aligned with user research
This button allows the user to download the QR code to their local device, to avoid the hassle in case of the absence of internet.
Digital wireframes
It’s important to give the users a space to select their desired time, date, and location.
This allows the users to select date and time.
Insert first wireframe example that demonstrates design thinking aligned with user research
This allows the user select their desired seat.
These buttons allow them to proceed or cancel the process to reservation.
Low-fidelity prototype
After identifying the important screens for the whole process, it is necessary to connect the flows of them to complete the user flow and to conduct a usability test.
View Sureseat’s Lo-Fi Protototype
Usability study: findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings
Users need clear and better options when selecting a movie schedule
1
Users need a more prominent and familiar icons to navigate through the app
2
Round 2 findings
Users need a way to go to different pages with ease and without confusion
1
Users need a faster way to reschedule their movie schedule
2
Refining
the design
Mockups
After the usability test, I’ve adjusted the screens according to the pain points encountered and insights acquired during the process. One of this is making the navigation, search bar, and icons perceivable in the screens.
Before usability study
After usability study
Mockups
The most important stage of the flow is choosing the time, date, and schedule. It is important for them to recognize the options and have a flexible selection.
Before usability study
After usability study
Mockups
Main mockup screen for display
Main mockup screen for display
Main mockup screen for display
Main mockup screen for display
High-fidelity�prototype
Finally, the final high-fidelity prototype is the finished version, which shows a solution to the problems identified in the research phase of the design process.
View the Sureseats
Screenshot of prototype with connections or prototype GIF
Accessibility considerations
Provided accessibility�to users who are are visually impaired either by putting alt tags on texts and images, or providing voice assistance option.
Consider creating a light mode version.
Use less texts and more signifiers to lessen effort of users to understand the process.
1
2
3
Going forward
Takeaways
Impact:
The app has evolved thoroughly from the wireframe stage to the high-fidelity stage of the design process. It has met the wants and needs of the users.
What I learned:
While designing the app, I learned that I shouldn’t stick to only one solution from the very beginning until the end of the design process. There are multiple ways to solve problems, and the solution depends on the users perception and not the designer.
Next steps
Conduct another round of usability studies to validate whether the goals of the users have been met and the pain points have been resolved.
Conduct another user research as wants, needs, and goals might change overtime.
Reiterate design as needed.
1
2
3
Let’s connect!
Insert a few sentences summarizing the next steps you would take with this project and why. Feel free to organize next steps in a bullet point list.
Thank you for your time reviewing my work on the Ayala Malls Cinema app! If you’d like to see more or get in touch, my contact information is provided below.
Email: ericaolavario@gmail.com
Website: https://ericaolavario.wixsite.com/erica-ux-design
Thank you!