top of page

Food & Groceries App

Overview

This mobile app is made for food and groceries services called Foodies. A typical user is an individual or family person looking to order food for dinner or buy weekly groceries online 

The Goal

Design an app for Foodies that allows users to easily order food or groceries and find it convenient to have it delivered or picked up according to their convenience.

Role

UX Designer leading the mobile app design for Foodies platform

Project Software

Figma

Project View

Mobile Version

Foodies

The Process

Design-Thinking-Graphic-5-Stages-1.png

Empathize

Empathize

Understanding the User

I conducted interviews with potential users who are willing to express their thoughts and opinions about the Foodies app for food in Sweden.

I was open to understanding both perspectives. People dislike eating outside food in general as it is very expensive. And the other type of people who have enough to spend and enjoy food from anywhere.  My main target audience of interviews that were conducted were from the ages of 20-40 years and 2 different cities in Sweden, Norrköping, and Stockholm.

 

The larger group of people who order food from Foodies were between the ages of 20-25 approx. They order food at gatherings and occasions, like birthdays, holidays, etc.

Define

Define

Research Questions

  1. How long does it take for a user to order food or groceries using the app?

  2. Are users able to successfully order food or groceries that they want?

  3. What can we improve from the steps users took to order food or groceries?

  4. Are there any parts of the process where users are getting stuck?

  5. Is there a good flow to the entire process?

Participants

  • 5 participants

  • Participants between 18-65 years of age who reside in Sweden

  • Participants who order food or groceries at least once a week

Methodology

  • 25-30 minutes

  • Sweden (remotely)

  • Unmoderated Usability Study

  • Users were asked to order food on a low-fidelity prototype

User research: Pain Points

 1

Cost

Users find it too costly to order food, especially when the app charges extra for food deliveries.

2

Time

Some users can find the right time to order or pick up the food.

3

No Application

Platforms for ordering food are not downloaded and are not equipped with assistive technologies.

4

Personal Preference

Users prefer to not eat out and just cook their food

Ideate

Ideate

UX Storyboard Paper Wireframes

A storyboard is a series of panels or frames that visually describes and explores a user’s experience with a product. Telling a story through visuals is often more effective than using words. 

 

A real product might have many screens, but your storyboard should focus on just the most important parts of a user’s experience with a product. 

Big Picture Storyboard

Big picture storyboards focus on what the user needs, their context, and why the product will be useful to the user.

The user's behavior flow:

  1. ​Karen sees too many options of apps to choose from. She's confused

  2. Karen finally selects and downloads 

  3. Karen is happy to see different language selection options

  4. Karen completes her order and waits for her food to arrive as she selected delivery

  5. Karen's food delivery has arrived

  6. Karen enjoys her food happily

foodies-BIg Picture

Close-Up Storyboard

Close-up storyboards focus on the product. I demonstrated the user flow within the product and how each action within the product led to the next screen. ​I concentrate on the product and how it works.

The app flow:

  1. Karen opens up the app

  2. Karen is welcomed

  3. Karen selects the restaurant

  4. Karen orders food from the selected restaurant

  5. Karen's selected items are visible on the checkout page

  6. Karan's selects her option for delivery and confirms her order

Foodies-Close UP

Usability study: Findings

I conducted two rounds of usability studies, each round with a different user. Studies from both helped guide the mockup designs and to make adjustments according to what the users needed.

Round 1 Findings:

Users want to order food/groceries quickly

Users want the font to be bigger to be able to read

Too many items to choose from

1

2

3

1

Round 2 Findings:

Users would like the payment to also have the option of a bank transfer

“Don’t we need to log in?”

Users would like to collect points for each order

2

3

1

Research Insights - Features desired by Users

Users would like the opportunity to collect points and have their information saved.

Welcome / Log In Page

Users would like the “Grocery” option to be available on the menu page.

Quick Groceries option

Users need to know the ingredients in their food in case of any such allergies they need to be aware of.

Ingredients in food

To be quick and efficient, users would like to have “Swish” or bank transfer as an option.

Bank Transfer

Specific User Requirements  

  • Add a login page/profile so customers can collect points and have their information saved rather than having to fill out the payment page repeatedly.

  • Add Groceries in the menu page so users can directly go to that section.

  • Add ingredients so users can see what is in the item and select according to what they like.

  • Add a swish or a bank transfer for customers to easily the payment page.

Prototype

Prototype

Digital Wireframe

Moving from storyboards to digital made it easy to understand how to redesign and help address the user's pain points and improve the user experience better. 

Search Button- For User’s to specifically type in what they are looking for.

Restaurant option for users to select from.

Top pick restaurants from user’s average pick.

Another restaurant option for user’s to select from

foodie-LF wireframe_edited.png

Foodies

Filter Button- Users can filter/narrow down their options when selecting food options.

Groceries- User’s can also do groceries through this app.

Updated Details

(Based on insights and recommendations)

Welcome / Log in page

Add a login page/profile so customers can collect points and have their information saved, rather than having to fill out the payment page repeatedly.

Before

Foodora - LF Wireframe_1.jpg

Foodies

After

foodies-log in page.JPG

Foodies!

Quick Groceries Option

Add Groceries in the menu page so users can directly go to that section.

Before

foodies menu bar before-.JPG

Foodies

Foodies

After

foodies- menu bar AFTER.JPG

Foodies

Ingredients in Food

Add ingredients so users can see what is in the item and select according to what they like.

Before

foodies- items BEFORE.JPG

Foodies

After

FOODIES-items AFTER.JPG

Foodies

Bank Transfer

Add a swish or a bank transfer for customers to easily the payment page.

Before

Foodies

foodies-paymentBEFORE.JPG

Foodies

After

FOODIES-payment AFTER.JPG

Foodies

Test

Test

High Fidelity Screen Flow

The final high-fidelity prototype is to have a clear view of the user flow for ordering food or groceries using this app. This has also met users’ expectations and needs for using the app easier.

Foodies-prototype wireframe_edited.png

High Fidelity Prototype

Takeaways

Impact

The app makes users feel like ordering food or groceries online or through an app considers the fact about what users need and want from it.

“Overall, I would want to use this app to order food online because of the variety of food from different restaurants and mainly, you can track it!"

Lessons Learned

While creating the Foodies app, I learned that the first ideas that I had were just the initial thoughts and ideas. As the process goes, with comments, critiques, and reviews from usability studies and peers, that is the main influence behind what the app is now. So I am very grateful for that.

Takeaways
bottom of page