top of page
new_newfoodpal.png

FoodPal

A go-to online platform for all your dining needs

A mobile application that makes your dining in or takeaway experience, a more pleasant one through specialised features such as filtering options, crowd monitoring and providing a seamless shared payment journey. 



Nanyang Technological University Singapore 
DV2008 Interface Design

OVERVIEW

DURATION

January - April 2021 ( months)  

ROLES

Fenella Alfri: Design Lead, Logo Designer, UI/UX      Designer (Crowd/Queue)
Shariffah Nur Alawiyah: UI/UX Designer (Payment) Brian Chong: UI/UX Designer (Reward System) Bryan Lim: UI/UX Designer (Filtering Location) 

SOFTWARES

subheading-17.png
ux foodpal.png

HOUR LUNCH GAP

13

ON-CAMPUS CANTEENS

33,000

STUDENTS

foodpal bg.png

01 / 
OVERVIEW

NTU students are in a constant race for time and food. Cramming in lunch meals before class, long queues and inefficient management system. These factors contribute to peak-hour chaos resulting in delays.

One-stop platform to cater to all your dining needs

A food ordering and payment platform that allows you to browse, order and pay for canteen dishes. Skip the queue by engaging in the pre-order feature for dine-in or takeaway options. Users can start group orders to help buy friends’ meals and even split payment to request for transfers after through the app. They can even find real-time crowd estimations, a filtering option to recommend different food canteens, promotions and more! 

foodpal phone copy.png

02 / 
CHALLENGE

Lunch times often calls for canteen chaos; long queues, an influx of crowds and increasingly agitated customers are amongst some of key issues that many student and staff face.

03 / 
GOAL

The main goal is to create one-stop ordering and payment platform that aims to cut long queues, save time, minimise disruption to schedules by offering a faster, efficient and seamless system for users to grab meals. 

Design Process

1

2

3

4

5

Empathise

Research
 

Define

User Persona

Ideate

User flow, Sketches

Build

Wireframes, Prototype

Test

Final UI Screens

research.png

RESEARCH METHOD 

Secondary Research

For this app, we looked at existing mobile applications that we identify pain points and other features we could introduce. These are the main two applications that we researched before diving into our own proposed app. 

Portfolio Food (2)-2.png
nus.png
cates.png

Both apps utilise cashless payment online, and indicate statuses of their food when payment is made and food is prepared/delivered. Moving forward with our proposed app, we enjoy the intuitiveness and overall user interface of Cates NTU, however we identified that the reach of the app does not go beyond non-NTU hall residents. This is also an issue for hall residents if they are outside of their halls at libraries or school buildings. There is also a strict timing of when orders can be made for lunch and dinner, which can restrict the number of users who do not eat during these times. For NUS Smart Dining, we enjoyed that users have more freedom when they order food online and can simply pick up orders in person in stall.

RESEARCH METHOD 

Primary Research

Screenshot 2022-01-17 at 5.34.23 PM.png

After completing preliminary research on similar apps in the market, and highlighting the pros and cons of each, we decided to conduct our own online survey targeted specifically at NTU students and staff to uncover the real problems and challenges faced by this groups in regards eateries in NTU. This would lead us to the main issues we'd solve through our app.

Online survey through Google Forms

Sample Size: 76
Student, Staff, Alumni


Aim of Online Survey

To understand, assess thoughts and feelings of potential users on possibility of app for NTU eateries

To discover users’ feature preferences & schedule patterns and its linkage to eatery options


Distribution Channels
Telegram, Instagram







Information Gathering
Multiple choice, Open Ended, Scale Rating, Likert Scale,
Drop-down & Image Choice Questions

tele copy.png
ig copy.png

USER RESEARCH

Questionnaire Results

cashless-payment copy.png

75%

Use cashless payment methods more than cash

take-away copy.png

73%

Opt for takeaway options compared to dining in 

queue copy.png

78%

Stated that queueing in line is disruptive to their schedule

User #1

Insufficient time

“I only have 1h gaps between lessons, and I have a friend who takes anywhere from 45min to an hour to eat. It's pretty tough for her and her friends who eat with her when she rushes to make it for class.”

