Optimizing the in-person order experience through a mobile ordering app
Project Goals
- Research the client and their needs
- Design and develop a responsive web app
- Emphasize accessibility through design
- Conduct and analyze user tests
- Include additional interactions that spark joy for the user
Directly communicating with the client and their users to determine priorities
I participated in user interviews and fly on the wall studies to observe and understand what was most important to the users during their ordering experience. I also communicated with the truck owners themselves to gain information from their business perspective.
Information Architecture
We had to figure out how to organize a large menu into an app that will make it easy to find items. However, we still wanted to highlight popular items and favorite items in order for the user to choose their meal and navigate through the app quickly. We solved this by creating an overview menu page that highlights items of each category, but can be clicked on so users can vertically scroll through all the large menu quickly.
Order Status
An aspect that is difficult for the truck owners to navigate in their in-person experience is the customer's order status. To be concise with our messaging, we created three different status pages, paired with an animation to ensure high visual feedback when the user's order status is progressing.
Designing for user delight
I chose colors reminiscent of the actual menu on the truck. These slight modifications ensure optimization for web and app accessibility while staying true to the truck's existing branding.
Supporting the brand with illustrations
My goal was to directly reflect Pete's inviting aura through the app by including joyful interactions and graphics. In addition to the use of color and type, I opted for custom illustrations to properly reflect the brand.
The Results
We developed the web app in three major stages, alpha, beta, and final. With the alpha, I determined the critical path of the website along with the secondary UX/UI designer to create an MVP with basic functionality. Our beta version refined any front end issues we had arise from the alpha, and implemented interactions that we had mapped out. For the final, all the finishing touches were added as well and ensured that all the pages were responsive.
Our end result includes a research-backed web app that outlines the process of online food ordering from a local food truck.
