Reel House:
Seat Reservation Website
Gabriel Peguero
Team:
Gabriel Peguero - Creator and Designer
The product:
I designed and created a responsive website that would make it easy for patrons to not only reserve seats but send seating information to other patrons who will also attend the same showing. Purchased tickets could also be sent to said patron.
Project Overview
Project duration:
March 2022
Preview of selected polished designs.
The problem:
Seat reservation websites are often cumbersome and confusing to use and often don’t have features to share information .
Project overview
The goal:
To create a seat reservation website for a local movie theater that is easy to use and can be used by third parties to buy tickets for someone else.
My role:
Lead UX Designer
UX Researcher
Project overview
Responsibilities:
Responsibilities for the entire project included: user research, wireframing, prototyping, and conducting remote user testing.
Understanding
the user
User research: Summary
In the research that was conducted first using survey and through a usability study we found that some users don’t necessarily use websites to reserve seat but use apps or mobile websites. The website also has to be clear and easy to use. Users also would like to see payment options and a faster experience.
User research: pain points
Slow
This issue will be addressed by making the reservation process quick with as few screens as possible.
Cumbersome
We will make the website where the user will not be bogged down having to fill out redundant information.
Few Payment Options
A multitude of payment options will be available from one time payment to flex-pay.
Not Sharable
Users will be able to send tickets to a third or multiple people who will be attending the same or desired showing.
1
2
3
4
Persona: Mary
Problem statement:
Mary is a Director for a Non-Profit who needs an easy way to reserve seats for her mom at her favorite theater and then send her the seating information.
User journey map
Image of user journey map
I created a user journey map of Mary using the website to identify possible pain points and opportunities for improvement.
Starting
the design
Sitemap
Navigation, ease of use and shareability of seat reservation with others were the primary pain points. I created a sitemap to make the site easier to navigate and more consumer friendly.
Image of sitemap/IA
Paper wireframes
I sketched out several wireframes of the home page and how the users would select the seats they would be seeking to reserve. Several iterations for the seat selection page were created. Parts were chosen and combined into the site’s design.
Paper wireframe
screen size variation(s)
Users were also seeking a seamless app-like experience, I worked on creating responsive for various screen sizes ensuring the site was would be viewable across all devices.
Digital wireframes
Going from paper wireframes to digital wireframes understanding user pain points was made easier, taken into account and used to make improvements.
Placing elements in key areas and using visuals made the user experience easier and more engaging.
Reserve seats right on the homepage.
See all movies not shown in one click.
Digital wireframe
screen size variation(s)
Discovering that most users reserve seats using their mobile devices, the site was created to adapt to different screen sizes from tablets to cell phones.
Low-fidelity prototype
A low-fidelity prototype was created by connecting all screens involved in the primary user flow of reserving seats.
This is the phase where I received feedback from my survey participants. Listening to the feedback they gave, I implemented several changes that addressed their pain points.
View Prototype Here
Usability study: Parameters
Study type:
Unmoderated remote usability study
Location:
United States, remote
Participants:
5 participants
Length:
10-15 minutes
Usability study: findings
During the study, it was discovered that users wanted more flexible payment options.
Payment Options
Visual Previews
Share Seats
Users would have liked to have seen a visual of where their seat(s) would be and the view they would have of the event.
The ability to send seating information to a friend or family member.
1
2
3
Refining
the design
Mockups
As a result of the usability study, changes were made to allow the buyer to send tickets to a third party member. This allowed made it easier for the main buy to reserve and send seats for a third party from a remote location.
Mockup 1 before
Mockup 1 after
Before usability study
After usability study
Mockups
To allow the user more payment options a dropdown link was placed in the payment method area.
Mockup 2 before
Mockup 2 after
Before usability study
After usability study
Mockups: Original screen size
Main mockup screen for display
Main mockup screen for display
Main mockup screen for display
Main mockup screen for display
Mockups: Screen size variations
It was discovered that users might not be on a desktop when placing a reserve on seats the site was made to be responsive and fit on a variety of mobile screens. This provided the user with an app like experience and enabled them to use the same site on a mobile phone or tablet.
High-fidelity�prototype
The High-fidelity prototype follows the same user flow as the low-fidelity prototype. However, edits were made from the feedback given during usability testing.
Accessibility considerations
Headings with different sized texts was used for visual hierarchy.
Alt text was provided and made standard for all images for a improved screen reader access.
1
2
Going forward
Takeaways
Impact:
Our users found the site easy to use and pleasing on the eyes. They enjoyed how they can share seating information with others not in their city and the payment options.
What I learned:
I learned that users want flexibility and options when placing an order or reservations. Also users might not all be using the same type of device when access the service they are seeking.
Next steps
Conduct a usability follow test on the new website.
1
2
Identify any additional areas of need and idate on new features
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 reviewing my work on Reel House seat reservation website.
If you would like to get in touch, feel free to reach out using the contact information below:
Email: gpeg84@yahoo.com
Website: www.gpegdesigns.com