- First-year student
  School of Biological Sciences (SBS)

User #2

Reduced Productivity

“It feels really unproductive to be waiting in line as I could have done something else, and also sometimes when the queue is too long I would end up not eating so as to not be late for classes”

- Penultimate-year student
  School of Electrical & Electronics Engineering (EEE)

User #3

Snowball effect

“It would be nice to have known about the queue before having to go to a certain place first only to discover that there is a long queue, especially when one has a certain schedule to stick to (eg. lunch is supposed to be from 1-1.30, but because of the queue, everything else can be pushed back).”

- Final-year student
  School of Art, Design & Media (ADM)

USER RESEARCH

Pain points

Through the survey, we were able to uncover some patterns in attitudes towards long queues and summarised it into the following points. This allowed us to curate useful filters for the app for users to plan their meal times and schedules ahead.

Insufficient Time

Reduced Productivity

Snowball effect

Limited time in between classes resulted in 3 possible scenarios

Reduced productivity

    

Snowball effect

1

Students who have to rush through their meals 

2

Students who opt for small snacks to finish in time for class​

1

Respondents felt like time is wasted standing in long queues when the time could have been spent doing something else

3

Students who don’t eat at all and will skip meals

1

Respondents often misjudged crowd timings in eatery leading to a shift in intended plans

2

Subsequent plans during unexpected long queues result are then compromised or affected 

define.png

User Persona

Using the quantitative and qualitative data from the survey results, I created three target profiles to better empathise with the user's needs. 

Note: these are based purely from assumptions and the survey results.

persona.png
persona copy.png

USER RESEARCH

USER RESEARCH

food_foodpal copy.png

User Journey Mapping

A user journey map gives a visual representation of various touch points and interactions between the user and the potential app overtime. This timeline allows us to view from user's point of view to better assess their needs and gain insights from the takeaways. 

ideate.png

User Goals

After the initial user research and our assumed user personas and user journey, we decided to simplify further and prioritise the user goals of our proposed application. Understanding the user goals helps us stay on track of our product's direction and helps us influence our design decisions to consistently address these user goals.

1

View crowd system figures in real-time

2

Order food online in advance

3

Pay online

4

Receive notification updates on status of meal

5

Get alerts when food is ready

IDEATION

IDEATION

"How Might We"

We transformed the user goals to smaller "How Might We" statements to reframe our insights into opportunity areas to create a desired experience for the users. By keeping the statements relatively vague and open, it avoids limiting our creativity and explores all possible explorations to tackling this problem. 

Portfolio Food (3)-1.png

IDEATION

Affinity mapping

This effective method allowed us to come together as a team and throw ideas easily onto post-it notes. We discussed these ideas and observed patterns to categorise for further review and analysis. We highlighted issues that we wanted to prioritise by using placing a red star next to each note for indication. 

hp.1-1 copy 2.png
hp.1-1 copy 2.png
hp.1-1 copy 2.png

Primary Feature

CROWD

1

Offer greater flexibility through advanced ordering feature

Optimise efficiency and productivity by crowd management system

Secondary Feature

2

Encourage quick and easy payment methods for shared payment experiences
 

PAYMENT

3

Promote alternative eatery destinations based on customers' distance filters

FILTER

Allowing customers to input order in advance and select a pickup time (min. time for cooks to prepare)

Present virtual queues and generate alert notifications through SMS when queue number is approaching 

Removes hassle of card/cash payment

1

Before payment to stall 

Food ordering display screen specifying number of meals
Input order details from stalls
Attach name of diners to orders from contact list with registered number 

After payment to stall 

E-receipt generated after payer buys for more than one person
An SMS will be sent requesting payees for payment transfer through cashless transactions

2

Filter maximum, willing waiting time 
Filter maximum, willing walking time 


Alternative food canteen route by suggesting next canteen within users' indicated maximum waiting/walking time

Filter food preferences and restrictions 

Generate options for specific food preferences or dietary/religious restrictions e.g. vegetarian/halal food

3

build.png

IDEATION

hp.1-1 copy.png

