When we were asked to develop designs for the SplitCheck mobile app, we set out with two goals in mind: Superior Aesthetics and a Seamless User Experience.
The following is a detailed UI / UX breakdown.
THE BREAKDOWN
PHASE 0: Account Setup
*note: The information displayed in these designs are purely for demonstration purposes. Any references to any real persons or venues is purely coincidental. [/grve_image_text]
We opted to utilize a four tabbed navigation system (rather than a hamburger menu) in order to ensure that the entire navigation system revolves around the primary function of the application: to split checks!
Lower tier functionality such as “Account Setup,” which should ideally only be utilized once, is put into the fourth tab while the rest of the tab items relate to searching for venues and setting up “tabs” for users to join and split the check!
PHASE 1: Getting Started
Now this might seem like an inconvenience, however when normally splitting the check at a restaurant, under normal circumstances this is something you would tell your waiter ahead of time so they can prepare separate bills for each person.
The idea with this app being that now users can easily split the tab (no hassle with cash counting, everyone is assigned the items they ordered) and the restaurant does not need to assemble multiple bills on their end! [/grve_image_text]
The process relating to the above screenshot transitions from: Search > Venue > Open Tab > Notify Server
Note: Notifying the server does not open a new page, but rather a notification popup. The total process to go from the home screen to opening a tab should take no more than three page loads.
In Phase 2 below, we will go in much more depth into the privacy and security features integrated into setting up a tab that people can connect to. Much of the functionality presented in this app was designed and developed by Bizurk Software. The Client needed us, not only to develop a simple interface but also to consult for solutions to such complex features.
Andrew Taraba of Bizurk Software was responsible for setting up much of the features you will see below, including the solution to the “Bill Splitting” problem.
PHASE 2: Setting Up the Tab
The ability for a user to simply check an option “Use my last name as password” is a win for the users and allows secured tabs to be set up instantly!
Note: Host has the ability to boot anyone from the tab if an unwanted person happens to join the tab.
[/grve_image_text]At this point members will begin to populate the tab. The venue does NOT need to keep track of individual’s orders, as all the orders will be combined into one simple bill; this makes it extremely easy on the restaurant’s side.
After everyone finishes enjoying their meal it’s time to start claiming items and get that check divided appropriately between everyone.
PHASE 3: Splitting the Check
This is the “Tab” page. Everyone can see items populating the tab in real time. However, one thing is missing from this page, “who ordered what?”
We needed to ensure that users can dine normally, there is absolutely no need to use the app at all during the dining experience; it is after everyone has finished eating that the items can be divided among the members of the tab.
Our aim was to combine a simple UI with a UX that mirrors normal behavior during a meal.
Users can claim items at anytime throughout this process, however the bill will not be payable until everyone claims their items. (Unclaimed items will be charged to the Host, dine with people you can trust!)
What is revolutionary about this process is the simplicity: press the “+” and claim the item, users face will appear next to the item. Names and extra text will clutter the UI and make the “tab page” take up more space.
Ideally all the items (or as much as possible) should fit within a single view of the page. By adding the user’s face next to the item it instantly make it recognizable who is paying for what!
“My Total” displays at the bottom so you only need to worry about how much YOU are paying for.
Note: The green check mark next to the “Fried Hello Kitty” indicates that that person has already paid for their item.
Sometimes not everyone plays along, unclaimed items get charged to the owner of the tab. However, there are more positive (non-friendship ending) uses for this feature.
Assume that someone needs to leave the meal early and left you with some cash to cover their share of the bill. That person has covered their portion of the bill in real life, and you, the owner of the tab will pay for his portion. (Much like how it is in real life!)
Splitting the check is only convenient in real life when everyone has cash on them, however these days less and less people carry cash, this app provides a solution to an emerging problem.
FINISHING UP!
After the items on the tab are claimed and sorted out, everyone is ready to pay. Choose the appropriate payment method with the tap of a button and the check has been split!
Security Feature: The Host of the tab will be able to watch in real time as items disappear from his tab which is the “Final Tab” whatever items remain on the tab will be the Host’s responsibility.
We want to ensure that venues would trust using this application as well as the users themselves. Of course, whenever you’re splitting the bill with anyone, trust is always a factor. With SplitCheck it makes it nearly impossible for people to have an excuse not to cover their portion of the bill.