JRT WEBSITE DESIGN
The problem
Available online movie theater services have inefficient designs for browsing through products, difficult checkout processes, and confusing confirmation statuses.
The goal
Design a JRT's website to be user friendly by providing a simple and efficient movie ticket and food ordering process all in one place.
The product
JRT is a retro movie theater that offers an order online and pick up in store food ordering service. The typical user is between the ages of 18-40 years old, and most users are college students or young adults. JRT's goal is to provide a fast, fun, and easy-to-use movie ticket and snacker experience for all users.
Role
UX Designer leading the JRT's website design
Project duration
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, iterating on designs, and creating responsive designs
December 2021 to February 2022
BACKROUND
Understanding the user
I conducted interviews, which I then turned into empathy maps to better understand the target users and their needs. I discovered that many target users treat online theater experiences as an efficient way to order tickets to avoid the line when arriving at the theater. However, many theater website experiences have inconsistent and overwhelming designs, which made it difficult to navigate. This caused a normal experience to become difficult, defeating the purpose of making the process quick and efficient.
Persona
Persona: David is a sales manager in Mesa, Arizona. David spends about 45 hours a week working, so he is often exhausted when he gets home. He has two children ages 3 and 8, which he loves to spend time with. David loves to do activities with his children in his free time, such as going to the movies, which he can include both children.
Age: 34
Education: Bachelors degree
Hometown: Tempe, AZ, U.S.A.
Family: Married, 2 children
Occupation: Sales Manager
Goals:
-Reserve food and drinks online without any issues
-Have food available for pickup when arriving at the movie theater
Frustrations:
"The concessions line is always much longer than I anticipate, which causes me to miss the movie trailers - one of my favorite parts of the movie theater experience"
User journey map
I created a user journey map for David's experience using the website to help identify possible pain points and improvement opportunities.
User pain points
Call-to-action
Small buttons on movie theater websites are often misleading and/ or make users more prone to making mistakes within their clicking actions
Navigation
Movie theater websites are often unorganized, which result in confusing navigation
Experience
Movie theater websites often don't provide an engaging experience
User pain points
DESIGN PHASE 1
Starting the design
Site map
In order to comply with user concerns with website navigation, I created a sitemap. The goal of creating this sitemap was to ensure that users would be able to follow a logical series of webpages to complete tasks in a quick and easy manner.
Digital wireframes
Designing for accessible buttons, easy navigation, and customer interaction was a key part of my strategy.
The labels at the top of the screen allow for easy navigation
Desktop wireframe
The "Get tickets" button is large enough for most users to understand how to purchase a movie ticket
Screen size variations
Usability study findings
To start testing the designs I created a low-fidelity prototype. This prototype was used in an unmoderated usability study with 5 participants. Here are the main findings uncovered by the usability study:
1. Lack of information
Users felt that the home page lacked information about the movies which made it difficult to know if they would want to see the movies displayed.
2. Ticket confirmation
Users would like to see their ticket displayed on the screen once they complete the purchase.
3. Navigation
Users liked the navigation at the top of the movies. They stated that they don't have any suggestions to improve the navigation.
DESIGN PHASE 2
Refining the design
Mock ups
To give users more information about the movies on the home page I added the same text that would be displayed if they were to click on the "Get tickets" button. This also allows for a more consistent design across the browser.
Before usability study
After usability study
Before the usability study, the order confirmation only displayed an image of the movie, which users preferred a ticket display instead. To adhere to their needs, I redesigned the confirmation page which now displays their ticket and can be easily screen-shotted, printed, or saved to their device.
Before usability study 2
After usability study 2
Screen size variations
I included potential screen size variation mock ups, which I had previously designed in my digital wireframes. There is a large chance that users are shopping from different devices, so it is important to consider the reconstructed layout for devices such as a tablet or iPhone.
Desktop
Tablet
iPhone
High fidelity prototype
My high-fidelity prototype followed the same design and user flow of my low-fidelity prototype. I incorporated feedback based on the usability study as well as provided additional screens for a more complete user experience.
View the JRT high fidelity prototype
LOOKING BACK
Take aways
Impact
Users stated that the website design was easy to navigate through, making the process of ordering movie tickets and snacks quick and easy.
One quote from Participant B:
“I love how simple the design is - the less words I have to read, the easier it is for me to browse through a website."
What I learned
I learned that keeping the users at the center of the design process will significantly improve how they interact with a product. I also learned that designing responsive devices can be very challenging, but it was very fun for me to use my creativity and reimagine the way that elements could be placed in a different environment.
GOING FORWARD
Next steps
1. Usability study
Conducting an additional usability study on this website will help me further improve my design. This will also allow for a more accurate understanding of the user's pain points due to the website being further along in the design process.
2. Iterate on designs
I will continue to iterate on the current designs that I have with the goal of improving usability, functionality and aesthetics in order to provide a more accurate representation of what I would like the website and responsive devices to represent.
Thanks for visiting!
If you like what you see and would like to work together, lets connect!
or