Portfolio Project 2: Mid-Movie Snack Buying Responsive Website

Larry Rhodes · October 01, 2021 · Deployment · 0 comments

The Product: I designed a mid-movie snack buying responsive website for a trendy movie theater.

Project duration: August 2021 – September 2021

The Problem:

Movie-goers want to be able to refresh their drinks and order food and snacks without having to leave their seats and risk missing important or interesting parts of the movie.

The Goal:

To design a responsive website that will allow movie-goers the ability to order snacks during the movie without having to leave their seat.

My Role: UX designer leading the responsive website design from beginning to end.

Responsibilities: Interviews, wireframing, low and high-fidelity prototyping, conducting usability studies, taking accessibility into consideration, design iteration, information architecture, and responsive design

User Research Summary: I used competitive auditing to develop interview questions, which were then used to conduct user interviews. Interview participants were avid movie-goers that typically ordered food and snacks when going to the theater.

User Research: Pain Points

Time

Missed Movie

Lines are too long at the concession stands.

Movie-goers can potentially miss important parts of the movie.

Convenience

Repetition

Ordering takes too long at the concession stands.

Movie-goers don’t enjoy repeating their order every visit.

Persona: Stephen

Problem Statement:

Stephen is an avid movie-goer who needs a convenient way to order food and snacks without leaving his seat at the theater because he doesn’t want to risk missing any of the movie.

User Journey Map:

Mapping Stephen’s user journey revealed how helpful it would be for users to have quick access to the app as well as convenient ways to order and pay for their food & snacks.

Paper Wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to the digital wireframes would be well-suited to address user pain points.

With the responsive website easy access to the important main elements, whether on a tablet of mobile phone, were key.

Digital Wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. easy navigation, front and center on the homepage.

For the responsive mobile theme it was important to keep the main elements of the desktop website accessible. Users can access the website’s navigation via the hamburger menu in the top left header, as well as scroll through main images and summaries of food & snacks, and search for key words in the footer.

Low-Fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was searching, selecting, and paying for food & snacks, so the prototype could be used in a usability study.

View the Movie Snack App Low-fidelity prototype by >>>clicking here<<<

Usability Study: Parameters

Study Type: Unmoderated

Location: Cape Girardeau, MO

5 Participants: 3 females, 2 males between the ages of 25 and 50

Length: < 20 minutes per participant

Usability Study: Findings

Cart

Account

Users needed to review their orders before finalizing them.

Users wanted an easy way to update and upload additional information for payment options as well as food & drink preferences.

Mockups

Cart: Users needed to review their orders before finalizing them. Instead of just returning to the home screen after clicking on their selections. Users can now review their entire order before proceeding.

Account: Users wanted an easy way to update and upload additional information for payment options as well as food & drink preferences. Now users have a way to update their food & snack preferences as well as other options in an account menu. This also helps to speed up the ordering process in the future which was one of the user pain points since the information is already stored.

Mockups: Original Screen Sizes

Mockups: Screen Size Variations

High-Fidelity Prototype

The final high-fidelity prototype guides the user to the most important elements and reinforces them with visual cues and summaries at the bottom of the homepage.

View the Movie Snack App High-fidelity prototype by >>>clicking here<<<

Accessibility Considerations

The addition of alternative text to images provides additional aid for users that may be hearing impaired.

Used icons to help make navigation easier.

High-contrast colors and the use of white space to help the visually impaired and provide a clean and modern aesthetic.

Takeaways

Impact: The movie snack allows users to easily search, select, and pay for their food, drinks, and snacks without having to risk missing parts of their favorite movie and interrupting the theater experience.

“Great design!”

Participant Feedback

What I learned: Projects that coincide with my own interest are the best! As an avid movie-goer myself, I’ve often through about projects like this and have experienced variations of it in other cities. Despite having knowledge beforehand, I learned a lot about the behavior of users and the importance of attractive and simple design.

Next Steps

Conduct more user research to determine any new areas of need.

Conduct another round of usability studies to locate any user pain points I may not have addressed.

Build on current designs with supporting imagery and descriptions for each movie/snack category and package.

Let’s Connect!

Thank you for taking the time to review my work on the Movie Snack App! If you’d like to see more of get in touch, feel free to contact me by >>>clicking here<<<

Leave a Comment!

Your email address will not be published.