User Flow

Note: For purposes of this case study, I have decided only to include my part of the project (Crowd).

 

Next, we proceeded with designing our task flow to better understand the user journey to complete a specific task in which we separated into three sections: crowd, payment and filter.

BRAINSTORMING

Initial Sketches

We started sketching screens of top priority to help us brainstorm and refine ways of presenting the information that users could easily understand. We ideated different ways for the functions we had prioritised, and discussed to continuously improve and generate new and innovative features. 

hp.1-1 copy.png
hp.1-1 copy.png

PROTOTYPING

Low-fidelity mockups

After understanding our wireframe sketches and thinking about the preliminary flow, we proceeded to translate the sketches into digital low-fidelity mockups, crafting the screens using simple shapes for the composition. This allowed us to test the functionality of the product as well as attempt to visualise the whole user experience. 

hp.1-1 copy 2.png
hp.1-1 copy 2.png
hp.1-1 copy 2.png
hp.1-1 copy 2.png

PROTOTYPING

Adobe XD 
Screens

hp.1-1 copy 2.png
foodpal_test copy.png

We asked a group of 15 NTU students aged 20-27, to identify user pain points and difficulties using our prototype. We asked them a set of questions and observed the way they navigate through the interface. 

 

1)    General context is given to our users prior to testing - "This is a NTU eatery app used             for ordering food, viewing queue times and congestion as well as navigation."

2)   Users test out the prototype through a series of instructed tasks with with light                       guidance (if needed). Our team observed and took notes along the way.

3)   Present them with a short set of questions at the end of the testing

TESTING

Usability Testing

The questions asked but were not limited to:

01 /  How would you describe your overall experience with the product?
02 /  What do you like least?
03 /  What surprised you about experience?
04 /  What caused frustration while using the app?
05 /  Would you use this app?
06 /  How easy was it to order?
07 /  How was the payment process like for you?

foodpal_test.png

Summary of Results

Portfolio Food-1.png

Insight #1

Generally intuitive but a bit too detailed for new users, making it difficult to navigate across screens

In further refinements we seek to test out different screens with users on how to improve the navigation usability across screens

Insight #2

Aim to provide an easier reading experience. 

We could take further measures to ensure an easier reading experience for users with clearer visual elements, hierarchy

Insight #3

Our systems were creative and well-thought out, but may be overwhelming. 

We could streamline functions and provide simplicity by introducing step-by-step guides and present the features individually to reduce friction

EVALUATION

Refinements

We evaluated the responses from our usability testing to make iterations from. Due to time constraints, we decided to focus on the critical issues that could be fixed in a short amount of time. We also decided to improve some of the visuals such as adopting a more dominant, gradient orange colour to create a more dynamic and modern take. 

foodpal_refinements copy.png
foodpal_refinements copy.png

REFINEMENT #1

Invite friends

•  Too small
•  Poor placement on upper
    right corner (unnoticeable)
•  Not eye-catching enough
•  Bolder colour instead of grey

foodpal_refinements copy.png
foodpal_refinements copy.png

Payment Successful

•  Too small
•  Poor placement
•  Poor hierarchy with other                                    components on screen
•  Speech bubble is too dominant

REFINEMENT #2

foodpal_refinements copy.png
foodpal_refinements copy.png
Final Split Bill Pop-Up Screen 13 (1).png

REFINEMENT #3

Split bill

•  Slightly confusing
•  Step-by-step to explain process
•  More screens to give more clarity

final_foodpal copy 2.png

REFLECTION

Takeaways

1)   Understanding the importance of user testing & how it can greatly improve user                 experience

•    Intuitive design is not universal, we learnt that through user testing, we can truly                  understand the user's pain points and go back to reiterate the design solutions
 
2)  
Time constraints led to lack of further testing from refined version of interfaces. 
 
3)  User research & understanding problems e.g. challenges and user groups, before
     diving into designing allows us to gather valuable insights to create an app addressed 
     to meet the user group's unmet needs

4)  We could have
reduced the number of features we designed, instead prioritise on the       ones that addresses the user's needs and test and iterate from there. 

bottom of page