Bibite is an app that takes the hassle out of bill splitting! We wanted to create a better dinning experience, so instead of calculating everything right after dinner, all you do is scan the receipt, pick the items you ate and pay!
Hamsini Malli, Jessica Peng, Michelle Ton
☆ Firebase
☆ Render + Heroku
☆ React
☆ Adobe Photoshop
February 2024 -
April 2024
Once we discussed with our clients, we decided to start with branding first as this will help us create a better concept to work off of. We all made our own moodboards to see how each of us visualised the current product, then combined our best ideas into 3 main collective moodboards.
Want to see more about our branding in detail? Check out our Brand Book! LINK
We decided to split up the work and each concur different flows of the app. I got tasked to do the "Live Session" flow, which is the splitting the bill aspect of the app.
The clients noted 3 key things that this function needed:
✩ Users are able to split the entire bill
✩ Users are able to pick their individual items and indicate how many people they potentially have split the item with.
✩ Users should have room for error and therefore need to have the option of un-claiming an item.
This was my first attempt of creating this flow.
The first problem I identified was that having each item be matched with a claim button looked really heavy and messy. Our app should be straightforward, and the repetitive nature of this layout made it less attractive.
Another problem was that it wasn't very clear how the user can un-claim their item. Again, since the buttons were so repetitive, it's difficult to identify which one is claimed and which one isn't.
What did work well about this was the 2 "solo" and "split" buttons to indicate the different routes the user can go on. However, since the words are very similar I needed more indicators to differentiate between the 2.
After a few more lo-fi iterations I finally perfected the "Live Session" flow!
With this layout, users have the opportunity to split the entire bill from the very beginning. Once a user decides to click on one the the items, the "solo" and "split" button appear, indicating that these are their new options. With this choosing method, the layout looks a lot less intimidating and repetitive. The solo and split button are also differentiated using icons to further simplify the design for the user.
When users decide to split, they are led to a pop-up window, where users indicate whether the entire table split the item or if there was a specific amount. When "custom" is selected they are led to another window where users can easily indicate how many people they split it with.
Since there are so many options that the user can go into, this step by step flow really helps users do 1 thing at a time and makes it easy to follow. Additionally since it's all a sequence of buttons, it's not a tedious job for the user to do.
With this layout, users have the opportunity to split the entire bill from the very beginning. Once a user decides to click on one the the items, the "solo" and "split" button appear, indicating that these are their new options. With this choosing method, the layout looks a lot less intimidating and repetitive. The solo and split button are also differentiated using icons to further simplify the design for the user.
Here's a walkthrough of the entire app that I prototyped!
