UX/UI Designer

StarMovie

Project Context

  • Project generated by Sharpen for Google UX Certificate Course

  • Solo UX/UI design project

  • May 2022 (4 weeks)

Responsibilities

  • Conducting research, interviews, and usability studies

  • Wireframing and prototyping

  • Iterating on designs


The Problem: Long lines at the concession stands causes customers to miss part of the movie

StarMovie is local theater in the suburbs of a metropolitan area. Their target customers are family and friends who loves going to the movies. StarMovie wishes to design a snack ordering app for their users. By creating an app, movie-goers will have an easier and quicker way to order their favorite movie snacks!


Understanding the users

I conducted interviews and created a journey map to understand the users I’m designing for and to meet their needs. The primary user group identified through research were users tend to arrive late to the movies and want to quickly pick up their snacks before heading into the theater room. This user group confirm initial assumptions about StarMovie customers, but research also showed that other user problems were trying to navigate through the app. Here are the main pain points:

The Painpoints

The Persona

User Journey Map


Starting the Design

With the users in mind, I also conducted a competitive audit with both direct and indirect competitors. While AMC Theaters and iPic’s designs were pleasing to the eye, the flow required a lot of steps for users to order snacks. Then utilizing the improvement opportunities, I started to sketch out ideas for a simpler and straight-forward navigation.


Refining the Design

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study was over the high-fidelity prototype and revealed what aspects of the mockups needed refining. Overall, I had positive feedback from my peer-reviews with only a few UI changes came about:

  • The second usability study revealed that users did not know if an item was successfully added to cart. With that, I added a new frame and overlay it with “item added” after user adds an item to cart.

  • It was difficult for some users to find cues on buttons. Thus, I added contrast in buttons and tabs for easy user navigations.

  • Originally, the checkout process had the items in cart along with the method of payment at the bottom. However, it was reported that having a separate screen for the payment process was preferred.


Final Prototype with added revisions


Reflections + What I would do differently…

  • Consider assistive technology. My goal is always to design with as much empathy as possible and to meet the needs of the users. However, I also need to remember to design for people with disabilities and create an all inclusive design. For example, I would provide access to users who are vision impaired by adding alt text to images for screen readers.

  • Learn more about design theory. While this was my first project for the Google UX Certificate Course, there is so much more I needed to learn about design. Going forward, I want to dive deeper into typography, color and other design elements in order to improve my designs.

Overall, I learned a lot about the whole process of designing an app from start to finish. I hope to take the lessons learned from this project towards more impactful designs. A quote from the assignment peer feedback: “The app is really simple, clean, and easy to navigate! Would definitely use this app!”

Thank you for reading!