Movie Seats Responsive Website Design
GOOGLE CERTIFICATE PROJECT
ROLE: UX Designer
SUMMARY: I designed a responsive website for users to buy movie tickets and reserve seats
USER INTERVIEWS: Through user interviews I conducted, users wanted the website to be easy to navigate and to have a quick process to buy tickets to avoid having to spend too much time completing the task. Often, users wanted to go to a movie with friends to see movie premieres or other popular movies, but often it was hard to ensure you are going to have seats together.
ROLE: UX Designer
SUMMARY: I designed a responsive website for users to buy movie tickets and reserve seats
USER INTERVIEWS: Through user interviews I conducted, users wanted the website to be easy to navigate and to have a quick process to buy tickets to avoid having to spend too much time completing the task. Often, users wanted to go to a movie with friends to see movie premieres or other popular movies, but often it was hard to ensure you are going to have seats together.
INITIAL DESIGN PHASE
I designed a site map to show how the flow of the website is intended to go. Then, I created wireframes of the desktop website using Adobe XD to showcase the proposed layout of the website design. I created a prototype shown below to demonstrate the flow of the layout through a series of interactions with links.
Low Fidelity Prototype
USABILITY STUDY: FINDINGS
I conducted two usability studies first using my low-fidelity prototype wireframes, then using the high-fidelity prototype with mockups.
MOCKUPS:
UPDATED FROM USABILITY STUDIES
Before Usability Study
After Usability Study:
Added a carousel for the hero image, shopping cart and location
Added a carousel for the hero image, shopping cart and location
Before Usability Study
After Usability Study:
I initially added each movie under the theater name, but users had said it was too much scrolling to get to the movie they wanted. This new design showcases the movies at the theater for users to click on to view more times.
I initially added each movie under the theater name, but users had said it was too much scrolling to get to the movie they wanted. This new design showcases the movies at the theater for users to click on to view more times.
Before Usability Study
After Usability Study:
I added icons for handicap accessible seats for clarity. I kept the color contrast to choose seats for better accessibility to distinguish reserved vs. selected seats
I added icons for handicap accessible seats for clarity. I kept the color contrast to choose seats for better accessibility to distinguish reserved vs. selected seats
HIGH-FIDELITY PROTOTYPE
IMPACT
It was important for users to have an easy way to buy movie tickets, ensure they are sitting with people they want to, the ability to choose seats they want, and not have to wait at the theater early to make sure all of those things happen. With this website, users are able to easily order tickets and choose the seats they want, making an easier experience for movie-goers.
It was important for users to have an easy way to buy movie tickets, ensure they are sitting with people they want to, the ability to choose seats they want, and not have to wait at the theater early to make sure all of those things happen. With this website, users are able to easily order tickets and choose the seats they want, making an easier experience for movie-goers.
WHAT I LEARNED
Testing the prototype is key to making the website more user-friendly. Without that specific feedback about the design and its usability, the website would not be as effective as it is with users giving their perspectives.
Testing the prototype is key to making the website more user-friendly. Without that specific feedback about the design and its usability, the website would not be as effective as it is with users giving their perspectives.
