Seat reservation app for movie theatres (Case Study)
The Challenge
The Brief
Using multiple movie Apps internationally, in the daily entertainment scene of an average humans lifestyle,
The Approach
The research was planned in 3 steps:
Understanding the user
- User research
- Persona
- User journey maps
Low - Fi Design
- Paper wireframe
- Digital wireframe
- Low-fidelity prototype
- Usability studies
Refining the Design
- Mockup
- High-fidelity prototype
- Accessibility
Through Primary research, interviewing my closest peers and colleagues. I created personas as well as empathy maps in further comprehending the needs of users I am designing for. The result showed that the user group were students to middle age adults who either had a lot of time for entertainment, or spending their days off from work, in the cinemas. I conducted the research through interviewing my friends and co workers with 4 ready made open ended questions. Going in, I assumed that only movie fanatics cinema members book seats or go online with their seat reservations and find minor problems. After, research revealed that even casual movie enjoyers do go online and seek for convenience and simplicity when booking for seat in cinemas. Furthermore, frequent user problems that came up were: booking in groups in app, noisiness levels, disability areas, as well as best to worse seat location indicators.
User Research: Pain Points
1
Complicated
Apps or websites for seat reservations are often too cluttered with ads, memberships, foods, Complicates the user journey
2
Convenience
Last minute books, hard to find a good spot for single watchers. Members should get special reserved seats
3
Accessibility
Group seatings are nearly impossible when with friends and family. Apps does not cater or warn about disability/ impairment friendly, should go hand in hand with assistive technology
4
UI
Indicators/ Further details or descriptions about seats positioning is missing. Capacity levels of cinemas and cinema screen UI can be simplified
User Research: Personas
I created 2 Personas that reflect a general audience pool that I am creating the app for.
Fred is a part time student who needs to book movie seats weekly because on his days off, he routinely enjoys himself relaxing at cinemas and finds enjoyment through it.
Veronica is a full time retail shop worker
who needs to book cinema seats in spontaneity because convenience is important to her and she loves to make everyday count for her
User Research: User Journey Map
Creating the User Journey Map helped me outline the steps and patterns that a user may feel when using the app. This helped me reflect and empathize, further putting myself in the place of the users shoes.
User Research: Summary (5 Ws)
1. Who is experiencing the problem?
Fred, Movie enthusiasts, family organizer, is experiencing the problem.
2. What is the problem?
The problem is having too much information and cluttered UI in movie websites or apps, stressful to book seats.
3. Where does the problem show up?
The problem shows up when Fred use the a cinema app to book cinema seats and there are too much information and steps into booking a movie seat, it particularly happens when he is on the home screen of the app where Fred gets confused and overwhelmed.
4. When does the problem occur?
The problem occurs when Fred attempts to look for the movie he wants to watch and the time he wants to watch the movie on. The User Journey takes long and not simple to comprehend
5. Why is the problem important?
The problem is important to be addressed because the experience of navigating through the site will affect the user and could lead to stress and frustration. When a lot of advertisements or unnecessary distractions are present in the app, it creates a false sense of security and gives the users a negative impression of the apps validity and intentions in serving the customers needs and satisfaction. Especially if avid movie watchers or enthusiasts come for frequent entertainment, it will eventually affect their appeal to come back and book for future cinema seats, therefore it is important to have a simplified interaction and user journey to ensure that the experience is enjoyable and stress free for movie enthusiasts like Fred.
Paper Wireframe
Low-Fi Design: Wireframes
Low-Fi Design: Prototype
Low-Fi Design: Usability Studies
Round 1 Findings
1
Users want to book a seat reservation multiple times
2
Users want a login page
3
Users want clarity in reading the language (simplify)
Round 2 Findings
1
Buttons and Quantity Variable need Fixing.
2
Seat selection UI needs hover to be identified
3
Multiple movie options and labelling of time and dates are confusing
Refining: Mockup
Refining: More Mockups
Refining: UI Styles, Graphics and Typogaphy
Refining: Hi Fi Prototype
Refining: Accessibility
1
Convenience
Having Last minute booking seating sections as well as disabled sections only for the cinema seating bookings. Having these option on the screen with keys, accommodate inclusivity and a wider audience to benefit when using the App.
2
Accessibility Menu
An accessibility section in the Hamburger menu, where people can toggle them on or off.
3
Simplicity
Simplicity of 3 buttons for menu navigation in the app and the Contrast of the colors help keep the App less overwhelming. Keeping the minimalism theme.
The Outcome
Impact
I was able to close the gap of technology illiteracy between ages 30 to 40+ by providing options and back and forth alternatives in the user flow, some tactile animation feedback with buttons, to show they are in fact interacting with the interface correctly. Providing an OR at the end of the user journey also gave a satisfaction/ reaffirmation that the users have succeeded in their task.
Key Insights
For my first case study, I was able to understand that the gestalt principle played a key role. Space is king, especially for scalability, having a Design system is the pure core of a User Interface. Alongside Consistency, Hierarchy and Visual Balance.
Final Designs
Next Steps
For my next steps in this project, I will be attempting to resolve the feature to state the row and seat number whichever seat the user picks.
Another one will be the a more descriptive text or alt text to be generated whichever seat a user picks for accessibility reasons. This will have a curb effect and not only help the users who are less technologically advance or with slow loading, it will also guide any general user through the app easily and effectively.
Have an updating/ live and dynamic shopping cart as you progress through the stages of the user flow.
