A food delivery app with
AI-powered assistant
Case Study
Let's get started! 🚀
Context
I embarked on a personal project as part of my Google UX Professional Certificate in 2021. Sharpen presented a design challenge to create an AI-powered chatbot food ordering app specifically tailored to address the frequently reported user pain points observed in popular food delivery apps like GrabFood, FoodPanda, and HappyFresh Malaysia.
The Challenge
Frequent lockdowns in Malaysia have driven demand for food-ordering apps. However, the most frequently used food delivery apps (discussed in the Research section) lack features like ease of navigation, saving payment methods, language preferences, and other reported user pain points identified during the research process.
The Crew
Mahum Shehryar, UX Researcher
Shehryar, UX/UI Designer
Muhammad Bilal, Restaurant Owner
My Role
I handled app design tasks, including:
Wireframing
Low-fidelity Prototype
Usability Testing
User Journey Maps
UX Writing
High-Fidelity Mockups & Prototype
Tools
UI Design, Prototyping, Handoff
UX Research & Workshops
UX Presentations
UI Animations
Illustrations
Content design
Timeline
8 weeks (part-time) for this project:
1 week for Course 1: Foundations of User Experience (UX) Design
1.5 weeks for Course 2: UX Design Process
1.5 weeks for Course 3: Build Wireframes and Low-Fidelity Prototypes
1.5 weeks for Course 4: Conduct Research and Test Early Concepts
2.5 weeks for Course 5: Create High-fidelity Designs and Prototypes
Design Process 💡
Our design process for the app followed the agile and iterative principles of Design Thinking. I started by empathising with users to define problems, then conducted internal workshops for ideation, developed a prototype, and iterated through various stages to refine my designs.
Research
Primary Research
Surveys.
Video interviews.
Secondary Research
Competitor Audit via Google PlayStore and AppStore reviews.
Food Apps interface research on Mobbin.
Pain Points
Following survey analysis, I organised an internal workshop with the restaurant owner to rank each pain point on a 1-5 scale, considering both user feedback and business profitability. The top 5 user pain points identified during this session were:
No ingredients info
The local food names are not understood by outsiders and foreigners. Users want to try out new dishes but are reluctant to order when ingredients are not mentioned.
No pickup option
When users are outside doing groceries or other work, they prefer to pickup order while heading back to home. This saves them the time it takes for the food to be delivered at home.
No multi-language feature
Most of the apps have UX writing done in a single language only, mainly ENG which is not the main language of Malaysia.
Rider communication cost
Oftentimes, users have to call or text the rider to coordinate, resulting in an additional cost to the users.
No contact less payment
For small orders, food delivery apps charge an extra fee for using online payment services. In such cases, users are left with no option but to choose cash on delivery.
No ingredients info
The local food names are not understood by outsiders and foreigners. Users want to try out new dishes but are reluctant to order when ingredients are not mentioned.
No pickup option
When users are outside doing groceries or other work, they prefer to pickup order while heading back to home. This saves them the time it takes for the food to be delivered at home.
No multi-language feature
Most of the apps have UX writing done in a single language only, mainly ENG which is not the main language of Malaysia.
Rider communication cost
Oftentimes, users have to call or text the rider to coordinate, resulting in an additional cost to the users.
No contact less payment
For small orders, food delivery apps charge an extra fee for using online payment services. In such cases, users are left with no option but to choose cash on delivery.
Personas
Throughout design discussions, I consistently referred to the personas to validate design decisions and prioritise features. By visualising users' personalities, goals, behaviours, and frustrations through the personas, I could empathise with our users more deeply and approach the product from their perspective.
With the assistance of a UX researcher, I crafted the following two personas.
First, let's sketch ✏️
Paper wireframes
Sketching made it easier to draw various ideas using just a pen and paper. It saved our time and helped us to draw ideas without any constraints. This image here shows 5 different options for home screen design. We gave stars (orange color) to the elements liked in each design option and later combined it into 1 design on the right.
Digital Wireframes
Using mobile wireframe kit available on Figma, we created digital wireframes to develop a prototype for testing. Mobile wireframe kit helped us to create digital wireframes with some of the most commonly used components of android and iOS such as input, tabs, navigation bars and radio buttons.
Low-fidelity prototype
Using interactions in Figma, I connected hotspots to the respective screens in order to create a low-fidelity prototypes. These low-fidelity prototype were then used for UT.
Paper wireframes
Sketching made it easier to draw various ideas using just a pen and paper. It saved our time and helped us to draw ideas without any constraints. This image here shows 5 different options for home screen design. We gave stars (orange color) to the elements liked in each design option and later combined it into 1 design on the right.
Digital Wireframes
Using mobile wireframe kit available on Figma, we created digital wireframes to develop a prototype for testing. Mobile wireframe kit helped us to create digital wireframes with some of the most commonly used components of android and iOS such as input, tabs, navigation bars and radio buttons.
Low-fidelity prototype
Using interactions in Figma, I connected hotspots to the respective screens in order to create a low-fidelity prototypes. These low-fidelity prototype were then used for UT.
Tested early concepts 🧪
We sent our low-fidelity prototype link to participants via email and WhatsApp. The reason to conduct an unmoderated usability testing was to eliminate social desirability bias (happens when a participant answers a question based on what they think you want to hear) and framing effect (when participants make a decision or choice based on the way information was presented to them).
Study Method
Unmoderated. Prototype link sent via email.
Duration
15-20 minutes
Participants
5 people. 3 male and 2 female.
Location
Malaysia
User Flow
I tested the user flow for the key journeys to validate the flow.
Key findings from UT
Order for future
Supporting evidence from the usability study states that:
3 out of 5 participants wanted to order for a future date or time.
This means that the first thing we should ask users is if they want to order now or later.
“I want to pre-order my dinner as I may forget to order in the evening. But seems like there no option to order in advance” Kelly Koh
Save delivery address
Supporting evidence from the usability study states that:
4 out of 5 participants wanted to save the delivery address for future orders.
This means that we should give the user the option to save the delivery address while placing the order.
“If I want to order again, do I need to enter the delivery address again? Argh, why can’t I save my address for future use?" Leo Shen
Save card details
Supporting evidence from the usability study states that:
3 out of 5 participants wanted to save card details for future orders.
This means that we should give users the option to save card details for a fast checkout process.
“I order from my husband’s card. Better if I can save the card details as sometimes he’s not around." Fareeha Bilal
Order for future
Supporting evidence from the usability study states that:
3 out of 5 participants wanted to order for a future date or time.
This means that the first thing we should ask users is if they want to order now or later.
“I want to pre-order my dinner as I may forget to order in the evening. But seems like there no option to order in advance” Kelly Koh
Save delivery address
Supporting evidence from the usability study states that:
4 out of 5 participants wanted to save the delivery address for future orders.
This means that we should give the user the option to save the delivery address while placing the order.
“If I want to order again, do I need to enter the delivery address again? Argh, why can’t I save my address for future use?" Leo Shen
Save card details
Supporting evidence from the usability study states that:
3 out of 5 participants wanted to save card details for future orders.
This means that we should give users the option to save card details for a fast checkout process.
“I order from my husband’s card. Better if I can save the card details as sometimes he’s not around." Fareeha Bilal
Created a Design System ⚙️
Inspired by Material 2 and Human Interface guidelines, I created a design system for Foodssistant containing stylesheet and components to ensure consistency across all high-fidelity mockups.
Minimum 4.5:1 typography contrast as per WCAG guidelines.
Touch targets were 48 x 48 px as per Material 2 guidelines.
Followed 10-point fluid grid layout for more negative space.
High-Fidelity ✨
Onboarding
Onboarding journey contains splash screen with GET STARTED button placed in best reach of the thumb. The onboarding journey requires verification of mobile number and setting up a password. As the app allows saving payment methods, a password validation hint is provided to encourage users to set a secure password.
Mobile Wallet
To address transaction fee frustrations, we introduced a mobile wallet for users like Kelly. It allows one-time top-ups for small orders without fees. Marketing can offer food promos and discounts for using a mobile wallet as the payment method. In the next phase, the legal team can apply for an e-wallet license, which will allow users to pay at the restaurants using the Foodssistant wallet.
Bottom Navigation
Several studies say that using bottom navigation instead of a Hamburger menu drastically increases the use of your core app features. It saves time for users like Kelly by navigating through the app easily with all targets placed in the center of the thumb zone.
Search Food & Restaurants
Showing 'Search History; saves user's time by quickly looking for what they want. The is very helpful for users like Kelly who don't have time to go through a long list of food items.
Foodssistant Chatbot
One of the USP of Foodssistant is its AI-powered chatbot. Using Google's Dialogflow, the chatbot provides a personalized experience for users, offering tailored food suggestions based on their order history and preferences. This feature is particularly valuable for users like Kelly, streamlining the menu exploration process and delivering recommendations aligned with her taste.
Save Delivery Address
At checkout, users can choose auto-detection or manual input for their delivery address. Toggling a switch saves the address, and 'Saved Address' button allows users to quick access to previously saved addresses.
Save Card Details
Adding and saving card details on Foodssistant is incredibly convenient. The app scans the card information, automatically filling in the details for users, minimising both time and errors. To save the card, users like Fareeha Bilal, who use a spouse's card for orders, can easily toggle the switch and save card details for future orders.
Rider Communications
Addressing the extra cost highlighted in the pain points, Foodassistant integrates in-app chat and voice call features via Agora for seamless communication between users and riders during order tracking, eliminating additional phone line charges.
Change Language
The Change Language feature proves useful for users like Leo, residing in rural areas, as it enables him to read food information and ingredients in his native language.
Outcome 🎉
98%
Foundations of UX Design
99%
UX Design Process
100%
Wireframes & Prototypes
96%
Conduct UX Research
97%
High-fidelity Designs & Prototypes
Passed
Google UX Design Professional Certificate
What I learnt!
In my early years as a UX/UI designer in a startup, my primary emphasis was on collecting business requirements and translating them into designs, ensuring fulfilment of business needs.
This project highlighted the significance of user empathy and research, emphasising the importance of validating business requirements before the design phase.
By empathising with users, we ensured the product is created for them, not just for the business. I carried forward this approach, following Google's design thinking process in subsequent projects I delivered at ATX Group Malaysia.
A food delivery app with
AI-powered assistant
Case Study
Let's get started! 🚀
Context
I embarked on a personal project as part of my Google UX Professional Certificate in 2021. Sharpen presented a design challenge to create an AI-powered chatbot food ordering app specifically tailored to address the frequently reported user pain points observed in popular food delivery apps like GrabFood, FoodPanda, and HappyFresh Malaysia.
The Challenge
Frequent lockdowns in Malaysia have driven demand for food-ordering apps. However, the most frequently used food delivery apps (discussed in the Research section) lack features like ease of navigation, saving payment methods, language preferences, and other reported user pain points identified during the research process.
The Crew
Mahum Shehryar, UX Researcher
Shehryar, UX/UI Designer
Muhammad Bilal, Restaurant Owner
My Role
I handled app design tasks, including:
Wireframing
Low-fidelity Prototype
Usability Testing
User Journey Maps
UX Writing
High-Fidelity Mockups & Prototype
Tools
UI Design, Prototyping, Handoff
UX Research & Workshops
UX Presentations
UI Animations
Illustrations
Content design
Timeline
8 weeks (part-time) for this project:
1 week for Course 1: Foundations of User Experience (UX) Design
1.5 weeks for Course 2: UX Design Process
1.5 weeks for Course 3: Build Wireframes and Low-Fidelity Prototypes
1.5 weeks for Course 4: Conduct Research and Test Early Concepts
2.5 weeks for Course 5: Create High-fidelity Designs and Prototypes
Design Process 💡
Our design process for the app followed the agile and iterative principles of Design Thinking. I started by empathising with users to define problems, then conducted internal workshops for ideation, developed a prototype, and iterated through various stages to refine my designs.
Research
Primary Research
Surveys.
Video interviews.
Secondary Research
Competitor Audit via Google PlayStore and AppStore reviews.
Food Apps interface research on Mobbin.
Pain Points
Following survey analysis, I organised an internal workshop with the restaurant owner to rank each pain point on a 1-5 scale, considering both user feedback and business profitability. The top 5 user pain points identified during this session were:
No ingredients info
The local food names are not understood by outsiders and foreigners. Users want to try out new dishes but are reluctant to order when ingredients are not mentioned.
No pickup option
When users are outside doing groceries or other work, they prefer to pickup order while heading back to home. This saves them the time it takes for the food to be delivered at home.
No multi-language feature
Most of the apps have UX writing done in a single language only, mainly ENG which is not the main language of Malaysia.
Rider communication cost
Oftentimes, users have to call or text the rider to coordinate, resulting in an additional cost to the users.
No contact less payment
For small orders, food delivery apps charge an extra fee for using online payment services. In such cases, users are left with no option but to choose cash on delivery.
No ingredients info
The local food names are not understood by outsiders and foreigners. Users want to try out new dishes but are reluctant to order when ingredients are not mentioned.
No pickup option
When users are outside doing groceries or other work, they prefer to pickup order while heading back to home. This saves them the time it takes for the food to be delivered at home.
No multi-language feature
Most of the apps have UX writing done in a single language only, mainly ENG which is not the main language of Malaysia.
Rider communication cost
Oftentimes, users have to call or text the rider to coordinate, resulting in an additional cost to the users.
No contact less payment
For small orders, food delivery apps charge an extra fee for using online payment services. In such cases, users are left with no option but to choose cash on delivery.
Personas
Throughout design discussions, I consistently referred to the personas to validate design decisions and prioritise features. By visualising users' personalities, goals, behaviours, and frustrations through the personas, I could empathise with our users more deeply and approach the product from their perspective.
With the assistance of a UX researcher, I crafted the following two personas.
First, let's sketch ✏️
Paper wireframes
Sketching made it easier to draw various ideas using just a pen and paper. It saved our time and helped us to draw ideas without any constraints. This image here shows 5 different options for home screen design. We gave stars (orange color) to the elements liked in each design option and later combined it into 1 design on the right.
Digital Wireframes
Using mobile wireframe kit available on Figma, we created digital wireframes to develop a prototype for testing. Mobile wireframe kit helped us to create digital wireframes with some of the most commonly used components of android and iOS such as input, tabs, navigation bars and radio buttons.
Low-fidelity prototype
Using interactions in Figma, I connected hotspots to the respective screens in order to create a low-fidelity prototypes. These low-fidelity prototype were then used for UT.
Paper wireframes
Sketching made it easier to draw various ideas using just a pen and paper. It saved our time and helped us to draw ideas without any constraints. This image here shows 5 different options for home screen design. We gave stars (orange color) to the elements liked in each design option and later combined it into 1 design on the right.
Digital Wireframes
Using mobile wireframe kit available on Figma, we created digital wireframes to develop a prototype for testing. Mobile wireframe kit helped us to create digital wireframes with some of the most commonly used components of android and iOS such as input, tabs, navigation bars and radio buttons.
Low-fidelity prototype
Using interactions in Figma, I connected hotspots to the respective screens in order to create a low-fidelity prototypes. These low-fidelity prototype were then used for UT.
Tested early concepts 🧪
We sent our low-fidelity prototype link to participants via email and WhatsApp. The reason to conduct an unmoderated usability testing was to eliminate social desirability bias (happens when a participant answers a question based on what they think you want to hear) and framing effect (when participants make a decision or choice based on the way information was presented to them).
Study Method
Unmoderated. Prototype link sent via email.
Duration
15-20 minutes
Participants
5 people. 3 male and 2 female.
Location
Malaysia
User Flow
I tested the user flow for the key journeys to validate the flow.
Key findings from UT
Order for future
Supporting evidence from the usability study states that:
3 out of 5 participants wanted to order for a future date or time.
This means that the first thing we should ask users is if they want to order now or later.
“I want to pre-order my dinner as I may forget to order in the evening. But seems like there no option to order in advance” Kelly Koh
Save delivery address
Supporting evidence from the usability study states that:
4 out of 5 participants wanted to save the delivery address for future orders.
This means that we should give the user the option to save the delivery address while placing the order.
“If I want to order again, do I need to enter the delivery address again? Argh, why can’t I save my address for future use?" Leo Shen
Save card details
Supporting evidence from the usability study states that:
3 out of 5 participants wanted to save card details for future orders.
This means that we should give users the option to save card details for a fast checkout process.
“I order from my husband’s card. Better if I can save the card details as sometimes he’s not around." Fareeha Bilal
Order for future
Supporting evidence from the usability study states that:
3 out of 5 participants wanted to order for a future date or time.
This means that the first thing we should ask users is if they want to order now or later.
“I want to pre-order my dinner as I may forget to order in the evening. But seems like there no option to order in advance” Kelly Koh
Save delivery address
Supporting evidence from the usability study states that:
4 out of 5 participants wanted to save the delivery address for future orders.
This means that we should give the user the option to save the delivery address while placing the order.
“If I want to order again, do I need to enter the delivery address again? Argh, why can’t I save my address for future use?" Leo Shen
Save card details
Supporting evidence from the usability study states that:
3 out of 5 participants wanted to save card details for future orders.
This means that we should give users the option to save card details for a fast checkout process.
“I order from my husband’s card. Better if I can save the card details as sometimes he’s not around." Fareeha Bilal
Created a Design System ⚙️
Inspired by Material 2 and Human Interface guidelines, I created a design system for Foodssistant containing stylesheet and components to ensure consistency across all high-fidelity mockups.
Minimum 4.5:1 typography contrast as per WCAG guidelines.
Touch targets were 48 x 48 px as per Material 2 guidelines.
Followed 10-point fluid grid layout for more negative space.
High-Fidelity ✨
Onboarding
Onboarding journey contains splash screen with GET STARTED button placed in best reach of the thumb. The onboarding journey requires verification of mobile number and setting up a password. As the app allows saving payment methods, a password validation hint is provided to encourage users to set a secure password.
Mobile Wallet
To address transaction fee frustrations, we introduced a mobile wallet for users like Kelly. It allows one-time top-ups for small orders without fees. Marketing can offer food promos and discounts for using a mobile wallet as the payment method. In the next phase, the legal team can apply for an e-wallet license, which will allow users to pay at the restaurants using the Foodssistant wallet.
Bottom Navigation
Several studies say that using bottom navigation instead of a Hamburger menu drastically increases the use of your core app features. It saves time for users like Kelly by navigating through the app easily with all targets placed in the center of the thumb zone.
Search Food & Restaurants
Showing 'Search History; saves user's time by quickly looking for what they want. The is very helpful for users like Kelly who don't have time to go through a long list of food items.
Foodssistant Chatbot
One of the USP of Foodssistant is its AI-powered chatbot. Using Google's Dialogflow, the chatbot provides a personalized experience for users, offering tailored food suggestions based on their order history and preferences. This feature is particularly valuable for users like Kelly, streamlining the menu exploration process and delivering recommendations aligned with her taste.
Save Delivery Address
At checkout, users can choose auto-detection or manual input for their delivery address. Toggling a switch saves the address, and 'Saved Address' button allows users to quick access to previously saved addresses.
Save Card Details
Adding and saving card details on Foodssistant is incredibly convenient. The app scans the card information, automatically filling in the details for users, minimising both time and errors. To save the card, users like Fareeha Bilal, who use a spouse's card for orders, can easily toggle the switch and save card details for future orders.
Rider Communications
Addressing the extra cost highlighted in the pain points, Foodassistant integrates in-app chat and voice call features via Agora for seamless communication between users and riders during order tracking, eliminating additional phone line charges.
Change Language
The Change Language feature proves useful for users like Leo, residing in rural areas, as it enables him to read food information and ingredients in his native language.
Outcome 🎉
98%
Foundations of UX Design
99%
UX Design Process
100%
Wireframes & Prototypes
96%
Conduct UX Research
97%
High-fidelity Designs & Prototypes
Passed
Google UX Design Professional Certificate
What I learnt!
In my early years as a UX/UI designer in a startup, my primary emphasis was on collecting business requirements and translating them into designs, ensuring fulfilment of business needs.
This project highlighted the significance of user empathy and research, emphasising the importance of validating business requirements before the design phase.
By empathising with users, we ensured the product is created for them, not just for the business. I carried forward this approach, following Google's design thinking process in subsequent projects I delivered at ATX Group Malaysia.
A food delivery app with AI-powered assistant
Case Study
Let's get started! 🚀
Context
I embarked on a personal project as part of my Google UX Professional Certificate in 2021. Sharpen presented a design challenge to create an AI-powered chatbot food ordering app specifically tailored to address the frequently reported user pain points observed in popular food delivery apps like GrabFood, FoodPanda, and HappyFresh Malaysia.
The Challenge
Frequent lockdowns in Malaysia have driven demand for food-ordering apps. However, the most frequently used food delivery apps (discussed in the Research section) lack features like ease of navigation, saving payment methods, language preferences, and other reported user pain points identified during the research process.
The Crew
Mahum Shehryar, UX Researcher
Shehryar, UX/UI Designer
Muhammad Bilal, Restaurant Owner
My Role
I handled app design tasks, including:
Wireframing
Low-fidelity Prototype
Usability Testing
User Journey Maps
UX Writing
High-Fidelity Mockups & Prototype
Tools
UI Design, Prototyping, Handoff
UX Research & Workshops
UX Presentations
UI Animations
Illustrations
Content design
Timeline
8 weeks (part-time) for this project:
1 week for Course 1: Foundations of User Experience (UX) Design
1.5 weeks for Course 2: UX Design Process
1.5 weeks for Course 3: Build Wireframes and Low-Fidelity Prototypes
1.5 weeks for Course 4: Conduct Research and Test Early Concepts
2.5 weeks for Course 5: Create High-fidelity Designs and Prototypes
Design Process 💡
Our design process for the app followed the agile and iterative principles of Design Thinking. I started by empathising with users to define problems, then conducted internal workshops for ideation, developed a prototype, and iterated through various stages to refine my designs.
Research
Primary Research
Surveys.
Video interviews.
Secondary Research
Competitor Audit via Google PlayStore and AppStore reviews.
Food Apps interface research on Mobbin.
Pain Points
Following survey analysis, I organised an internal workshop with the restaurant owner to rank each pain point on a 1-5 scale, considering both user feedback and business profitability. The top 5 user pain points identified during this session were:
No ingredients info
The local food names are not understood by outsiders and foreigners. Users want to try out new dishes but are reluctant to order when ingredients are not mentioned.
No pickup option
When users are outside doing groceries or other work, they prefer to pickup order while heading back to home. This saves them the time it takes for the food to be delivered at home.
No multi-language feature
Most of the apps have UX writing done in a single language only, mainly ENG which is not the main language of Malaysia.
Rider communication cost
Oftentimes, users have to call or text the rider to coordinate, resulting in an additional cost to the users.
No contact less payment
For small orders, food delivery apps charge an extra fee for using online payment services. In such cases, users are left with no option but to choose cash on delivery.
No ingredients info
The local food names are not understood by outsiders and foreigners. Users want to try out new dishes but are reluctant to order when ingredients are not mentioned.
No pickup option
When users are outside doing groceries or other work, they prefer to pickup order while heading back to home. This saves them the time it takes for the food to be delivered at home.
No multi-language feature
Most of the apps have UX writing done in a single language only, mainly ENG which is not the main language of Malaysia.
Rider communication cost
Oftentimes, users have to call or text the rider to coordinate, resulting in an additional cost to the users.
No contact less payment
For small orders, food delivery apps charge an extra fee for using online payment services. In such cases, users are left with no option but to choose cash on delivery.
Personas
Throughout design discussions, I consistently referred to the personas to validate design decisions and prioritise features. By visualising users' personalities, goals, behaviours, and frustrations through the personas, I could empathise with our users more deeply and approach the product from their perspective.
With the assistance of a UX researcher, I crafted the following two personas.
First, let's sketch ✏️
Paper wireframes
Sketching made it easier to draw various ideas using just a pen and paper. It saved our time and helped us to draw ideas without any constraints. This image here shows 5 different options for home screen design. We gave stars (orange color) to the elements liked in each design option and later combined it into 1 design on the right.
Digital Wireframes
Using mobile wireframe kit available on Figma, we created digital wireframes to develop a prototype for testing. Mobile wireframe kit helped us to create digital wireframes with some of the most commonly used components of android and iOS such as input, tabs, navigation bars and radio buttons.
Low-fidelity prototype
Using interactions in Figma, I connected hotspots to the respective screens in order to create a low-fidelity prototypes. These low-fidelity prototype were then used for UT.
Paper wireframes
Sketching made it easier to draw various ideas using just a pen and paper. It saved our time and helped us to draw ideas without any constraints. This image here shows 5 different options for home screen design. We gave stars (orange color) to the elements liked in each design option and later combined it into 1 design on the right.
Digital Wireframes
Using mobile wireframe kit available on Figma, we created digital wireframes to develop a prototype for testing. Mobile wireframe kit helped us to create digital wireframes with some of the most commonly used components of android and iOS such as input, tabs, navigation bars and radio buttons.
Low-fidelity prototype
Using interactions in Figma, I connected hotspots to the respective screens in order to create a low-fidelity prototypes. These low-fidelity prototype were then used for UT.
Tested concepts 🧪
We sent our low-fidelity prototype link to participants via email and WhatsApp. The reason to conduct an unmoderated usability testing was to eliminate social desirability bias (happens when a participant answers a question based on what they think you want to hear) and framing effect (when participants make a decision or choice based on the way information was presented to them).
Study Method
Unmoderated. Prototype link sent via email.
Duration
15-20 minutes
Participants
5 people. 3 male and 2 female.
Location
Malaysia
User Flow
I tested the user flow for the key journeys to validate the flow.
Key findings from UT
Order for future
Supporting evidence from the usability study states that:
3 out of 5 participants wanted to order for a future date or time.
This means that the first thing we should ask users is if they want to order now or later.
“I want to pre-order my dinner as I may forget to order in the evening. But seems like there no option to order in advance” Kelly Koh
Save delivery address
Supporting evidence from the usability study states that:
4 out of 5 participants wanted to save the delivery address for future orders.
This means that we should give the user the option to save the delivery address while placing the order.
“If I want to order again, do I need to enter the delivery address again? Argh, why can’t I save my address for future use?" Leo Shen
Save card details
Supporting evidence from the usability study states that:
3 out of 5 participants wanted to save card details for future orders.
This means that we should give users the option to save card details for a fast checkout process.
“I order from my husband’s card. Better if I can save the card details as sometimes he’s not around." Fareeha Bilal
Order for future
Supporting evidence from the usability study states that:
3 out of 5 participants wanted to order for a future date or time.
This means that the first thing we should ask users is if they want to order now or later.
“I want to pre-order my dinner as I may forget to order in the evening. But seems like there no option to order in advance” Kelly Koh
Save delivery address
Supporting evidence from the usability study states that:
4 out of 5 participants wanted to save the delivery address for future orders.
This means that we should give the user the option to save the delivery address while placing the order.
“If I want to order again, do I need to enter the delivery address again? Argh, why can’t I save my address for future use?" Leo Shen
Save card details
Supporting evidence from the usability study states that:
3 out of 5 participants wanted to save card details for future orders.
This means that we should give users the option to save card details for a fast checkout process.
“I order from my husband’s card. Better if I can save the card details as sometimes he’s not around." Fareeha Bilal
Design System ⚙️
Inspired by Material 2 and Human Interface guidelines, I created a design system for Foodssistant containing stylesheet and components to ensure consistency across all high-fidelity mockups.
Minimum 4.5:1 typography contrast as per WCAG guidelines.
Touch targets were 48 x 48 px as per Material 2 guidelines.
Followed 10-point fluid grid layout for more negative space.
High-Fidelity ✨
Onboarding
Onboarding journey contains splash screen with GET STARTED button placed in best reach of the thumb. The onboarding journey requires verification of mobile number and setting up a password. As the app allows saving payment methods, a password validation hint is provided to encourage users to set a secure password.
Mobile Wallet
To address transaction fee frustrations, we introduced a mobile wallet for users like Kelly. It allows one-time top-ups for small orders without fees. Marketing can offer food promos and discounts for using a mobile wallet as the payment method. In the next phase, the legal team can apply for an e-wallet license, which will allow users to pay at the restaurants using the Foodssistant wallet.
Bottom Navigation
Several studies say that using bottom navigation instead of a Hamburger menu drastically increases the use of your core app features. It saves time for users like Kelly by navigating through the app easily with all targets placed in the center of the thumb zone.
Search Food & Restaurants
Showing 'Search History; saves user's time by quickly looking for what they want. The is very helpful for users like Kelly who don't have time to go through a long list of food items.
Foodssistant Chatbot
One of the USP of Foodssistant is its AI-powered chatbot. Using Google's Dialogflow, the chatbot provides a personalized experience for users, offering tailored food suggestions based on their order history and preferences. This feature is particularly valuable for users like Kelly, streamlining the menu exploration process and delivering recommendations aligned with her taste.
Save Delivery Address
At checkout, users can choose auto-detection or manual input for their delivery address. Toggling a switch saves the address, and 'Saved Address' button allows users to quick access to previously saved addresses.
Save Card Details
Adding and saving card details on Foodssistant is incredibly convenient. The app scans the card information, automatically filling in the details for users, minimising both time and errors. To save the card, users like Fareeha Bilal, who use a spouse's card for orders, can easily toggle the switch and save card details for future orders.
Rider Communications
Addressing the extra cost highlighted in the pain points, Foodassistant integrates in-app chat and voice call features via Agora for seamless communication between users and riders during order tracking, eliminating additional phone line charges.
Change Language
The Change Language feature proves useful for users like Leo, residing in rural areas, as it enables him to read food information and ingredients in his native language.
Outcome 🎉
98%
Foundations of UX Design
99%
UX Design Process
100%
Wireframes & Prototypes
96%
Conduct UX Research
97%
High-fidelity Designs & Prototypes
Passed
Google UX Design Professional Certificate
What I learnt!
In my early years as a UX/UI designer in a startup, my primary emphasis was on collecting business requirements and translating them into designs, ensuring fulfilment of business needs.
This project highlighted the significance of user empathy and research, emphasising the importance of validating business requirements before the design phase.
By empathising with users, we ensured the product is created for them, not just for the business. I carried forward this approach, following Google's design thinking process in subsequent projects I delivered at ATX Group Malaysia.
Designed and Developed by Shehryar Ahmad.
Last Updated: 1 Dec, 2023
Disclaimer: The inclusion of logos, brands, companies, and software names in this portfolio is solely for the purpose of showcasing design skills and work experience. It does not imply endorsement, partnership, or an attempt to secure work on behalf of the respective entities. All trademarks and logos belong to their respective owners.
Designed and Developed by Shehryar Ahmad.
Last Updated: 1 Dec, 2023
Disclaimer: The inclusion of logos, brands, companies, and software names in this portfolio is solely for the purpose of showcasing design skills and work experience. It does not imply endorsement, partnership, or an attempt to secure work on behalf of the respective entities. All trademarks and logos belong to their respective owners.
Designed and Developed by Shehryar Ahmad.
Last Updated: 1 Dec, 2023
Disclaimer: The inclusion of logos, brands, companies, and software names in this portfolio is solely for the purpose of showcasing design skills and work experience. It does not imply endorsement, partnership, or an attempt to secure work on behalf of the respective entities. All trademarks and logos belong to their respective owners.