Product Overview

I designed a restaurant menu and payment app to simplify food discovery, ordering, and checkout. With an intuitive layout, smart search, and categorized menus, users can quickly find and customize their meals. Secure payment options, real-time tracking, and personalized recommendations ensure a seamless experience—all in just a few taps.

My Role: User Experience Research, Visual & Interaction Designer

Responsibilities: User Research, Wireframing, Mockup, and Prototyping

Softwares & Tools Figma, Illustrator, Photoshop

Project Duration: January 2022 - June 2022

About Details

The Problem

From the surveys, I found out that users struggled to find diverse food options due to poor menu organization and inefficient checkout processes that are slow and time-consuming.

Product Goal Statement

My food ordering app will let users make food selections and quick orders in advance which will effect users who make large quantity order and want to be confident in their purchase by skipping lines, updates when order is ready and giving them adequate info about a food item. We will measure effectiveness by tracking order with 5 plus items and watching order consistency.

Target Audience

Users are people who make weekly group orders for social or work gatherings, including remote workers. This app is designed for everyone—even those with minimal smartphone experience—ensuring a smooth, accessible ordering process for all.

Painpoints and Challenges

From the interviews many users have hard time finding diverse items.
Users hate long checkouts especially when they are asked multiple questions.
Many people get tired of eating the same food all the time.
When users make orders they always have doubts.

Inital Solutions

I believe that going forward the design need to integrate a theme selector to fix this pain point.
So a efficient way to fix it is to have all the necessary things questions only and keep it in 1 to 2 steps.
The best solution to that would be to integrate a way to ask users what they are feeling and using that to find possible matches.
I want to fix that by informing users about the food before making the order.

User Research Overview

Going into this research I first with the goal of the project and researching potential target audience afterwards I did some quick surveys and competitive audit. Afterwards I commenced with the interview and asked series of questions pertaining to their experience when using a food app, then I used those interviews and built two personas and their user journey. At first I was assuming that people are mostly focused on the checkout not being fast enough. But I learned that wasn't the only issue, users had problem being confident in their choice as well as finding food items if they have any particular choice.

From there I created information architecture, user-flow, wireframes, and did some usability testing in a unmoderated setting where I could observe the user interact with the app without any outside help. Making it more natural and helps with understanding the user thought pattern when interacting with the product. Afterwards I made adjustments to the design and created the mockup design and prototyped for final testing phases.

In this process, I applied several UX principles to enhance the design:

Law of Continuity: I kept the design flow smooth and consistent, making sure related information, like text style, content placement, and imagery is well balanced.
Color Theory: I used warm color, like red, to grab attention and create a sense of hunger, particularly around specific areas and important features.
Visual Hierarchy: I carefully structured the layout to prioritize important information, using size, contrast, and header placement to guide users through the app with ease.
WCAG Guidelines: I ensured the website followed accessibility standards, including high color contrast and alternative text for images, to make it usable for all.

By integrating these principles, the platform is designed to be intuitive and user-friendly, creating a seamless experience for food lovers.

Competitive Audit

My competitive audit provides a structured analysis of Uber Eats, DoorDash, and Yelp, evaluating their strengths, weaknesses, opportunities, threats, and key design patterns. I created a detailed spreadsheet comparing usability, navigation, checkout efficiency, and visual design, identifying areas where my app can stand out. The report summarizes key insights, UX gaps, and industry trends, guiding improvements to enhance the app's design and functionality for users.

Audit Data Spreadsheet

Audit Data Spreadsheet

Audit Report

Audit Report

Persona

Application

My app creation process starts with Information Architecture (Sitemap) to build a clear content hierarchy and navigation, ensuring a logical flow. I then map out the User Flow to streamline interactions and help users reach their goals effortlessly. Next, I sketch Paper Wireframes to explore layout ideas and refine key screens before moving to digital. Using the Visual Hierarchy Model, I prioritize elements for clarity and usability. Once the structure is solid, I create low-fidelity Digital Wireframes in Figma, laying the groundwork for visual design, prototyping, and usability research.

Information Architecture

Information Architecture

User-Flow

User-Flow

Paper Wireframe

Wireframe and Prototype

In the Digital Wireframe & Prototype phase, I transformed my sketches into structured wireframes in Figma, focusing on usability and layout. I then built an interactive prototype to test navigation and functionality, ensuring a smooth user experience. This allowed me to gather feedback and refine the design before moving to high-fidelity visuals and development. Explore the prototype by clicking the link below.

Link to Wireframed Prototype

UX Research

For the UX Research phase, I developed a structured Usability Study Plan to conduct an unmoderated usability study with 5 plus participants, capturing real interactions with my wireframed prototype. This helped identify usability challenges and refine the experience. Using Generative AI, I analyzed user feedback to uncover key patterns and metrics.

I documented findings in a Usability Study Report, Insight Identification Report, Pattern Identification Report, Prioritized Insight Report, and Detailed Insight Findings. I then organized insights into an Affinity Diagram, recognized patterns, and prioritized key issues. Based on these findings, I made targeted design updates to enhance usability, ensuring a more intuitive experience in the next iteration.

Key patterns and metrics data are displayed below.

Study

Diagram

Affinity Diagram

Information Insights

Participants struggled with the map navigation feature.

Participants had difficulty removing items from the cart.

Participants found the checkout process simple and straightforward.

Participants wanted a clearer remove button for cart management.

Round 1 & 2 of Findings

Users confused when asked to remove items from cart.
More guidelines and options on the map feature would be helpful.
More visual elements to help improve usability.

Improvements Made

Added more visual cues to the cart design so users are able to identify where and what they want.
Incorporated more guidelines and feature to help users easily locate their nearest restaurant in the area, like filters.
Used various icons and imagery to help improve usability.

Post Updates to Design Findings

Post Updates to Design Findings Presentation

Mockup and Prototype

After analyzing the usability study results, I refined the design by implementing key improvements to address user pain points. These updates were integrated into high-fidelity mockups, enhancing visual hierarchy, accessibility, and overall usability. With the revised mockups in place, I developed an interactive prototype, incorporating the updated design elements and improved user-flows. This version provides a more seamless and intuitive experience, ensuring a more user-centered final product, explore the new mockup designs using the link provided below.

Link to Mockup Prototype

Design Sticker Sheet

Accessibility Considerations

I made sure to include enough icons in my design so users understand what they are clicking.

I also made sure to use great color contrast for users with poor visibility to easily navigate and use.

Added some accessibility consideration I made sure to include in the design are dark mode, translations and text-reader functionality that will make using the app easier and memorable.

Impact

The app really makes the whole food ordering process easy and informative.

Quote from peer feedback:

“Simple design with elegant use of font and colors”.

Learning Outcome

I learned to deeply research key users and analyze how they interact with my design. Using Generative AI, I processed usability data to uncover patterns and refine my approach. Through multiple design iterations and layout adjustments, I improved usability and created a more intuitive experience. Through this process, I gained valuable insights, and the final high-fidelity mockups and interactive prototype now reflect the improvements I made, ensuring a more user-friendly and intuitive experience. This case study taught me the importance of continuous iteration and user feedback in creating effective designs.

Next Steps

I would love to use my current prototype to do some more user testing and further improve the design.

Afterwards I would love to start developing the prototype into an actual usable app.

My final thing would be to collect user data on the app usage and learn about how users interact with the app.

Thank You

Thank you so much for reviewing my work for the Foodie app! If you like to to see more or get in touch my contact info is down below. To see the slider version of the case study please click the link here.

Email: adisiddque6@gmail.com

Website: adilasami.com