CINIMAX
Crafting an intuitive process for the reservation of seats digitally
UX Case Study
CINIMAX
Crafting an intuitive process for the reservation of seats digitally
UX Case Study
CINIMAX
Crafting an intuitive process for the reservation of seats digitally
UX Case Study
Role
UX Designer, UX Researcher
Tools
Figma, FigJam, Google Suite, Jamboard, Whimsical
Responsibilities
Ideation, User Research, User Interviews, Wireframing, Usability Studies, Prototyping
Role
UX Designer, UX Researcher
Tools
Figma, FigJam, Google Suite, Jamboard, Whimsical
Responsibilities
Ideation, User Research, User Interviews, Wireframing, Usability Studies, Prototyping
Role
UX Designer, UX Researcher
Tools
Figma, FigJam, Google Suite, Jamboard, Whimsical
Responsibilities
Ideation, User Research, User Interviews, Wireframing, Usability Studies, Prototyping
Overview
Being a huge Marvel fan, I eagerly looked forward to watching the epic movies in theaters. But there was a big problem – reserving seats was a pain. The options available were complicated websites that didn't give enough information about where the seats were located. This became especially troublesome when I wanted to go with my friends, as it was hard to find seats together.
Determined to improve the booking experience, I came up with a solution. An app that not only offered digital tickets and a booking history but also made it easy to choose seats. So, I designed a simple interface that allowed moviegoers to see which seats were available in real time and visualize the theater layout.
This way, movie fans like me could finally reserve our favorite spots in the theater and enjoy incredible movies together with our friends.
Problem
Reserving seats of choice is not possible with the current solutions.
Solution
Design an app that makes the seat reservation process easy and intuitive.
Mobile App
Provide real-time availability
Visualize theater layout
Enable seat selection
Offer digital tickets
Track booking history
Overview
Being a huge Marvel fan, I eagerly looked forward to watching the epic movies in theaters. But there was a big problem – reserving seats was a pain. The options available were complicated websites that didn't give enough information about where the seats were located. This became especially troublesome when I wanted to go with my friends, as it was hard to find seats together.
Determined to improve the booking experience, I came up with a solution. An app that not only offered digital tickets and a booking history but also made it easy to choose seats. So, I designed a simple interface that allowed moviegoers to see which seats were available in real time and visualize the theater layout.
This way, movie fans like me could finally reserve our favorite spots in the theater and enjoy incredible movies together with our friends.
Problem
Reserving seats of choice is not possible with the current solutions.
Solution
Design an app that makes the seat reservation process easy and intuitive.
Mobile App
Provide real-time availability
Visualize theater layout
Enable seat selection
Offer digital tickets
Track booking history
Overview
Being a huge Marvel fan, I eagerly looked forward to watching the epic movies in theaters. But there was a big problem – reserving seats was a pain. The options available were complicated websites that didn't give enough information about where the seats were located. This became especially troublesome when I wanted to go with my friends, as it was hard to find seats together.
Determined to improve the booking experience, I came up with a solution. An app that not only offered digital tickets and a booking history but also made it easy to choose seats. So, I designed a simple interface that allowed moviegoers to see which seats were available in real time and visualize the theater layout.
This way, movie fans like me could finally reserve our favorite spots in the theater and enjoy incredible movies together with our friends.
Problem
Reserving seats of choice is not possible with the current solutions.
Solution
Design an app that makes the seat reservation process easy and intuitive.
Mobile App
Provide real-time availability
Visualize theater layout
Enable seat selection
Offer digital tickets
Track booking history
Skip Everything & See the Work
If you want to directly see the final prototype then here you go.
Skip Everything & See the Work
If you want to directly see the final prototype then here you go.
Skip Everything & See the Work
If you want to directly see the final prototype then here you go.
Design Process
While I followed the design thinking process, I didn't stick to a strict plan. Instead, I took notes on existing solutions, both good and bad examples of how things look on screens, just to get my creative ideas flowing. This helped me brainstorm different ways to overcome challenges I might encounter and explore solutions that worked well for similar problems in the past.
Even though I felt confident in my design choices, I made sure to do more research and gather feedback from users to validate my decisions. This helped me improve and refine my work based on real insights. I also had an agile mindset, which means I was open to continue making things better.
While I followed the design thinking process, I didn't stick to a strict plan. Instead, I took notes on existing solutions, both good and bad examples of how things look on screens, just to get my creative ideas flowing. This helped me brainstorm different ways to overcome challenges I might encounter and explore solutions that worked well for similar problems in the past.
Even though I felt confident in my design choices, I made sure to do more research and gather feedback from users to validate my decisions. This helped me improve and refine my work based on real insights. I also had an agile mindset, which means I was open to continue making things better.
1. Research
2. Define
3. Ideate
4. Build & Test
5. Design
Research
To gain insights into the challenges users faced with existing solutions and their desired improvements, I conducted unmoderated interviews. I crafted a set of questions and requested participants to record themselves while answering. In cases where the recording was not possible, I provided an assistive document outlining how they could effectively share their thoughts. This approach allowed me to gather valuable user research without the need for direct moderation, keeping the process efficient and informative. I had two main goals from these interview sessions.
Understand the limitations and issues of the current experience
Validate our idea and need for creating an app
I conducted an unmoderated study involving 5 participants, who love cinematic experiences across different age groups (15-64).
To gain insights into the challenges users faced with existing solutions and their desired improvements, I conducted unmoderated interviews. I crafted a set of questions and requested participants to record themselves while answering. In cases where the recording was not possible, I provided an assistive document outlining how they could effectively share their thoughts. This approach allowed me to gather valuable user research without the need for direct moderation, keeping the process efficient and informative. I had two main goals from these interview sessions.
Understand the limitations and issues of the current experience
Validate our idea and need for creating an app
I conducted an unmoderated study involving 5 participants, who love cinematic experiences across different age groups (15-64).
100% of people wanted the ability to select their seats of choice.
100% of people wanted the ability to select their seats of choice.
The insight highlighted the importance of a more enhanced booking experience as a top priority.
The insight highlighted the importance of a more enhanced booking experience as a top priority.
80% of people felt that the current experience needs improvement.
80% of people felt that the current experience needs improvement.
Most people wanted to have a more intuitive and friendly experience of the whole process.
Most people wanted to have a more intuitive and friendly experience of the whole process.
40% of people shared that they would love to have digital tickets.
40% of people shared that they would love to have digital tickets.
A few people wanted to have digital tickets so that they can send them to others for whom they had bought.
A few people wanted to have digital tickets so that they can send them to others for whom they had bought.
Define
After confirming the viability of the idea and understanding what users want, I began outlining our app's goals by focusing on the following:
Clearly defining the intended users for whom we will design the app.
Planning how to organize and present the content in a logical and easy-to-understand way.
Creating a list of features to include in the app based on our previous research.
Visualizing different design options and prioritizing the user experience to ensure a seamless and enjoyable journey for our users.
After confirming the viability of the idea and understanding what users want, I began outlining our app's goals by focusing on the following:
Clearly defining the intended users for whom we will design the app.
Planning how to organize and present the content in a logical and easy-to-understand way.
Creating a list of features to include in the app based on our previous research.
Visualizing different design options and prioritizing the user experience to ensure a seamless and enjoyable journey for our users.
User Personas
To represent the target users of our solution, I created two personas. Junaid embodied the characteristics of an average user who desired a movie night out with friends, while Reeba had a more complex situation, seeking to introduce her children to the cinema experience.
Moving forward, I decided to focus on Junaid as the primary persona since his needs aligned directly with the priority features and served as a solid foundation for designing the MVP flow of the app. Reeba's needs could be addressed in future design updates of the app.
To represent the target users of our solution, I created two personas. Junaid embodied the characteristics of an average user who desired a movie night out with friends, while Reeba had a more complex situation, seeking to introduce her children to the cinema experience.
Moving forward, I decided to focus on Junaid as the primary persona since his needs aligned directly with the priority features and served as a solid foundation for designing the MVP flow of the app. Reeba's needs could be addressed in future design updates of the app.
Feature Prioritization
Based on the previous research, I compiled a list of key features for the MVP design of the app. The features that would be included are:
Seat Selection: Users can choose their preferred seats when booking tickets.
Digital Tickets: The app offers electronic tickets that can be conveniently accessed and presented at the theater.
Booking History: Users can view their past movie bookings and relevant details.
These features were prioritized based on their importance and relevance to providing a seamless and user-friendly cinema booking experience.
Based on the previous research, I compiled a list of key features for the MVP design of the app. The features that would be included are:
Seat Selection: Users can choose their preferred seats when booking tickets.
Digital Tickets: The app offers electronic tickets that can be conveniently accessed and presented at the theater.
Booking History: Users can view their past movie bookings and relevant details.
These features were prioritized based on their importance and relevance to providing a seamless and user-friendly cinema booking experience.
Ideate
After finalizing the planned features, I sketched out initial screens on paper to visualize the app's views. This step enabled me to explore various layouts, element positioning, and overall screen organization. Through this iterative process, I was able to experiment, improve, and fine-tune the designs.
Once I had a clear understanding of the user flows from the paper sketches, I proceeded to create digital wireframes. This transition from sketches to digital wireframes allowed me to further refine the designs, enhancing clarity and providing a more precise representation of the app's structure and interactions.
After finalizing the planned features, I sketched out initial screens on paper to visualize the app's views. This step enabled me to explore various layouts, element positioning, and overall screen organization. Through this iterative process, I was able to experiment, improve, and fine-tune the designs.
Once I had a clear understanding of the user flows from the paper sketches, I proceeded to create digital wireframes. This transition from sketches to digital wireframes allowed me to further refine the designs, enhancing clarity and providing a more precise representation of the app's structure and interactions.
Paper Wireframes
Digital Wireframes
Build & Test
Before proceeding to the visual design stage, I conducted user testing to validate the decisions I made in solving the main problem of seat reservation. The goal was to assess the ease of reserving seats and identify any missing elements or potential issues in the process or related flows. To facilitate this testing, I created a low-fidelity prototype that allowed users to interact with the app and provide valuable feedback on their experience.
I conducted an unmoderated study involving 5 participants from my friends and family, who love cinematic experiences across different age groups (15-64), this time instead of sharing ideas they had a lofi prototype to test and provide feedback.
Before proceeding to the visual design stage, I conducted user testing to validate the decisions I made in solving the main problem of seat reservation. The goal was to assess the ease of reserving seats and identify any missing elements or potential issues in the process or related flows. To facilitate this testing, I created a low-fidelity prototype that allowed users to interact with the app and provide valuable feedback on their experience.
I conducted an unmoderated study involving 5 participants from my friends and family, who love cinematic experiences across different age groups (15-64), this time instead of sharing ideas they had a lofi prototype to test and provide feedback.
User testing
The summarized insights from user testing were:
Users wanted an easier way to search and filter movies directly from the home screen.
Clear payment options were lacking, leading to confusion during the reservation process.
Users valued the continuity of details throughout the reservation flow for a seamless experience.
The summarized insights from user testing were:
Users wanted an easier way to search and filter movies directly from the home screen.
Clear payment options were lacking, leading to confusion during the reservation process.
Users valued the continuity of details throughout the reservation flow for a seamless experience.
80% of users found the task of reserving seats easy to complete
20% faced minor difficulties due to missing cues of cinema screen orientation.
These insights highlighted the importance of improving movie search functionality, providing clear payment options, ensuring consistent details, and enhancing visual cues for optimal user experience.
These insights highlighted the importance of improving movie search functionality, providing clear payment options, ensuring consistent details, and enhancing visual cues for optimal user experience.
Design
I started building the UI for the app after testing my designs with users and getting information from a usability study on a low-fidelity prototype. I created the UI of one screen with complete UI elements, experimenting with colors, typography, and visual hierarchy. Once I had the right combination of visual elements, I moved the components to the sticker sheet with text and color styles. I then built out the complete flow. In this way, I iteratively built up a small sticker sheet with needs of refinement and changes that would help design consistency.
I started building the UI for the app after testing my designs with users and getting information from a usability study on a low-fidelity prototype. I created the UI of one screen with complete UI elements, experimenting with colors, typography, and visual hierarchy. Once I had the right combination of visual elements, I moved the components to the sticker sheet with text and color styles. I then built out the complete flow. In this way, I iteratively built up a small sticker sheet with needs of refinement and changes that would help design consistency.
Colors & Typography
To create an appealing visual design for the app, I experimented with different colors and found that yellow worked well as the primary color. I then combined it with a balanced mix of blue and white, creating a visually pleasing color palette. To ensure proper visual cues and user feedback, I divided the colors using a 60-30-10 ratio and incorporated additional assistive colors.
For the font selection, I chose Poppins, a geometric sans serif typeface. It offers various font weights and a clean style, making it highly readable in different sizes. Poppins are particularly effective for adding emphasis and maintaining legibility throughout the app.
To create an appealing visual design for the app, I experimented with different colors and found that yellow worked well as the primary color. I then combined it with a balanced mix of blue and white, creating a visually pleasing color palette. To ensure proper visual cues and user feedback, I divided the colors using a 60-30-10 ratio and incorporated additional assistive colors.
For the font selection, I chose Poppins, a geometric sans serif typeface. It offers various font weights and a clean style, making it highly readable in different sizes. Poppins are particularly effective for adding emphasis and maintaining legibility throughout the app.
Colors
10%
#0D2C54
10%
#0D2C54
30%
#F5AA39
30%
#F5AA39
60%
#F7F5F2
60%
#F7F5F2
#BC3030
#BC3030
#958F8F
#958F8F
#F4B400
#F4B400
Typography
Aa
Aa
Poppins - Medium
Poppins - Bold
Poppins - Semi Bold
Poppins - Regular
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Sticker Sheet
End To End Flow - Reserving Seats
By consistently working on the designs, I successfully completed the core flow of seat reservations, which encompassed the entire process from listing to selecting and reserving seats
By consistently working on the designs, I successfully completed the core flow of seat reservations, which encompassed the entire process from listing to selecting and reserving seats
Results, Learnings & Next Steps
I accomplished the MVP design of the app by implementing the complete flow for seat reservations. This involved creating an intuitive user experience that allowed users to seamlessly navigate through the app, select their desired seats, and complete the reservation process.
During the app design phase, I discovered that initial ideas are just the starting point of the creative process. Iterations were influenced by usability studies and feedback from peers, allowing for continuous improvement. I also explored creating a sticker sheet for reusable components to enhance consistency across the app.
Moving forward, my plan includes conducting another round of usability studies to further refine the UI and interaction design. I will focus on addressing the needs of the secondary persona and incorporate additional features based on their requirements. Additionally, I will conduct further research to identify new areas of need and potential enhancements for the app.
I accomplished the MVP design of the app by implementing the complete flow for seat reservations. This involved creating an intuitive user experience that allowed users to seamlessly navigate through the app, select their desired seats, and complete the reservation process.
During the app design phase, I discovered that initial ideas are just the starting point of the creative process. Iterations were influenced by usability studies and feedback from peers, allowing for continuous improvement. I also explored creating a sticker sheet for reusable components to enhance consistency across the app.
Moving forward, my plan includes conducting another round of usability studies to further refine the UI and interaction design. I will focus on addressing the needs of the secondary persona and incorporate additional features based on their requirements. Additionally, I will conduct further research to identify new areas of need and potential enhancements for the app.
THE END
Thankyou 🙏🏻
I appreciate your time and attention, I hope you have liked the work. Want to share your thoughts?
I appreciate your time and attention, I hope you have liked the work. Want to share your thoughts?
