top of page
iPad Air Render_edited.jpg

whatoeat

Project Overview

The Product

WHATOEAT is an app aimed to help users who are indecisive on what to eat. This app has features that users can pick for day and night sessions, which entails a fun and new way to express what they like to eat according to their moods. Besides that, assistive technology such as a screen reader have been made compatible with the app.

Project Duration

December 2022 to January 2023

My Role

UX designer designing the app WHATOEAT from conception to delivery.

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

The Problem

Indecisive couples when picking meals or restaurants.

The Goal

Design an app that has access to a selection of preferred restaurants to order.

To find ways to mitigate the  problem, I have undertaken the steps below to first understand my user base.

User Research

I conducted interviews and created empathy map to understand the users I’m designing for and their needs.  A primary user group identified through research were couples who find it difficult to come to a decision about their food orders daily that led me to the pain point of indecisivenessResearch also further revealed that most users are busy and work full-time, and they ordered take-outs more than visiting a restaurant physically which directed me towards the pain point in time. Challenges that made it difficult for users to come to a decision included mood swings and different emotions displayed throughout the day which redirected me to another user's pain point of emotions. These pain points gave an opportunity for WHATOEAT  to create an app that will be useful for a specific demographic in our society.

Google UX Design Certificate - Empathy Map [App for deciding what to eat].png

Personas & Problem Statement

Persona - MAX & TERESA

Next, using the empathy map created in previous session; I developed a set of persona to help me understand further the user group I would like focus on. Personas card gave identity and problem statement which provided me a clear description of the users' needs that should be addressed.

Problem Statement

 

Max and Teresa were a busy couple who needed access to a selection of preferred restaurants to pick daily because they always ended up in an argument on what to eat which had significantly taken a toll in their relationship.

Google UX Design Certificate - Persona [App for deciding what to eat].png

Mapping Max and Teresa’s user journey revealed how helpful it was for users to have access to a selection of preferred restaurants like WHATOEAT app.

Google UX Design Certificate - User Journey Map [App for deciding what to eat].png

Competitive Audit

Then, I researched and identified several direct and indirect competitors present on the market. Competitive audit exercise helped me to solve usability problems and reveal gaps and opportunities present which can be applied when ideating the WHATOEAT  app.

WHATOEAT 2.PNG
WHATOEAT 3.PNG
WHATOEAT 1.PNG

Ideation

Later, I did a quick ideation exercise using crazy eight method to come up with ideas on how to address gaps identified in the competitive audit.

whatoeat crazy 8_1.jpg

To start the design process, I made the decision to use a sequential structure for the app design which led users through step-by-step process. Gestalt Principles were applied from conception to final stages of design.

_edited.jpg

1

Paper Wireframes

Graphic Designer

2

Digital Wireframes

Prototype Designer

3

Low-Fidelity Prototype

Study Group

4

Usability Studies

Paper Wireframes

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

paper wireframe whatoeat_1.jpg

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points of indecisiveness, time and emotions.

 

The home screen paper wireframe variations below prioritized a quick and easy ordering process to help users save time.

refined ppr wireframe whatoeat_1.jpg

Refined paper wireframes

Digital Wireframes

This day/night option was made to be accessible easily for day or night orders

Mood and favorited restaurant combined together to generate easy meal of the day

Combination between mood for the day and preferred restaurant generated to address different emotions displayed throughout the day

favorites & mood.png

Moving from paper to digital wireframes in Figma made it easy to understand how the redesign could help address user pain points and improve the user experience of WHATOEAT app.

Prioritizing useful button locations and visual element placement on the main page was a key part of my strategy.

This option enabled users who are indecisive on what to eat for the day

As the initial design phase continued, I made sure to base screen designs on feedback and findings from  the user research

homepage.png

Low-Fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was ordering a meal, where the prototype was then used in the usability study.

Usability Studies

