FRYZ FOOD TRUCK
Mobile site design for a fried food haven
OVERVIEW
Background
Fryz is a local food truck that sells locally sourced and indulgent fried foods.
Right now, Fryz is in the early steps of their business. They want to make sure that their customers will have the ease of viewing their menu through their mobile site as well as avoid long lines by ordering online.
Role | UX Designer
* Project for Design Lab UX Academy Course
Objective
Fryz needs an appealing logo that stimulates the viewer’s appetite, an easy to use mobile website with a menu that includes ordering online capabilities.
Solution
Designed a well researched mobile site with online order capabilities as well as designed the Fryz logo.
RESEARCH
I chose Competitor Analysis as well as User Interviews for my research methodologies to help me reach my research goals which were:
-
Discover the standards for ordering food online
-
Determine what motivates users when choosing a food truck
-
Identify the competitors and compare & understand their mobile site & menu layout
Competitor Analysis
There are many food truck and restaurant sites out there and each one has their own strengths and weaknesses. In my research, I discovered that these sites always made sure to have clean and high quality images with an easy to navigate site. A downfall is that most of them don't have online ordering capabilities or use a third party to allow ordering. These findings helped me in conjuring a set of questions that I sent out to users.
Simple and straight to the point, but site is not responsive.
Has high quality images, but no ordering online capabilities.
Modern and clean aesthetic, but ordering online is third party.
Has Yelp integration, but site menu has no photos.
User Questionnaire
I composed a set of questions that I sent out to 7 participants.
I chose these participants based on if they order food online or not. Some do not order food online at all, and some are avid online shoppers. I wanted to discover what their motivations, preferences, and pain points are when it comes to ordering food online.
-
Most order from food trucks only on special occasions
-
All like to order ahead of time if they can because they don’t like waiting in line
-
Some like to see pictures of the food before choosing
-
One mentioned their dietary needs limits their choices
-
Most mentioned frustrations about:
-
The restaurant not following special instructions
-
Not getting the right items they ordered
-
These findings helped me in creating a persona. Meet CJ, a 25 year old engineering student.
INFORMATION ARCHITECTURE
Wireframe Sketches
These are the first 3 sketches that I made based on CJ's preferences on how the home page and navigation will look like.
Site Map
A very simple and straight forward site map.
IDEATION
Task & User Flows
I went for a very simple and concise task flow for ordering online. The user flow goes through what CJ is expected to do from navigating to the site all the way to the checkout process.
Low Fidelity Wireframes
I combined two of my initial sketches as well as incorporated some changes to make this layout.
UI DESIGN
UI Design is one of my favorite parts of the design process. Creating visual context from an idea is something that I am very passionate about and wholeheartedly enjoy.
Logo & Branding
Logo idea sketches and vector illustrations as well as a brand style tile to get an overall feel for Fryz
Logo Exploration
I always start my logos with some sketches to dump some ideas on paper. Here are early sketches and final logo for Fryz. The inspiration is their Bloomin' Apple menu item.
Fryz Style Tile
Fryz really want to incorporate 4 main colors which are Red, Blue, Yellow, and Green. I was having a hard time figuring out how I can use these colors in all together in a classy way. Here is the style tile I created with that in mind.
High Fidelity Mobile Wireframes
Based on the style tile, I’ve created high fidelity wireframes for the homepage navigation, and menu page.
UI Kit
After establishing the site’s look and tone, I took the elements and composed them in a UI kit. This kit contains typography, image treatment, logo, color palette, textures, etc. This will make it easier for future designers to reuse.
ITERATION
Another favorite part of the design process is prototyping. Seeing the wireframes come to life, and having users test it bring out my ultimate passion for UX design. Seeing my creation come to life via prototype gives me a sense of satisfaction.
High Fidelity Prototype
I created a high fidelity prototype for user testing. The task would be for the user to add 3 items to the cart, add a special instruction, and place the order. My goals for this test were:
-
Understand what friction points there are on the site’s ordering flow
-
See if there are any desired functions that can be added to ordering process
I had 7 participants in total with the age range of 20 - 45
Affinity Map
I took my test findings and applied them to this affinity map to have a visual representation of my research. This helped me in my priority revision and iteration which is reflected in the prototype.
CONCLUSION
At the end of the project, I was able to answer my research goals as well as create an effective logo and online menu with ordering capabilities which is exactly what Fryz wanted to accomplish.
Check out my work for Zeit
