Online Ordering App Easily place an online order for pick up. Project Duration June-September 2022 Google UX Design
Professional Certificate

Project Overview Mezzo’s Food Truck Online Ordering App allows users to conveniently place an online order that allows their customers to skip the lines for pick up, as well as be alerted of the current location by tracking the food truck. Tools Responsibilities User Research
Wireframing
Graphic Design
Mock Ups
Low Fidelity Prototype
High Fidelity Prototype
User Testing

The Problem The Goal This busy beach tourist location is lacking options for people to eat healthy allergen friendly food. With famous long lines people complain about the wait. Several people miss the opportunity to order food or find it inconvenient because of the amount of time it takes. Developing an app that allows users to place their order for pickup online and track the truck's location will create a smoother, more convenient process to obtain food from Mezzo’s Food Truck.

Primary Research Studying how direct and indirect competitors position themselves in the market showed food trucks in the area of New England that offered online ordering and pick up to skip their lines had better customer reviews. The competitor user bases assisted in the discovery of some of the most common pain points of their users, and this information aided in the direction of design for this app.

Introducing Personas It was discovered through user personas how many customers were unable to place an order simply because of the amount of time it would take to pick it up. Westerly, RI
43 | 2 Kids | 1 Dog
Autobody Specialist Joseph Sarah Beth Columbia, CT
37 | 3 Kids
Stay At Home Mom Providence, RI
26 | Single
Bartender Pre-order lunch and skip the line at pick up to return to work.

Track the food truck so he picks up at the correct location. Food truck alerts that pop up on phone to let her know when the truck is in the area, and when the truck is leaving it.

Wants the app to remind her when she is within the area through geo location so that she doesn't forget about the truck. Order allergen friendly food online.

Skip lines with impatient children.

Pick up food at a location on her way home.

Pain Points Unaware of current truck location Don't want to wait in a long line. Hard to find allergen friendly or vegan food Loses track of time and misses out. One of our users orders lunch from the food truck on his lunch hour, but when it comes time to pick up his order he has trouble locating the vehicle because its between stops. With limited time or impatient children users expressed their desire to not wait in long lines to place and pick up food orders. With high volumes of tourist traffic, users expressed how difficult it is to locate allergen friendly or vegan food in the area Users expressed how time disappears at the ocean and unable to order food because losing track of time.

User Flow & Journey Storyboarding Joseph’s journey helped to highlight features of the product that empathize with user needs.

User flow showed how Joseph would interact with the product to reach his goals of ordering through the app.

Following up the primary research I looked at some of the statistics released in 2022 from the Census Beureaus County Business Patterns. User Secondary Research Retention New Tech Success 92% Users that place an online order will visit that restaurant 67% more frequently than those that don’t. Follows the trend that more people are using online ordering and this increases profits by 30%. 92% of all top-performing restaurants offer mobile order ahead and loyalty programs

Visual Design & User testing Visual Design & User testing

Wireframes & Low Fidelity Prototype Wireframes & Low Fidelity Prototype Decided to use page down navigation with images for food categories to allow quick and easy browsing.

Used paper wireframes to figure out what pages a user would expect to see and how to make this process as user friendly as possible.

I wanted to make specific features such as locate the truck accessible from multiple locations.

Brainstormed multiple layout possibilities before deciding what pages the user would expect to see using both paper and digital wireframes.

“Being able to locate the food truck from different areas made it easy to find. I liked this because my memory isn’t great"

Usability Study Participant "I like that everything is on the same page it makes it easier to locate different categories."

Usability Study Participant One of the participants stated, “The beach waves in the new logo with this new color scheme remind me of the ocean at sunset.”

Survey Study Participant

40% of participants in user testing found the first mock up to have too much text and not enough whitespace. Added a turqoise elipse behind the logo on the login screen to represent how the logo appears on the food truck.

High Fidelity Prototype High Fidelity Prototype Consulting data collected from the surveys conducted, I was able to make changes to the design that best fit our user needs and desires. 60% of participants from the usability study found the text size and spacing on some features difficult to read.

"I don't like the logo presence on the login page, it seems like its floating there. What if you put the color of the truck behind it somehow?"

"You should offer the option to sign in as a guest. If I am busy, I'm not going to create an account."

“I feel like there's alot of unnecessary text on the screen that makes it feel crowded."

Accessibility Improvements based on testing Made it possible to zoom into every image and enlarge navigation, buttons and text.

Checked the overall design with the A11y color color contrast plugin to make sure the design meets WCAG standards.

Elongated button for users using the side of their thumb rather than the tip of a finger to make selections in one handed browsing.

Accessibility is key What I learned & What's Next User Reviews User Convenience Without testing with users that had accessibility concerns, I was unaware that many of the design decisions I had initially made were inconvenient to some of our users. In the end after making these changes, I realized how much better the flow and functionality was for everyone by taking these issues into consideration. I learned the importance of user convenience in all parts of the user journey. That even though our user experiences are different, many of our users had the same goals of consuming as little time as possible. During this project I focused primarily on what the users wanted and needed for features to make this app as useful to them as possible.

In the future I would like to create an area of the app for customers to rate and review their food and services as in my own personal experience this is a feature I would expect to see for a service related industry.

Having this feature will also provide the opportunity to gather more data that will allow future evolution of the product to take place that empathizes with user needs.