Framing the project
The problem:
The current application is poorly designed, and lacks a way to order food through the application.
The goal:
Simplify the User journey to purchase concessions through the app and redesign the ticket purchase flow as well as other general graphic changes.
Project Duration:
February - April 2022
Responsibilities:
User research, Wireframing, Prototyping, User testing
Understanding the User
-
All of UX design starts with the user in mind, using data-driven insights to create genuine value for Users
-
Personas help UX designers to better empathize with their users. These help to view user journeys in a new light and identify pain points.
-
Once a problem is identified, it must be clearly stated in a way that allows for multiple solutions.
-
Understanding how people actually interact with your work is the best way to gain valuable insights to improve your product.
User research: Summary
Initially, we wanted to understand what already existed, so we analyzed three major movie theater chain apps: AMC, Cinemark, and Regal Theaters. Of the three, only two of them offered any way to purchase any concessions through the app, and only one of them was easy to use.
Due to limited access to pertinent secondary data, we conducted a number of interviews with various people who enjoy ordering concessions at the movies. Through these interviews, we learned that users were generally unaware of the option to order through the app, and were open to the idea of ordering through the application while in theater to avoid lines.
User research: Pain points
-
This insight was very straightforward: no one wants to miss the movie to go stand in line; whether it is for a bathroom or to refill popcorn. Pre-show pickup and delivery options will be a key deciding factor on whether this feature is useful to people.
-
Simply put, people didn't know that there was the option to order through the app. Most people don't have it on their phone, but were willing to get it if they thought they would use the feature.
-
While considerably less important to younger generations, there is always going to be the possibility for people to inconvenience other moviegoers. Will have to optimize TOT and use dark interface.
Persona: The super-snacker
Goals:
Eating movie popcorn and soda is half the reason they come to the theater! They want to maximize on the free refills that come with their large purchases.
Frustrations:
They don’t want to miss a minute of their movie to refill their popcorn and drink.
End up sharing with kids/grandkids and not having enough to last them through the movie.
Problem statement:
The super-snacker is an avid movie-goer who needs to refill their snacks without leaving because they don't want to miss the movie!
User journey map:
Takeaways:
From this journey map we learned that people would order more food / refill food if they didn't have to leave the theater (and/or miss the movie) to do it.
Starting the design
-
By using paper wireframes, I was able to iterate quickly and get out a bunch of different design ideas without getting hung up on small details.
-
From the paper wireframes, I was able to select the ones that were the best and create a simple digital version. I referred to these wireframes in real-time on my phone to better understand what elements would need to be resized on mobile or desktop.
-
After the initial wireframes were made, I began to create connections and animations in Figma to simulate how the different screens would connect and create user flows.
-
Once the low-fidelity prototype was finished, I had several people try to complete various tasks and evaluate the ease of use. This allowed me to quickly identify problems and change them for the next iteration of the design.
Paper Wireframes
The initial exploration for wireframing was largely influenced on what other movie theater app screens used (nav bar placement, large movie spaces, etc.) as well as trying to find ways to reduce the number of screens that the user would see per flow.
Digital wireframes (V1)
Attempt number one with wireframing was essentially a translation from paper to reality. Some of the buttons were far too small, and the colors often caused readability issues.
Digital wireframes (V2)
Colors for wireframes was changed slightly to improve testing results. Higher contrast and larger fonts were used as well as first experimentations with color. These are not the final visuals, just a discussion point during testing.
Low-fidelity prototype (V2.2)
After doing a second round of wireframing based on initial feedback, a Low-Fidelity prototype was created to test out layout and interactions between screens. Rather than develop the entire app, I opted this time to simply focus on Movie Mode as it is the main flow. (Some connections were hidden for clarity)
Usability study: Findings
Round 1 findings
-
When attempting to use the various buttons and features, several people complained that they would miss-hit or that the buttons were difficult to use because of size. They were updated to be ADA acceptable for the next round of testing.
-
Because it was such a different function than anyone had seen before, they had a difficult time understanding the purpose and flow (Jakob’s law). This realization prompted a complete re-evaluation of whether the idea was worth pursuing.
-
While testing, the first volunteer noticed that the purchase flow for tickets and food were incomplete. The missing frames were completed immediately (P0) before further testing was completed.
-
After the second round of testing came back with the same results it was decided that while the feature was novel, it was not going to be a primary focus moving forward.
-
A few of the participants noted that there were significantly more options than they had ever seen in any movie theatre before. It was determined that since the update was theoretical, and would be location specific, that the infrastructure was more important than an accurate number of food choices.
-
Description text goes here
Round 2 findings
Digital wireframes (V3)
After user testing, I decided to remove the Movie Mode feature and simplify the application to feature only core functions. I also began to explore graphic styles a little to improve results with further testing.
Refining the Design
-
This step was more about experimenting with a variety of graphic styles as the Low / Mid fidelity prototypes were built with the HiFi in mind. The largest part of this phase was to find assets to fill out the spaces in the application.
-
After a style was decided upon, links were drawn in the software that connected all of the separate windows together. This made it so that we could do another round of informal testing.
-
Accessibility was a major focus while in the early steps of development, so at this stage, there were nearly no changes that needed to be made.
Mockups
After two rounds of user testing, the Movie Mode feature was abandoned in favor of simply cleaning up the app and improving functionality. Visual clarity and contrast were also updated to improve results during testing and start developing a style for final application.
Mockups
Since initially the app was designed to be used in a near-dark environment, orange was used to be easier on the eyes, and create less light pollution. After the feature was tested, the color was switched to white to improve contrast and legibility as well as give more visual weight to call-to-action buttons.
Mockups (Final)
High-fidelity prototype (V3.4)
At this point, all placeholders were replaced with actual images, and the graphic style was developed further. Component nesting had to be reworked a little to allow for better interactions while selecting food (both while purchasing tickets and while ordering “in-theater”). The prototype at this point is about 80% of a final application that could be developed. Animations were also added at certain points to help the user have a better experience while exploring the app.
Going forward
-
When compared to the existing Regal Cinema application, the new one has a much simpler architecture, and has been updated graphically to ease use. It also allows for the purchase of concessions through the app, which provides new value to customers.
This was my first exposure to Figma as a prototyping tool, which means that I learned a great deal about how to make effective connections and components. I also learned how the iterative design process is used constantly while designing for UX.
-
The Regal Rewards program section of the application will be developed out and be a second flow that works.
Due to limitations within the program I was unable to effectively design an “add to cart” system that was very robust. I would love to do this portion again so that it works better
Some of the transitions between screens were created with overlays to keep certain elements in place. In the future I would probably want to create nested master components to get a similar effect without animation problems.