Process
WAY OF WORK
My Design Process
I started my design process with user research interviews. Empathizing with users, I identified their needs in terms of personas. I then created user stories along with user journey maps to define the requirements.
Next, I explored some user flows to create wireframes and created a working prototype.
Testing the paper & digital prototype with users led to valuable feedback that helped with the creation of visual design and high-fidelity mockups
Research
CLARITY ON USER PROBLEM
User Interviews
To understand the current system and how it limits users to what they want, I conducted five interviews for research. The feedback from these interviews added clarity to the problem statement with valuable insights into user pain points.
User Interview Questions
1. How is the current booking system?
2. What issues do you face when you book seats?
3. Any feature(s) that would help with the process?
4. A feature that you think is a must to have?
User Research Summary
Pain Points
There is no way of selecting seat of choice while reservation.
People still need to get the tickets 30 mins before a show from the theater
Users have to either book through the website or call the theater directly.
Define
Ideate
THERE WAS THIS TIME
User Stories
After interviewing the potential users, I translated research findings into user personas that guided the way. I then brainstormed different user stories, identifying the core user story and app feature requirements for the MVP design.
User Story
User Story
Build
BUILDING THE BLOCK
From the lofi wireframes, I created a working prototype in Figma and shared the prototype with participants to test. Their feedback helped identify further pain points, gaps in usability, interface, and overall improvements in design.
Test
TESTING WITH USERS
Usability Testing
Next, I conducted two remote moderated usability studies with five participants to test the main highlights and drawbacks of the design so far. The participant's feedback helped me with further improvement in the overall design. The first study enabled me to find missing features in the lofi design and the second added value to the overall visual design in the final prototype.
User Feedback
The users wanted a way to search and filter movies from the home screen.
There was no distinction in payments. This was added in the last step of the process
Users wanted continuity of details as they moved along in each step. This was added across the reservation flow.
"The reservation flow was fairly quick and easy to complete."
Deliver
BRINGING IT TO LIFE
Visual Design
It was time to work on the visual design of the app. The users are looking for a simple and intuitive experience that lets them go through the reservation step, allowing them to select seats of choice. I designed the visual in such a way that it resonated with them.
Colors
I started playing with different colors to find the right color group, with yellow as the primary color found the right combination of blue and white that created a good visual balance. I divided the colors using a 60-30-10 ratio with some assistive colors to add value to visual cues for proper user feedback.
Typography
Poppins was chosen as the font for the app, being a geometric sans serif typeface it has many font weights and a clean font style. It is readable in almost all sizes and is excellent for emphasis.
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
BRINGING IT TO LIFE
UI Components
The user interface elements were designed from a basic structure from the design process and then enhanced in iterations from feedback and usability studies. The overall intended tone was to make the UI simple yet intuitive enough so that users complete their journeys.
THE INTERFACE
High Fidelity Design
THE INTERFACE
Getting Started
The welcome screen provides the user to log in or register a new account. The welcome screen emphasizes the quality service of the theater.
THE INTERFACE
App Home
Users can search, navigate and select a movie, find movies currently running in the theater or see upcoming ones. They can also navigate to their profile, and view current booking or their booking history.
THE INTERFACE
Preview Movie & Booking Seats
When the user selects a movie, a details screen opens up with the movie’s plot, cast, and trailer. The user is provided a button at the bottom to start the booking process.
THE INTERFACE
Seat Selection
The user can select seats of choice from the theater-wide view with a history indicator that indicates the user of the currently available, booked, and user-selected seats. A price chip at the end of the screen sums up the users per seat value. The confirmation screen provides a quick overview of the booking before payment.
LIVE IN ACTION
Reservation Flow
The prototype with the core flow of seat reservation.
The Takeaways & Next Steps
LESSON LEARNED AND FUTURE
Impact
The process has become quick and easy addressing the most important pain point for users which was of selecting the seat of their choice.
What I Learned
While designing the app, I learned that the first ideas are only the beginning of the process of creativity. Usability studies and peer feedback influences each iteration of the app’s designs.
Next Steps
Conduct another round of usability studies to validate addressed pain points resolution.
Research and apply considerations of our secondary user-persona group and update the core flow.
Conduct more user research to determine any new areas of need.
THE END
Thankyou 🙏🏻
I appreciate your time and attention, I hope you have liked the work and understood what I intended to do but still If you have any questions?