Project overview

Description

FoodViet is the best food delivery app for food. Users can easily find restaurants and order food. Our goal is to find the best quality of food and restaurants for our costomers. Providing food from every famous food place near you. Now order food at home.

The Purpose of our applications is to show how we can optimize this process as much as possible, and make is not only convenient but also with a beautiful and clean UI.

My role

Design process

Empathize

Conduct user interview
Identify user pain points
Create empathy map

Define

Create personas
Craft user stories
Build user journey maps
Create problem statements

Ideate

Outline User flows,
Information Architecture
Create storyboards

Prototype

Create wireframe
Build UI style guide
Create mockup
Create lo-fi & hi-fi Prototype

Test

Conduct a usability study

Qualitative research

I want to under stand common challenges people face trying to manage a busy schedule and meal planning.

I want to identify frustrations people experience during the process of ordering from a restaurant.

Can you describe your current schedule and how you balance your responsibilities with meal planning?
How often do you order meals from a restaurant?
When you do, what is your motivation for doing so?
What challenges do you face in the ordering process?
How does this make you feel?
Is there any way in which you feel these challenges couldbe resolved?

Ages 18-52
Lives in Hanoi
People who order food from restaurants at least once a week
Include participants of different genders
Include participants with different abilities

Working adults are too busy to spend time on meal prep.
Platforms for ordering food are not equipped with assistive technologies.
Text-heavy meanus in apps are often difficult to read and order from.

I conducted interviews and created empathy maps to understand the users i’m designing for and their needs. A promary user group identified through research was working adults who don’t have time to cook meals. Research also revealed that time was not the only factor limiting users from cooking at home.

Other user problems included obligations, interests, or challenges that make it difficult to get groceries for cooking or go to restaurants in-person.

Empathy map

An emphathy map is an easily understood chart that explains everything designers have learned about a type of user. An empathy map consists of four shapes, which show what the user says, does, thinks, and feels. The word user goes in the middle.

SAYS

I live an active lifestyle so I need healthy meal options.
I just don’t have the time to cook them myself.
I want to quickly and easily order from a order from avariety of healthy meal options.

THINKS

Why should I order? Should I try something new?
I can spend less time planning meals and devote more time to my hobbies.
Buttons are too small and difficult interact with.

DOES

Randomly browse the app looking for inspiration.
Has difficulty interacting with interface of apps.
Orders food after spending time researching pickup options.

FEELS

Feel annoyed about the waiting time.
Dissatisfied with scrolling to find phone number.
Happy to eat after a long day.

Personas

Persona are fictional users whose goals and characteristics repersent the needs of a larger group of users. Personas can help us identify patterns of behavior in users. These patterns might point to a common pain point that a group of users experiences.

User journey map

A journey map is just what it souds like, an illustration of what the user goes through to achieve their goals. A user journey is the series of experiences a user has as they achieve a specific goal. User journey built off the personas and stories that have been already created.

User flow

User flow is a type of diagram used in UX design, It represents the workflow or process form users perspective. In the basic form, User Flow represents the task in form of picture with blocks connected by arrows. Diagram does not have to belinear, just like taks in the application. It may have alternative paths, loops, etc.

Information Architecture

Information Architecture (IA) is a process that forcuses on the structure and organazation of content within a digital product.
The goal of information architecture is to organize content in a way that makes it easy for users to learn, adapt to, and navigate a product quickly and with mininal difficulty

Paper Wireframe

A wireframe is a two-dimensional illustration of a page's interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics.
‍
First, I sketch the low-wireframes on papers and then, I transition from paper to digital wireframes.

Digital wireframe

After i've explored multiple ideas for wireframes on paper, and i understand which wireframe elements will provide the best user experience, it's time to bring my paper wireframe to life digitally. While drawing wireframes on paper is fast and inexpensive, things get a little trickier when i move to digital wireframes.

FoodViet