Food Split
Mobile app to split food-bills in hassle-free way
Tools:
Adobe XD, Photoshop
Illustrator, Whimsical, Draw.io,
Team Members
2 Content Strategist,
1 UI/UX Designer
​
My Role
UI/UX Designer,
Team Lead
Duration
3 Months
FoodSplit is an online fast-food ordering mobile app with a bill splitting functionality. It allows you to add multiple individual orders into a single order. While ordering food, the user can simply add multiple people and their individual orders; the app will show the amount as per their individual orders in addition to the total amount. Furthermore, the solution will keep the record of every order and will let the user know about unsettled and expected payments. At this stage, the app will be focused on providing functionality about splitting the order and current unsettled payment status.
Research And Analysis
As a creative UX designer, I wanted to challenge myself to solve one day-to-day life problem. Curiously, while studying, I used to order food online with my roommates on a regular basis. But we were always having an issue when splitting the bill: how much each one owed? With this in mind, and after careful market research, I decided to create a solution for this project.
Market Research
From my market research, I found that for North American region I will be focusing first, online food ordering market is large and continuously growing with a significant increase in users and revenue with good predictions for future years.
To understand the existing solutions for bill splitting problem in detail I did a competitive analysis of five different competitors from online food ordering and bill splitting domains.
Competitive Analysis
Opportunities
After a competitive analysis of 5 different apps (Splid, Tab, Splitwise, PizzaPizza, Plates), I was able to find the following opportunities for the project:
1
Being first in the market
Currently, there are no apps available which can provide both online food ordering and bill splitting. Being first in the market has its own challenges, but is a big opportunity to become a pioneer in this rapidly growing market.
2
An easy way of bill splitting
Opportunity to create an app that provides an easy alternative to split the bill for users. With all bill splitting apps, users must add all the items manually which can be an irritating and time-consuming task for the user.
3
Liner user experience
Opportunity to provide easy and liner user experience for the whole bill splitting process using the order information within the Food Ordering app. Currently, many available apps have good functionalities but they include many steps as they are independent of the online food ordering apps, which makes them less user-friendly.
The Problem That Needs To Be Solved
The problem is the lack of an easy and integrated way of splitting the food bill that results in frustration and stress for people while ordering food online.
How Does It Work?
After understanding the problem clearly, I interviewed 15 different users such as students, employees, housewives and paying guests to get the user's point-of-view on the problem and possible solution.
User Research
I asked users various questions about their day to day lives, behaviour, their thoughts on online food ordering, bill splitting and their possible app usages for the same..
Personas
To incorporate all user feedback, I’ve created two personas, focusing on their frustration and motivations. This process helped me empathize with users at every stage of the project.
Why Mobile App?
I did some platform research to understand how my target audience order food online. Based on my Platform research I found that an increasing number of people are using mobile apps for online food delivery. Therefore I have taken the mobile app first approach.
Outcome Of Research And Analysis
An online food ordering app with the following core functions:
1. The App should allow users to add multiple individual orders into a single order. While ordering food, The user should be able to add multiple people and their individual orders; the app should show the amounts per their individual orders in addition to the total amount.
2. The app should keep the record of every order and should let the user know about unsettled and expected payments.
Ideation
User Flow
After deciding the core functions of the App, I created user flows for both core functions that show all major user steps to achieve the desired result. As a team,we tested the user flow and made the necessary modifications throughout the project.
Single And Group Food Order
Users should be able to add multiple individual orders into a single order. While ordering food, the user should be able to simply add multiple people and their individual orders; app should show the amount as per their individual orders in addition to the total amount.
Settleup Flow
The app should be able to keep the record of every order and let the user know about unsettled and expected payments.User should be able to settle the expected and due payments within the app
After understanding the main steps that users have to go through we created user narratives to make the user experience more humanized, intuitive and easy.
User Narattive
After getting a clear idea about major user steps, we collaboratively created users stories to empathize with users and understand their behaviour, desired experience and business outcomes.
Group Food Order
Initial Sketching
I started my design phase with simple paper sketching. In this way, it was easier for me to explain my thought process to other team members and get their feedback. Once we reached common ground on the basic design, I created a paper prototype to test with users.
I Tested my paper prototype with 10 different users to check whether users are easily able to order food for a group or not. In general, users found the process long and tedious. Many users expected to see food products first before they make the decision of choosing a single or group order. Here is what I learned from my initial testing:
User Pain Points:
1
The main pain point for almost 90% of the users was the switching between group members to order for another group member. They found the whole process time consuming, complex and boring. One of the users specifically pointed out that this process is the potential reason why he would delete the app.
2
After selecting the friends from their contact list, they had to click on the done button to confirm their selection. The position of the button (right-hand side top corner) was unusual and uncomfortable for many users.
3
It was difficult for users to find the cart option as it was in the bottom bar.
What I Learned:
1
The process of switching between different group members should be easy and intuitive. Moreover, at every point, the user should be able to switch between group members and there should be some visual signals about which member is selected and how many items have been added for that member.
2
There should be an option to add and remove group members.
3
Cart option should be on the top right-hand side corner just like most other apps. So, it can be easier for users to find.
Base on early user feedback, I redesigned the switching process between group members for easy group ordering and incorporated other suggestions.
Switching b/w Group Members
Based on the feedback, I removed the button to change the group members and added an additional top bar that shows all group members.
Placement Of Button
Based on the feedback, I changed the button position from the upper right corner to down right corner floating where user hands can easily access the screen.
Cart Option
From user testing, I realized that there was no need of bottom bar. Hence, I removed the bottom bar and put the cart at top right-hand side corner like most other apps.
Change In Layout
Based on feedback, I realized that users would be more interested in seeing the food items before they make any decisions.
User Interaction For Group Order
To see how a user would actually interact with the app I created detailed medium-fidelity wireframes for both of my core functions.
Group Food Order
User Interaction For Settle-up
Usability Testing
Using the wireframes above, I created a low fidelity prototype using Adobe XD and tested it with 8 different users at a food court. I send them a link to the prototype to test on their own mobile phones using the following scenarios which I wrote:
Scenario 1
John had always a hard time remembering and asking his friends to pay him back. To solve this, recently, he ordered a sandwich and cold drinks for him and his friend using Food-split App that lets the user send reminders to others about the owed payment.
​
One Exploratory Task:
Find out a way to notify John’s friend about his debt.
Scenario 2
John Smith is a student who just got his OSAP money and he’s looking to settle his debts, John wants to see how much he owes Jane Brown for buying lunch last week. She bought pizza and cold drinks for both of them using Food Split app and he has been getting notifications to “settle up” his debts. Now that he finally has enough money to pay Jane back,
I provided them with specific tasks to see whether users are able to find the needed information or not.
-
Find out how much John owes to Jane
-
Find out the details about the order so you can see why John has to pay X amount
-
Can you see if you have paid John in past for any other orders?
-
Assume that you have paid the amount to Jane via Cash for this order. Now settle the payment score in the app.
What I Learned
After getting the user feedback I realized that minor details such as title name and default message templates can make user experience way easy and more intuitive, Here are the details of what I learned :
There has to be some additional representation about borrowed and lent category to further specify that borrowed and lent means the app user has borrowed and lent the money.
There has to be a way where users should be able to see the total borrowed and lent money.
The order details should be catered towards individual members, not the whole group.
Default template for the personalized message can make the process of sending reminder easier.
Heuristic Analysis
Before starting high fidelity design and prototyping, I tested my prototype against Jakob Nielsen's 10 usability heuristics with two other UX designers to understand my area of improvements.
After incorporating feedback from my fellow designers, I created high fidelity mockup and prototype using Adobe XD,
Micro Interactions
One of the last things I did was to explore how motion will be implemented in the app, This helped me to grasp the users' attention and navigation the deepest level.
Reflection
In this project, I was team lead, but I had 2 other colleagues, helping me especially with user narratives and user flows. From this experience, this are my main take-aways:
Early User Feedback is the Key.
At early stage, I got the feedback from users that one of my main design flow doesn't work at all. I was able to redesign it quickly as it was on paper. Through constant user feedback at various stage of the project, I was able to create a simple user experience for complex and repetitive activity.
Project Management
I learned is that project management itself is a task. While working with the group as a leader I had to allocate tasks, follow up on certain tasks in a timely manner and provide feedback for my collaborator’s work. I also learned to value the importance of clear instructions and having small discussions before task allocation. These small things made a huge impact in terms of efficiency throughout the project.
Selected Work
Capital One: Empath
An intelligent platform experience for help line agents
Canadian Jewish Military Museum
An Interactive Storytelling Of Jewish Contribution
Codologic
A software support forum