Check out this Northeastern article written about our app as well as the incredible traction we got on social media!
Bibite started as a simple coding project from three developers who wanted to create a real, impactful app. They came to Scout Playground for a quick turn around to develop designs for their idea. My team took on Bibite to create these deliverables within 2 months: a name (we didn't start as Bibite!), a design system, a logo, hi-fidelity wireframes, and a prototype.
Splitting bills at restaurants with friends can be a hassle. Often, it consists of individually doing math and then Venmo-ing amounts of money to each other, hoping they add up to whoever braved the bill.
Our client wanted to solve this problem to be more efficient, accurate, and fun but also, create a new user experience for their own needs. Our client needed some avenue of revenue as well as some sort of benefit for users to start using their app.
Our app was no longer just a receipt scanner app and instead, was now better aligned with both user and business needs. This solution would simultaneously bring more foot traffic to partnered restaurants, incentivize users to use the app, and bring money to our client.
As the Design Lead, I was responsible for all project management logistics. We worked in a sprint style where each week, I would assign work to the designers and myself that had to be done by the client meeting we had on the following Sunday. Before every client meeting, I would prepare a Figma document that held all our work from the week before to present during the meeting. Throughout the weeks, I led internal meetings, working sessions, client meetings, and critique sessions.
We researched Tab, Claim, and Splitwise and focused on any similarities with our app, how they built trust with their users, and any gaps.
Tasked with coming up with a name for their brand to replace PayMe, I set up a brainstorming session in FigJam for the designers and I. There were three important aspects to keep in mind based on the client's wants. It had to be a name that was (1) random but catchy like Venmo. (2) Related to the app's function in some way e.g. receipt, dining, bill splitting. (3) New and was not a taken domain on the internet already.
This led us to the name Bibite (bih-bite) which is a play on the words "bill" and "bite." It also means "drinks" in Italian!
Next, to help us coming up with a direction for a design strategy, we individually created moodboards. We then came together to combine our 5 moodboards into 3 that each had a defined direction. We also listed words under each that we felt went along with the them. After we discussed with the client, the "Somewhere in the middle" moodboard was decided on which would include warm elements but, be on the cleaner side.
We brought our warmly refreshing brand to life as we developed our Design Strategy. To balance both the warm aspect and the refreshing aspect, we created illustrations in Figma but also kept all elements minimal and simple (no gradients, consistency etc). We heavily used orange as it entices appetite and is very friendly.
I split up the needed pages and workflows for each designer to convert into lofis. I worked on the nav bar and scanning/live session process workflow.
Originally, my first draft of the "Edit Mode" in the itemized receipt flow looked alarmingly similar to just the itemized receipt. The only different aspects was the pencil "Edit" icon was no longer there and in the "Edit Mode," there were now "x's" to represent items could be deleted. However, this made for poor user experience because the very similar screens could confuse users and prevent them from intuitively knowing all of the "Edit Mode" functionalities.
This led me to make several design changes to not only make the "Edit Mode" screen more visually distinct but also, make the functionalities more obvious.
After receiving feedback from our client, I added another screen that showed how users could customize easily the tip. I based the design on existing tip screens such as on kiosks and paper receipts so that users can use the same mental model.
Originally, the flow of how a user would split an item if they shared it with another person/other people was confusing with too many repetitive actions. First, a user would have to claim the item they bought which would show a drop down. A user would then have to select "Split" if they shared the item. Then, a pop-up would appear where the user could either split the cost with the whole table or enter a customized number.
If the user had split a lot of items, having to individually claim items and then individually split them and go through the flow every time, was tedious and inefficient.
My solution to make the process more streamlined was to reduce the amount of buttons a user would have to go through in one flow and, make the process of selecting an item and splitting it faster. Now, a user could go through checkboxes to choose what item they bought which would then grant them the opportunity to select more than one item at once to simultaneously split; This change took out the need to "Claim" an item at all because it was simply a selection for the next action now. The pop-up to customize the number remained the same.
While doing hi-fis, I ran into another problem with this Live Session screen and wanting the flow to be understandable. The original design had the buttons divided based on functionality ("Finish Session" away at the top and "Solo" + "Split" together at the bottom). But visually, it had poor composition and the placement also did not make sense considering users would want to hit "Finish Session" at the end of the flow and not in the beginning.
This led me to move the "Finish Session" button all the way to the bottom to show it should be worried about later and, elongated it significantly to differentiate it from the other buttons. I also added icons to further describe the meaning of the "Solo" and "Split" buttons.
Collaborating with 4 other designers can get tricky when it comes to staying consistent with text (sizes, thicknesses, leading), grids, and alignment. Creating an internal design system within Figma helped with this problem tremendously, as well as just communicating during meetings.
I also had to really keep in mind our tight timeline of 2 months and make sure my designers finished their work in a timely manner. Staying adaptable and efficient allowed me to get our best work done in time!
Bibite has a bright future with a team of dedicated developers working on it! They already had started implementing our designs into their app while we were working together and so, I have high hopes that we will be able to see the success of Bibite in the real world.
I hope to also use the many different skills I grew in as the Design Lead on this project! For example, balancing project management with my own designs and with asks by the client.
