Separo App
UI / UX CASE STUDY
Bill splitting, made fun. No more boring math, awkward moment on splitting bill or 'sacrificing' the split-hero, because everyone can play it.
Separo is a bill splitting mobile app that tries to lessen the burden of always being the "split-hero" by making your bill counting to be a fun, personified, and socialized experience.
Objective.
This project aims to build a fun, usable and attractive mobile utility app that enhances the user experience of the bill splitting activities to more range of users: by making it more personified, interactive and sociable with options to go beyond than just counting the bills like math problem.
Challenge.
How to make separating bill more fun and simplified. Make people really want to participate, and escape from the complicated math and boring numbers clichés.
Role.
Since this is a self-initiated and solo project, I am responsible for the whole process, from research, illustration, branding until high-fidelity prototype.
Tools.
Adobe XD, Adobe Illustrator, Photoshop, After Effect, Pencil and Paper
APPROACHING THE PROBLEM
Background.
The inspiration led to creating this case study was started from years of personal experience and observation on people's behavior when splitting their bill.
There were many and various behavior between close friends, casual friends, colleagues, even couples and formal acquaintances. Though it is fun to eating out together, but still there is always one thing in common, which is the hassle or awkward moment during the split bill process.
Photo by rawpixel.com from Pexels
Since money can be a sensitive subject, not many people are straight forward and say what they had in mind. So when the waiter hands over the bill, any hurdles and awkward moments tend to happen.
Wondering how to do it without antagonizing others, they prefer avoiding any hassle like complicated or painstakingly long process of bill counting. But then, ended up overpaying or underpaying, making it a dissatisfied experience. And some just even simply don't want to hurt their friendship or being viewed as a cheapskate or penny pincher.
In my country (Indonesia), asking the restaurant to separate the bill by each person is not a common thing in group eating. It is considered a nuisance for the waiter, especially when the dining place is crowded with guests.
Even so, people still don't like the idea of having to calculate bill. Feeling forced or have no other choice than to go through that boring process. Then, usually ended up 'sacrificing' one person to be the 'split-hero' (the one person who calculate for everyone in group dining out).
That got me thinking about the best way to handle this. Since bill splitting is our common modern custom now, it ticks me to find a solution of the product design question.
THE DESIGN QUESTION
How might we make the numerically-boring bill splitting to be
a fun experience and attractively engaging?
RESEARCH AND FINDINGS
In this phase, I sought to understand how the bill splitting trends occurred in everyday's life and what users do, use and experience during the process. Through the secondary research and user interviews, I gained the initial findings and new insights that helps me in better figuring out the need gaps.
User Interviews.
To learn more about user's perspective on splitting bill and their experience of going through with its process, I have interviewed six people in an in-depth interview. I'm using open questions method to avoid creator's bias and get new insights about user's behavior that I've never thought before.
Then to process the interview results, I used empathy map to describe their response and compile them. In here, I only put four of my interview participants, because two of them gave mostly similar response with the other four, here and there.
Separo - Empathy Map
Insights :
1. Users prefer to split the bill fairly only for what they order, but not
really happy with all the complicated process.
2. Users care about their image and relations with other, and often
burdened to be straightforward about money to a friend.
3. Users don't mind to split the bill evenly, if the amount is cheap or
the price of each ordered foods are pretty much similar.
4. Users usually rely on one person to do the 'dirty works'
(calculating the bill for everyone).
5. Users tend to settle the bill later at other place, using chatting
app when they are going out with the familiar ones. While prefer to
settle everything right away with the unfamiliar or strangers.
6. Users are not comfortable in using calculator to manually count
the bill because all the numbers and math feeling.
7. User might prefer to pay everything first to save time and get
reimbursed later.
Needs :
1. Users need something simple enough to use but detail enough
to cover the uneven splitting bill process.
2. Users need something that can change some bad perception
about going into fair pay and fair share.
3. Users still need the simple way of splitting the bill evenly.
4. Users need to feel free and not being forced or sacrificed to do
the unpleasant calculation.
5. Users need a quick way to settle the bill on the spot, but
accurately done to avoid friction, especially with the unfamiliar
ones or strangers.
6. Users need something more illustrative to escape the math or
'numbers are everywhere' stigma.
7. Users need to be able to remind others and themselves to settle
the bill even after some time later.
Storyboard.
From the field study research, I find three usual scenarios that happened the most. And then, using the provisional persona that I created based on the user interview, I'm able to observe possible target users' behavior. Here, I'm using storyboard to best visualized how the process of splitting bill are happened.
One of the things I discovered was how target users' behavior could actually be different, based on with whom the group dining out being done, like with friends or colleagues. Various obstacles and frustrations also happened during and even after the bill settlement.
- Scenario 1
The story in scenario 1 is a situation where the bill was split evenly between the three close friends when they're having a meetup.
No one feel antagonized by this even split. Two most common reasons why this could happened are the close relationship they had; and second, because each food's price isn't too much different among them.
- Scenario 2
In here, we can see the three colleagues are having their lunch break. And by the time they finished, they decided to split the bill based on what they ordered.
But some hurdles over miscalculation and confusion arise, which make them, as well as the waiter, became frustrated due to time wasted to just split bill and collect payment.
- Scenario 3
While in this scenario, the colleagues are getting used to the bill splitting idea. They've finished their lunch, and try to get back to office as soon before the 'one-hour' lunch break is over. Time is important here, so there's usually one person who pay for everything first and get reimbursed later. Bill settlement is not done right away on the spot. Hence, they're using phone cam and chat group to distribute the receipt.
However, since the calculation is done individually by each 'debtor', frustrating pain point goes to the 'payer due to miscalculation. Her options to deal with this are not much.
First, count everything herself from scratch and manually check on who's at fault. Second, remind and asking everyone again to recheck their calculation, which might felt uneasy. And lastly, just held everything in and accept the inconvenience of losing money. All options are painful for her.
Persona.
Next is to process all the qualitative data I got, to create this three types of user personas. These constructed personas are representing my target users of using the splitting bill apps, with different archetypes such as :
1. The Giving - Someone who prefers to split the bill evenly
to avoid conflicts or hassle between friends.
2. The Fair - Someone who likes to pay only for what they've
ordered to avoid overpaying or losing money.
3. The Meticulous - Someone who likes details and keep on
track of everything, neat and organized.
Pain Points.
From all the gathered datas above including geographic element, I try to construct the key findings that will impact on future design solutions, such as:
1. User feel awkward and uneasy to talk or remind others about their owes.
2. Users are reluctant to split bill in details due to long the boring process and complicated math problem.
Since the longer they spent time over calculating things, the more they will be seen as cheapskate or calculative.
3. People don't really know much about bill splitting apps or how it works, hence they use the familiar calculator.
4. People feel troublesome to create new temporary chat group every time just to share the bill.
Competitive Analysis.
Now that I got the glimpse of understanding about target users, I'm moving on to learn more about existing bill splitting apps. Here I tried to identify what has been going on and what could be developed more to fill in the needs gap that enhance the user experiences, especially in my region (Southeast Asia).
Though there are so many existing bill splitting apps around, I've decided to take a closer look into these six apps that more specific about eating-out bill splitting and closer to my approach. Based on previous insights from qualitative data, these criteria are used to best identify what key experience feature is best for the solution.
Separo - Competitive Analysis Chart
Job Stories.
After studied the existing competition and finding the gap needs, I formulated job stories to help me getting into more detail with possible features for the product.
The Takeaways.
Competitive analysis and job stories above has directed me into some findings with more targeted goals to help build the features needed. Considering geographic element, means there are opportunities and design solution for a split bill product that able to accommodate the users, such as:
1. The product can give flexibility but easy to choose on how
the bill will be separated, evenly or unevenly, since people
might behave differently based on variant situation and
condition.
2. The product should offer fun user engagement to make it
less obligated or forced. With the right gamification
element, the experience of splitting bill could also be playful,
that hopefully could engage new user.
3. The product can use profile editor, contact and group
generator, so the user could feel more connected and feel
personal, rather than just a platform or machine with numbers.
4. The product can use more attractive user interface
and illustration. Also giving clear instruction on
how to play it. Even without the photo-scan receipt
processing, inputting items still could be fun.
5. The user should still be able to use the product
without login, but definitely will gain more benefiting
access to special feature like history and integrated
group interaction platform.
DEVELOP & IDEATES
Sketches.
I always go back to pencil and paper to harvest fresh ideas, keep moving my hand and sketching things seems to be the most efficient way to poke the light bulbs :D During this design process, I try to think more about how the layout and framework could best construct the product, both aesthetically and technically.
Design Solution.
The design solution should be able to accommodate the user needs, adjusted to the culture, habit and lifestyle in different region.
Flexible
Options that could
accommodate more purpose
Social
Creating dine-out group
and seamlessly share bill within
Fun
Adding the gamification element on product for better user engagement
Clarity
Giving clues and neat result from easy use of the product
User Flow.
From the sketching, now I tried to mapping the user flow that is feasible when using the product. Showing from the very beginning, what would the user encounter until the very finish line, when results are present.
Wireframe. - Low Fidelity
Next step is constructing a wireframe that shows better framework of what I wanna include into the product. It's including series of feature that has been define from all research findings previously. Splash page, onboarding, contacts, hamburger menu, main menu with the three options, finishing page until the sharing feature. I also shared some low-fidelity design.
Low-Fidelity Design Theme
DESIGN
Branding.
The concept branding name behind "Separo" comes from two ideas . Firstly, was from playing anagram with the word 'separate' then added fun and delights to the word. Just like its namesake, it has meaning of separating your bill in this case.
Secondly, the word 'separo' is a slank version of 'separuh' in Indonesian Bahasa, which could also means sharing in half. In my country, Indonesia, sometimes we call 'splitting bill' with the word paroan or patungan, and it has been our common culture especially between nowadays individual and young generation.
Then I choose a simple approach for the logo gram design. Stylizing plate, fork and spoon to clearly represent the bill-splitting dine out app. Below are some WIP sketches and vector play around that I did to create the logo.
UI Element.
Illustrations.
To add more fun and colorful delights in this product, I made several illustration that help categorize the type of item. The purpose of this categorization is for when user feels unwilling or lazy to rename the item. So that the app still help them to remember what has been entered when they want to see item details. For example, Person 01 is having : 1 main dish, 1 drink, 2 desserts, and so on.
This auto-generated colorful plates are player tokens. It represents the dine-out participant and made in various color to easily help identify who the person is without having to rename them.
I also made illustration for the onboarding pages, main table bill splitting and the finished page below. I choose line vector style for the illustrations in this product to make it more catchy. I usually made it first in sketches then digitally later (just hover to see sketches).
Personified character and contact's profile using customized avatar are some design approach that I took to add the gamification element onto this product, with a purpose to make it more personal for the users.
Separo characters represent each level of bill splitting mode for user to choose.
DELIVER - FINAL UI
Animated Onboarding.
Next, I created four onboarding screens to welcoming new user that clicked start right away, without have to login. These screens aim to show simple intro and what user could gain from using this product. I choose to create line illustration as the design style to make it stand out in main light color theme. I add some animation to the drawings, to make it more interesting and dynamic.
Login.
• User has the freedom to use product
right away without having to login.
• However with signing up to an account,
or logging in directly or via facebook,
user will have more bonus feature from
separo, such as : advanced level stage
(split and recap), access to histories,
contact, group creation and separo
messages to socialize.
• User only need to login once, if they
choose to keep signed in and go directly
to main menu. No more hassle.
Main User Interface.
Just like game setup, there are three levels on how user can split bill and separate payment, using separo fellas. Users are free to choose which one they wanna use when they need it.
For guest user, there are two levels (split evenly and by item). For logged in user, advanced level (split and recap), is available.
To make each stage easily recognized, I use different UI color theme for each character (green, red and purple).
The main separo UI consists four major parts, such as:
• Person, where user put how many person will separate their bill. Here, they could also choose their existing separo group which will automatically assign the plates based on person quantity.
• Bill [Group Name], where user can choose the dish category, swipe the plate to assign the person who order the item (whether shared or same ordered item), and later easily put the price.
• Tax & Service, where I separate two type of tax as it usually appears on the bill. Service tax could also used as tip amount. Here I also add discount on-off mode, for some payment reduction by using some credit cards.
• Finish, where user could see the results of their bill separating, and can share it later.
Sharing Feature and Quick Tutorial.
Results are out, now it's time to share them to other users for an easier bill settlement.
Sharing ability is useful in a situation when direct settlement is not possible, due to lack of time. I made six ways to share it, through email, whatsapp, sms, separo chat, pdf report, and link directed to other apps like 'PayNow'.
Quick tutorial info is also available as clue in the main bill item input screen to help first-time user.
Side Menu [Features].
More features are available in the side menu and setting.
• History screen, to keep track record
on the bill splitting activity and
results, so that user could still check
on them for any later payment settling.
• Group & Contact screen, to save
your usual dine out group, so no need
to make new group or assign contact.
• Message screen, to conveniently chat
or remind your friend about their bill
settlement. Less awkwardness to
bring up the talk about money.
Link to Bill settlement.
In this product, I didn't include any plan for integrated payment getaway, due to complicated user's privacy and security. Instead, it links user to the other payment app, like 'PayNow' (I will use it as an example of easy transfer between user).
'PayNow' is an easy transfer system by using phone number instead of user bank account number (which is not common for other people to know). Nowadays in Singapore, PayNow is widely used for its phone number transfer convenience.
That is why in this separo product, access to contact seems more feasible to be included. You can see in video below how the simulation works:
DELIVER - XD PROTOTYPE
Click here or image above to preview the XD clickable prototype
Conclusion and Future Opportunity.
Here I'm trying to make the bill splitting process become less boring and more fun, by adding colorful illustrations and animation that interact with user's engagement.
This final prototype was the result of testing on several specified target user and their takeaways which help me to consider what needs to be revised and simplified (from the flows, layout, illustration until the features). Hopefully this UI/UX case study could significantly help the future development of Bill Splitting apps.
Since this is my first self-initiated UX case study, I've learned so many things while making this project. There's something I might still miss in this case study. But I'm looking forward to create more, make mistakes, learn more, and thus do more UI/UX case study in the future.
“Remember, making mistakes is part of the process. The key to success is to make mistakes quickly, and recover quickly, and keep forging forward.”
― Kevin J. Donaldson