Once I was satisfied with the prototype, I conducted an unmoderated usability study to assess how easy it was for participants to navigate through the app. To ensure a seamless output from the study, I have prepared research questions that reduced implicit bias and experience bias.

At this point, I had received feedback on my designs to enable a more intuitive way to navigate the app. I made sure to listen to their feedback, and I had implemented several suggestions in places that addressed user pain points.

Study Type

Unmoderated usability study

Location

Malaysia, remote

Participants

5 participants

Length

5-10 minutes

Parameters Set

Findings

accessibiity.png

Accessibility

Users were satisfied with inclusive feature for accessibility

homepage.png

Navigation

Users wanted a more intuitive way to access screens 

night dish option.png

Quantity

Users wanted an average amount of options that can reduce level of indecisiveness 

With the basic prototype in place, I started refining the design process. Using the insights gathered from usability study, I created mockups that reflected the brand identity by incorporating various aspects of the design system.

Mobile Mockup

1

Mockups

Mobile Phone

2

High-fidelity Prototype

Wheelchair Icon

3

Accessibility

Mockups

Typography(3).png

Early designs allowed for some customization,
but after the usability studies, I revised the design so users could
see all the options when they first landed on the homepage screen, thus allowing intuitive user flow. 

The second usability study revealed users needed an average amount of options to reduce the level of indecisiveness. I have reduced the amount of options presented in this screen.

App Mockups

homepage(1).png
day dish option.png
delivery(1).png

Heading towards the final stages of the design process, I had to ideate on the visual branding of my design. To start, I looked at various typography options available, and finally set my eyes on Inter  which gave a prominent look that will drive your attention to the page. 

 

Next, I wanted a color grading that was minimalistic and was easy on the eyes. Following that idea, Hex Code 000000  was chosen whereas Hex Code FFFFFF  accompanied it to allow visual balance. A 60-30-10 rule were applied in the overall  colour palette, where Hex Code 000000  was the neutral color and Hex Code FFFFFF  as the second complimentary color whilst Hex Code 453D3D  was the third accent to allow emphasis and contrast.

Last but not least, I decided to incorporate delicate but strong symbols and images associated with the main theme of WHATOEAT. Action buttons that were presented in imagery forms was a recurring iconography  that can be seen throughout the mockups.

All the typography, iconography and color schemes were compiled together and presented in the design systems.

Colors(3).png
Icons(2).png

After usability studies

After usability studies

day dish.png
night dish option.png
night dish option(1).png

Before usability studies

Before usability studies

homepage.png
homepage(1).png

High-Fidelity Prototype

Subsequently, the final stage of the design process involved including navigation and  interaction features. Based on the usability study, an intuitive navigation and averaging limitation of options available were the best course of action for WHATOEAT app. I  chose a Z-shape layout that would be best for users with visual disability; enabling users to skim information from left to right, then move diagonally to the left; before being able to scan to the right again.

Regular gestures and motions were used to create a simplistic aesthetic throughout the app.

Accessibility

Lastly, the final touches involved emphasis on positive inclusion of the product design for people with cognitive and physical disabilities.

 

During the ideation phase this product, I was aware that I wanted to incorporate designs that catered to a wide demographic of users. Keeping that in mind, I ensured my focus on users of assistive technology and visual disabilities were intact during designation processes of each screen of the app.

edit profile.png
accessibiity(1).png
night dish other option.png

01

Used icons to help make navigation easier.

02

Provided access to users who are vision impaired by adding color blindness and text-to-speech options.

03

Used detailed imagery for restaurants helped all users better understand the designs.

The entire designing process had allowed me to focus my attention to details that were both visible to the naked eye as well as minor details that were normally been overlooked upon.

Paper bag

1

Takeaways

Pink Stairway

2

Next Steps

Takeaways

Impact

The app made users feel WHATOEAT have had made their communication skills better between their significant other and created a quality relationship.

What I Learnt

While designing the WHATOEAT app, I learned that the first ideas for the app were only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

Conduct more user research to determine any new areas of need.

bottom of page