top of page
Shuffle FOr Food
iOS • Wireframes • UX & UI • Animation • Prototyping
Shuffle For Food is an iOS app thats lets travelers look for places to eat when visiting a new city. Press the shuffle button and get a random restaurant suggestion in you current location. Comes with info about the restaurant like reviews, ratings, pricing, directions, and much more.
Role
Project Overview
UI, UX, Programmer
Time
Challenge
2 weeks
By using Yelp's API create a fun way for users to find places to eat in unfamiliar locations.
Task
Solution
-
Allow users to press a button and show them a random restaurant in their area along with info about the restaurant like ratings, reviews, etc.
Design a way for users to find places to eat with a touch of a button
Tools
Sketch, Miro, Xcode
Research
To better understand what Shuffle For Food's background, competition, and target audience were, I began to research apps that mirror my app on the AppStore.
Research Goals
-
Understand the pros and cons of all the food apps on the AppStore
-
Identify the target market and why they are downloading
-
Read reviews of the competition both good and bad
-
Discover the needs of the user base in all these apps
-
Input an IAP to give more features to paying customers
Competitive Analysis
To understand what Im competing against I downloaded the 2 apps that closely resemble what Shuffle For Food is trying to accomplish. This information helped me to understand what the trends are across all competitors, their unique differences, and why users might choose a particular service over another.
uPick
Shuffle Bites Strengths:
1. UX easy to use
2. Automatically finds users location
3. Adds fun way to help find a random restaurant by shaking phone
Shuffle Bites Weakness:
1. Have to shake phone to find restaurant no secondary option
2. Not much info about the restaurant itself like ratings and reviews
3. Same restaurants appear more than once
4. No map showing location
Shuffle: Bites
uPick Strengths:
1. Sorts places by distance, rating, or price
2. Automatically finds users location
3. Can like a restaurant and save in app
4. Filter selection by price or distance
uPick Weakness:
1. Shows all restaurants as soon as user opens app no interaction with users
2. User interface looks like it was designed by developer
3. Have to make an account to like a restaurant to save in app
Provisional Persona
Now that I had a better understanding of the other Food apps in the market space through research and competitive analysis, I wanted to start exploring and identifying who the target user might be. By creating a provisional persona, I was able to quickly figure out who that might be. I decided to target people who are in their 20s and older that are always on the move especially if they travel for work or just for fun.
User Persona
Using what I learned from my research and what target audience I wanted to reach, I created a user persona that accurately represented who I am designing for. This persona helped guide my decisions along the design process to make sure the solution I am designing is centered on our user. Here I am focusing on the college and older crowd that travel and want quick restaurant suggestions.
Amy 24 year old traveler "I love to travel and am a big foodie!"
GOALS
NEEDS
-
Discover new places to eat
-
Get on the go suggestions
-
Quickly find places for people not familiar with
area
-
To be able to help users that are new to an area
-
To be able to not waste users time looking for quality eats
-
To be able to discover small businesses not shown in other apps
MOTIVATION
FRUSTRATIONS
-
Quickly find a place to eat
-
New to area and not sure what places serve quality food
-
Meet someone and wants to take him/her to a good restaurant
-
Tourist looking for suggestions
-
Indecisive spends 30 minutes searching through yelp and google to figure out where to eat.
-
Need an app that can have a quick way to show all info in one screen.
User Flow
Now I wanted to take an even deeper look into the overall user’s journey once the user enters the app. I created a user flow to explore the scenarios the users would take when pressing the shuffle button. As you can see there are actions that you will not be able to do once the user presses the shuffle button on the fourth try. This was added to give a little preview of the app and what it does and also be able to get a revenue stream for the app.
Lofi Wireframe in Sketch
Using everything I learned throughout this phase, I then worked on creating lofi wireframes. Below is a look into what the user is going to have access to when the shuffle button is pressed. As you can see there are some things that I have kept and other things that I removed when I got closer to the finished product.
Hi Fi Prototype
After creating the wireframes I had enough information to start prototyping my app. From doing my research I knew that I wanted the app to have a scroll view that showed all the restaurant info on one screen. When the user opens the app the he/she will be shown a map with their current location. I wanted that to be the home screen before any interaction is taking place between the user and app. From my research of the other apps I didn't like how it automatically displayed restaurants without any interaction. This made me want to allow the user to press the shuffle button to show a new restaurant with info about the business. With my app there was a in app purchase model that I needed to include and I didn't want to be like the other apps that would be free and when you enter the app they would make you purchase one of their in app purchases before even getting a chance to try your app. I decided to give the user 1 shuffle to see how the app works before displaying a pop up to get unlimited shuffles for $0.99.
Usability Testing
Using the prototype and a rough build of the app I made on Xcode I was able to get some great feedback from friends and family members.
Overview
Method: In Person
Participants: 7
Age: 27-32 years
Average Time: ~6 minutes
Pain Points
I identified common pain points encountered by users during testing leading to my discovery of key insights which helped me to identify design recommendations.
7/7 users didn't like that you only had one shuffle before you had to pay to get unlimited shuffles
2/7 users showed some confusion if shuffle button was pressed or not
5/7 users didn't like that you had to scroll all the way to bottom of screen to press shuffle button
Insights
People wanted animation when shuffle button was pressed
People wanted at least 3 shuffles before getting a popup to unlock unlimited shuffles
People wanted to press shuffle button wherever they were in the scroll view
Recommendations
Make shuffle button be in a fixed position so that the user can press it wherever you are on the screen
Add the ability to get more shuffles before making user purchase in app purchase
Add buttons to show directions and call restaurant
Revisions and Final Product
After getting the recommendations identified through testing, I started to make these revisions in the high fidelity prototype. I decided to give users the ability to test drive the app more by giving them 3 shuffles instead of 1 before being told to buy the in app purchase. I also went with a fixed shuffle button so that the user didn't have to scroll all the way to the bottom of the screen just to see another restaurant. Finally I didn't want to annoy the user with the in app purchase pop up when they ran out of the shuffles so I only had it pop up when the shuffle button was pressed.
Reflection
Shuffle For Food was a challenging app to make on the UX design side. I had many ideas early on how to let users discover restaurants in their area. I went with the shuffle button because it was an interactive experience. From a users point of view I wanted less searching like how you would do in Yelp. With my design I wanted it to be simple just touch and scroll. I have officially launched this app to the AppStore on November 8, 2022 and am eagerly looking forward to the feedback wether positive or negative.
bottom of page