Project Eat
A mobile website for online food orders for pickup or delivery.
Overview
Conducted user interviews with directed storytelling on Zoom to gain insights on user experiences with existing apps for online food and/or grocery delivery and pickup services. The process included creating wireframes, user flow, information architect diagram, and an interactive prototype. Leveraged existing successful designs and added additional features such as status tracking for food orders.
Project Date: December 2021 - January 2022
Goal Statement: The user group is adults who are interested in a quick and convenient, well-managed delivery and pick-up service offering fresh, warm, and high-quality meals to support their busy lifestyles.
My Role
UX Researcher
UX/UI Design
Wireframes
Visual Design
Prototyping
Methods Used
Directed storytelling
Sketching
Low-fidelity and high-fidelity wireframes
Information architecture diagraming
User flows
Prototyping
Think aloud usability testing
Tools Used
Sketch
Axure RP
Adobe Photoshop
Adobe Illustrator
Google Slides
Zoom
The Challenge
Through an inferred analysis of the interviews and directed storytelling, users expressed interest in an application that would be convenient, communicative, customer-service oriented, and timely.
Some pain points from users include:
sporadic delivery timing and/or no delivery service option available
delivery fees
incorrect orders
Click here to review the user research report
The Solution
A website that could be viewed from a mobile phone. The website will give the users ability to search for restaurants nearby, submit orders, checkout directly on the mobile website, and be able to track the status of their order. Quick and easy without the need to download an app.
Low Fidelity Prototype
Sketched and planned the essential features of the website. One of the most exciting features was the order confirmation status tracking bar.
Mapping it out
To guarantee users receive the best experience, a site map was created with a list of pages that would need to be designed along with their functional requirements. The focus of the project was the main user flow of ordering a simple meal from one of the restaurants and to checkout with ease.
Prototyping
An interactive design of the website was created with Axure.
Usability Testing
Test Plan
My objectives were to:
Test the flow of submitting the food order
Understand the user’s thoughts about the process of the order form
Identify any issues or pain points that the user may experience when completing a flow to submit a food order
Conducting the Test
The predefined tasks include:
Imagine you’ve been working all morning back-to-back and it’s near lunchtime. You are craving a burrito, so you decided to go online to put in an order for delivery. Using this website, find where you can order a burrito.
Imagine you are craving a chicken burrito, where can you specify this customization and show me how you will review your order and checkout.
The usability test was completed with a total of 3 participants from the ages 25-55 who have had many experiences with online ordering of food for delivery or pickup.
Going Forward
Users were able to quickly identify the type of app they were engaging with and were able to navigate through the multiple pages to complete the assigned task of ordering a chicken burrito.
Opportunities to improve included:
Implement a clearer interaction flow for selecting a menu item.
When tasked to specify the type of protein for the burrito, users were confused on how to locate the page. To remedy the confusion, revisiting the user flow design for specific item selection to improve the flow of the ordering process and adding in a different mouseover or mouse-down color for the menu item to reinforce the mental model of an active link.
Incorporate button option to specify pickup or delivery when reviewing the order.
Improve clarity and understanding surrounding the status bar within the order confirmation page.
Users were confused and unsure of what status the order was in. To improve user confidence, use only two colors, (ie. red and green) to show status completion or in progress.