Umami

Exploratory design for a food delivery mobile app using a variety of artificial intelligence tools.

Timeline

Team

1 week

Me, myself, I

Tools

Figma, Dall-E, Craiyon, Bing Image Creator Coolors, Uizard, ChatGPT, Fontjoy

In a hurry? Click here to skip to my final designs.

Background

As the global fascination with AI deepens, we're constantly embroiled in discourse about how computers are revolutionizing nearly every aspect of our society. Naturally, as a self-proclaimed tech geek, I'm curious as to what AI means for design.

In an effort to explore this, I decided to to experiment with a variety of AI in the UX process, from ideation through high-fidelity features. I chose to design a food delivery app because there is ample amount of data for algorithms to draw from for this topic.

Goal Setting & Scope Definition

I began the research portion of this project by using a variety of text-generating AI models to analyze data about popular food delivery apps (Uber Eats, Grubhub, DoorDash), and create an success model for our app. The tool I utilized most for this step was (unsurprisingly) ChatGPT, due to its advanced algortihm and broad data selection.

What features will make us successful?

Simple onboarding process
Intuitive navigation & information architecture
Personalization (recommendations, order history, etc.)
Accurate delivery tracking
Accessibility for users of varying abilities

How will we measure success?

Conversion rate: app downloads vs. orders placed
Minimal cart abandonment
User retention (high user retention rate, low user churn rate)
App ratings

Understanding The User

Let's take a deeper look into our users' frustrations:

Late deliveries
Order inaccuracy (incorrect or missing items)
Technical glitches (app crashing, payment failures, trouble loading menus)
Customer support issues (hard to reach customer support, or complaints are not taken seriously)
High service/delivery fees unseen until late in the order process
Data privacy concerns (especially with payment info)

Using the same text-generating models, I gathered data about food delivery app users in order to develop a user persona and identify key pain points with current food delivery apps.

Design Planning

UI Inspiration

I used a few image generators (Dall-E, Bing Image Creator, and Craiyon) to inspire the general theme, color palette, and feel of the UI. Simply asking the model to provide user interface design for a food delivery mobile app generated a variety of designs from which to draw trends.

General design trends associated with food delivery apps include warm colors, peach accents with ample white space, rounded features, sans serif typography, and whimsical cartoon avatars.

With the help of an AI-powered color palette generator (Coolors), I created a palette based on the the peach tone that appeared in almost all of the AI generated images above. I then used an AI-powered font generator (Fontjoy) to find a mid-to-low contrast combination of sans serif fonts.

Creating a User Journey

Before creating a wireframe designed to facilitate certain tasks, I needed to define a main user workflow to serve as the framework of my design. I surveyed a variety of text generation models to produce the following flow:

Outlining Information Architecture

In order get a feel of an intuitive interface to facilitate the workflow outlined above, I asked an AI-powered UI generator (Uizard) to produce three designs for a food delivery mobile app.

Wireframing

Based on the information architecture provided in the above designs, I sketched out a wireframe model to guide my designs.

Prototype: round 1

Combining the style guide, information architecture, and wireframe pictured above, I mocked up a "rough draft" high-fidelity prototype in figma for testing.

Step 2: Testing & Iterating

User Testing: Round 1

I performed simple user test sessions on our initial prototype to assess workflow intuitiveness + learnability, better understand user behavior, and produce actionable recommendations.

While there are a few AI Tools that algorithmically test prototypes and generate user insights, this is one area where I personally believe even the most intelligent algorithms fall short. Only humans can think like humans.

Accordingly, I tested our prototype with several (human) users, prompting them to follow the task flows outlined in the user journey above.

Post-Test Iterations

(Click here to skip ahead and view the final prototype)

In accordance with my test users' desires, I created a way for users to "favorite" a restaurant, and then access a list of favorites from their profile.

I also added a "Previously Ordered" to the pages of restaurants users have ordered from before. Users can also access a list of their previous orders from their profile; here they can view information pertaining to past orders and choose to re-purchase.

While I created this design based on the assumption that location services are enabled, I wanted to create a way for users to adjust the set location if needed (e.g. if looking to see what options are available in a different neighborhood). For convenience, I designed a location search feature that lists previously searched locations. Users can adjust the location from both the Home and Search pages.

To facilitate the search process, I included a variety of search filters based on my test users' preferred criteria. I also included a way to limit search results to restaurants that are currently open, another request from a test user.

I also clarified the checkout process by disabling the "Place Order" button until all required fields are entered in order to ensure users follow the correct workflow.

For the finishing touches, I added icons to denote vegetarian and gluten free items, and refined the design of the delivery information screen to match the general look and theme of the app more closely.

Final Designs

After a few more minor tweaks, I finalized my high-fidelity prototype:

Takeaways

This exploratory project reinforced my belief that AI can be a powerful assistant in the UX design process, especially for uncovering patterns, generating inspiration, and rapidly iterating on ideas based on real-world data. I found that AI tools helped me streamline research, recognize common user workflows, and quickly establish a design direction informed by industry trends.

However, what stood out most is that true user empathy can’t be automated. No matter how advanced algorithms become, they can't replace the insights gained from real human interactions, emotional understanding, or the nuanced complexities that come with actual user behavior. This project reminded me that while AI tools can augment a designer’s work by boosting efficiency and prompting new perspectives, the heart of good design remains rooted in human empathy and context.

Next Steps

If I were to continue this project further, I would:

Conduct more structured usability testing with a wider group of users to validate assumptions and uncover friction points.

Explore AI-assisted prototyping tools for enhanced motion design and interaction exploration.

Refine the onboarding experience with personalized recommendations based on user preferences identified through testing.

Overall, this project not only expanded my toolkit with AI-driven workflows but also deepened my commitment to human-centered design as the foundation of meaningful product experiences.