Product Overview

A menu and payment mobile app for restaurants enhances food discovery, selection, and checkout with an intuitive layout, smart search, and categorized menus. It offers quick add-to-cart, easy customization, and multiple secure payment options for a seamless ordering experience. With real-time order tracking, saved payment methods, and personalized recommendations, users can navigate menus effortlessly and complete purchases in just a few taps.

My Role: User Experience Research, Visual & Interaction Designer

Responsibilities: User Research, Wireframing, Mockup, and Prototyping

Project Duration: January 2022 - June 2022

About Details

The Problem

Users struggle to find diverse food options due to poor menu organization and inefficient checkout processes that are slow and time-consuming.

The Goal

The goal is to make sure that this app has features that let users choose and find a diverse selection of items. Plus, make the checkout process quick and smooth.

Project Goal Statement

Target Audience

Participants can be people who make group orders once a week; it can be for social or work related reasons. Remote workers are also welcome.

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 started by taking some quick surveys to pinpoint potential users. 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 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.

Competitive Audit

The competitive audit provides a structured analysis of similar applications, evaluating their strengths, weaknesses, and key design patterns to identify opportunities for improvement. The spreadsheet includes a detailed comparison of competitors based on usability, navigation, checkout efficiency, and visual design, highlighting areas where the application can stand out. The report summarizes key insights, identifying gaps in user experience, common industry trends, and potential enhancements to refine the app’s design and functionality.

Audit Data Spreadsheet

Audit Data Spreadsheet

Audit Report

Audit Report

Persona

Application

The application creation process begins with Information Architecture (Sitemap) to establish a structured hierarchy of content and navigation. This ensures a logical flow and intuitive user experience. Next, a User Flow is designed, mapping out how users will interact with the application to achieve their goals efficiently. Once the flow is clear, Paper Wireframes are sketched to quickly explore layout ideas and refine key screens before committing to digital design. After iterating on these rough drafts, the project moves into Digital Wireframing, where low-fidelity wireframes where created using Figma. These initial digital wireframes establish the foundation for visual design, prototyping, and usability research.

Information Architecture

Information Architecture

User-Flow

User-Flow

Paper Wireframe

Wireframe and Prototype

The Digital Wireframe & Prototype phase involved transforming initial sketches into structured wireframes using Figma/Adobe XD, focusing on usability and layout. These wireframes were then developed into an interactive prototype, allowing for seamless navigation and functionality testing. This prototype provides a realistic user experience, enabling feedback collection and refinement before moving to high-fidelity design and development, explore the prototype by clicking on the link below.

Link to Wireframed Prototype

UX Research

For the UX Research phase, I developed a structured UX Research Study Plan to conduct an unmoderated usability study with 5-7 participants, capturing interaction data with the wireframed prototype. This research aimed to identify usability challenges and refine the user experience. After collecting the data, I created a Usability Study Report, utilizing Generative AI to analyze user feedback and uncover key patterns. I then organized user inputs into an Affinity Diagram, followed by Insight Identification, Pattern Recognition, and Prioritized Insights to pinpoint critical usability issues. Based on these findings, I implemented design updates to address user pain points, ensuring a more intuitive and seamless experience in the next iteration of the prototype.

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