IMA Food Delivery App

UX/UI Case Study

Project 01

Project completion date April, 2023

The goal of the project is to provide customers with a convenient and effective way to order their favorite dishes and have them delivered to their homes through the IMA food delivery app. This app allows customers to easily browse through a wide variety of dishes on the menu, making it simple to find and select their desired meal. With just a few taps on their smartphones, customers can place their orders and track the progress of their delivery in real time.

*Note: This project is based on a fictional brand.

IMA

Project overview

The problem

The goal

My role

Tools

Individuals who live a busy life and may not have the time to cook meals at home, or even wait in lines when ordering food from restaurants.

With the app, users can conveniently order their favorite dishes and get them delivered straight to their homes. The user-friendly and intuitive interface will not only save users time but also provide them with an enjoyable experience while placing their orders.

User research
UX/UI Designer

Design process

Empathize

Define

Ideate

Prototype

Test

User Research
User Interview
Capitative Analyst

User Personas
Empathy Map
User Journey

User Flow
Information Architecture

Wireframes
Hi-Fi Design
Prototype

Feedback
Conclusion
Future Concept

Empathize stage

Research is an essential step in the design process, to better understand users food ordering habits and needs, I conducted interviews and created empathy maps.
Based on the research, I found that our audience consists of working adults who lack the time to cook and members of the Jewish community who prefer home-cooked Israeli style meals. I identified three key user needs to address:

  • Busy professionals looking to save time.

  • Individuals looking for home-cooked meals with an Israeli twist.

  • Waiting time in restaurants and food trucks being too long, and so they would benefit from ordering online.

Research

User pain points

Users do not have the time to cook at home.

Time

Fees

Accessibility

Delivery

Competitive audit

I conducted a competitive audit with the primary goal of gaining insights into how both direct and indirect competitors are approaching and solving the challenges in the food delivery market. The audit aimed to identify their strengths and weaknesses, enabling me to learn from their approaches. By analyzing the competition, I could identify opportunities to create an app that stands out in the market and caters to a wide range of user wants and needs.

High delivery fees or minimum order requirements. A lot of times delivery apps will have hidden fees you encounter only while checking out.

Platforms for ordering apps may feel unapproachable for users with disabilities.

Difficulty in tracking the status of food orders or contacting customer service.

Define stage

Personas

After conducting research, I created personas that represent the people who will be using our digital product. These personas helped me understand their individual frustrations, goals, and expectations. By gaining this well-rounded understanding, we can design an experience that meets their needs and provides solutions to their challenges.

Persona #1, Jane

Problem statement:

Jane is a passionate musician and working mom, needs an easy way to order and pick up food because she does not have the time to cook at home.

Persona #2, Jorge

Problem statement:

Jorge is a college student who lives with his parents. He needs a way to unwind and relax after a busy day of school and work. Because he wants to treat himself to a meal without having to cook it himself.

User journey map

Then, I created a user journey map to plan a smooth and problem-free experience for the users. This map helps me understand their goals and shows the exact steps they take at each stage, along with the emotions they may feel. By visualizing their journey, I can identify any obstacles and ensure a seamless and satisfying experience for the users.

Persona #1, Jane

Goal: Order food for her and her daughter from Food Truck app.

Sketches and wireframes

Paper wireframes

Before creating digital wireframes, I used paper wireframes to quickly and efficiently record ideas. This method helped me establish the design structure early on and decide what elements would be included in the final version. It allowed me to organize information, determine the flow and relationships between pages, and create a clear hierarchy for the app.

Lo-fi wireframe

And more...

Usability study

I organized a usability test with 10 participants to try out the early version of the app. A UX designer supervised the test remotely. Before starting, I set clear goals and made sure the participants felt comfortable sharing their honest opinions. I assured them that there were no right or wrong answers. During the test, I asked open-ended questions to get their unbiased feedback. This helped me understand their experiences and perspectives better. The results of the test would help me improve the design and create an app that meets the users' needs.

Take aways

After the usability testing, I used an affinity map to analyze the observations. I grouped the notes based on each participant's feedback to see their individual thoughts. Then, I looked for patterns and similarities among the feedback and grouped the notes accordingly.

This helped me identify areas for improvement in the prototype. The affinity map allowed me to make sense of the data and draw meaningful insights from the testing observations.

Insights:

design recommendations:

  • Users expressed a desire for an option to log in with Apple on the login page

  • Users suggested adding a "Contact Us" button for support

  • Users face challenges in visual perception and locating specific information due to low contrast or inadequate use of colors

  • Add the option for users to log in with Apple on the login page, providing a convenient and secure authentication method

  • Include a dedicated "Contact Us" button or link within the app, preferably in a visible location, such as the navigation menu or footer

  • Use high contrast color combinations for text, buttons, and important elements to make them stand out

Revision:

Based on the insights gathered from the usability testing, I have made several revisions to the design.

The previous design made it difficult for users to locate the menu page. Thanks to the usability study, I was able to create an easier way for users to navigate the app.

Before

After

Visual design

As I proceed to the visual design phase, I keep the user's needs in mind and ensure that the design is easy to use and accessible. I apply design principles such as gestalt, contrast, and hierarchy to create a clear and organized layout. I also pay attention to typography, layout, and color choices to maintain consistency throughout the design. By following these principles, I aim to make the design visually appealing and user-friendly.

Moodboard:

Design system:

Hi-fi wireframe:

After establishing the new branding for IMA, I proceeded to create the visual design for the important pages of the website. I used the wireframes and insights gathered from the usability study as a foundation for this process. By combining the visual elements and user feedback, I aimed to create a cohesive and engaging visual experience for the app users.

And more...

Prototype:

You can interact with the prototype right on the screen by clicking or tapping on the elements.
It lets you navigate through the screens and experience the user interface like a real product. Enjoy exploring!

You can also view the prototype by clicking here

Conclusion

As a result of constant feedback and iterative design, I was able to create clean and neat designs that prioritize the needs of the users. I highly value the feedback provided by the participants, as it played a crucial role in shaping the final design. By incorporating their suggestions and addressing their concerns, I have developed a user-centered solution that aims to provide an excellent user experience.