A mobile app designed to help amusement park visitors order snacks and drinks from their phone!
Mobile App
Sole UX Designer
June-July 2024
Background
FunFeeds is a project that I put together to build my portfolio while completing the Google UX Design Professional Certificate. I was challenged to “design a mobile-ordering app for an amusement park snack shop.”
To begin this project, I had to understand who I am solving this problem for and what their pain points are.
I knew that the users of this app would be amusement park visitors who want something to eat or drink while at the park. In order to understand the goals and frustrations of these potential users, I conducted user interviews.
I asked questions about frequency of amusement park visits, eating habits when in the parks, and their experience with finding food options.
Two themes that I found through my interviews were that people find amusement park food to be expensive, and that they dislike waiting in line.
One unexpected theme that I discovered was that sometimes visitors are overwhelmed by the options available.
With the insights from my research interviews, I created user personas to represent the larger user base.
From those personas, I developed user stories to inspire and inform my design decisions.
Then, I decided which pain points to focus on, and explored ways to address those issues.
For this project, I decided to focus on the user persona for Stacy to build out the first version of the app. I felt that her pain point of wanting to save time was most likely shared with the widest group of people.
With “Stacy” in mind, I came up with a problem statement that clearly defines her situation, and a hypothesis of what could potentially solve it.
After understanding the problem I’m aiming to solve, and developing a brief hypothesis of how to assuage that problem, I was able to create a goal statement to understand what success will look like.
Once I understood my user and knew the goal, I began to ideate ways to solve the problem.
First, I conducted a competitive audit to explore what solutions already exist. I wanted to learn how those solutions could be improved, and what is already working well. Below is a quick snapshot of those findings, but if you would like to see the full audit report, you can view it here! You can also find the rest of the comparisons here!
With that helpful information and insight, it was time to start ideating a solution. I did a few different rounds of the “Crazy 8s” exercise to get the ideas flowing and to prepare to build wireframes. I also created storyboards. Below is a snapshot of my big picture storyboard followed by a close up storyboard.
This big picture storyboard focuses on how the user (Jacob) feels at each stage of the process.
This close up storyboard focuses on how the product itself behaves at each step.
As one last step before diving into wireframing, I created a user flow to map out the actions a user can take, screens they will see, decisions they will make, and direction that the information will take them from opening the app to getting an order confirmation.
Next, I began to plan out the app by creating wireframes for each screen and feature.
For the beginning of the prototyping process, I first made paper wireframes (or in my case, iPad wireframes…) of each screen from my user flow.
For each screen, I drew up multiple ideas. Then, I took my favorite aspects of each iteration and combined them into the final wireframe for that screen.
Home Page
The top of the home screen features circles to represent icons for different food categories. This will make it easy for the user to narrow down the overwhelming number of available options.
The home screen also features rows going down the page for different themes to help the user decide what they’re in the mood for. The rows are made of cards that quickly describe the food item, price, and rating.
Shopping Cart
The shopping cart page features more cards that show the food item, quick description, price, quantity, and an option to delete the item.
After the items are listed out, I made sure to include a “Continue Shopping” option for a better user experience.
Checkout
The checkout screen features different options for pickup times so that the user can order with an appropriate amount of time in advance which could differ from user to user depending on factors such as being in line for a ride when placing an order, needing to move slower because they are traveling with children, or any other reason.
Once I was satisfied with the paper wireframes, I converted them into digital wireframes in Figma, which then became the low-fidelity prototypes below!
To receive feedback on the wireframes, I put together a research study plan and had 5 of my friends and family complete a user study. Each participant was between 18-60 years old and had visited an amusement park within the last 3 years.
The goal of the study was simply to determine if the user can complete checkout in the app and assess whether or not the app is simple and easy to use.
Overall, the testers found the app to be straightforward, but there was one main pain point that 4/5 testers shared. During testing, the user was left confused after the payment step because the order confirmation was easy to miss. To fix that, I created a full confirmation page with an order number, a map, and pickup instructions to clearly indicate that the order was completed. (Before the study, I had a different confirmation indicator, which was less clear and not it’s own separate page.)
Once I was happy with the low fidelity prototype, I began working on the design elements to include for the high fidelity prototype.
The goal was to give the app an exciting and lively feel that carries over the emotions that you would feel at an amusement park, while keeping it easy to use and read.
For typography, I went with the Montserrat typeface because it is clear and simple, but still pleasing to look at. It’s also available in many different weights that will allow me to adjust the font for each use of the text.
For color, I originally chose very bright colors to invoke the fun of an amusement park, but after using a contrast checker, I realized these colors (specifically the blue and orange chosen) were not accessible. Instead, I chose a darker blue that is more legible, and used the orange as an accent/outline color.
All of those design elements came together to create this high-fidelity prototype!
Features
Customizable pick-up time slots to help customers order in advance and skip long lines
Familiar design patterns found in commonly used food delivery apps like DoorDash and the Chipotle app, for ease of use
Location services/park map to find the closest snack shop in a large and confusing amusement park
Search, category icons, and themed sections to make it easier to find and order from the many options available at the park
Next Steps
I am very happy about the progress I was able to make with FunFeeds. I achieved my goal of creating an app that will allow an amusement park visitor to save time by ordering food from their phone, but there is still a lot that I would like to include in order to enhance the user experience.
Add filtering for price, diet/allergens, and rating
Build out the flow for the delivery option
Include a section dedicated to navigating around the amusement park
Increase accessibility
