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
1
HOUR LUNCH GAP
13
ON-CAMPUS CANTEENS
33,000
STUDENTS
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!
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 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.
-2.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
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
USER RESEARCH
Questionnaire Results
75%
Use cashless payment methods more than cash
73%
Opt for takeaway options compared to dining in
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
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.
USER RESEARCH
USER RESEARCH
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.
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.
-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.
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
IDEATION
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.
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.
PROTOTYPING
Adobe XD
Screens
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?
Summary of Results
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.
REFINEMENT #1
Invite friends
• Too small
• Poor placement on upper
right corner (unnoticeable)
• Not eye-catching enough
• Bolder colour instead of grey
Payment Successful
• Too small
• Poor placement
• Poor hierarchy with other components on screen
• Speech bubble is too dominant
REFINEMENT #2
.png)
REFINEMENT #3
Split bill
• Slightly confusing
• Step-by-step to explain process
• More screens to give more clarity
REFLECTION