Bibite
Collaborated with 3 engineers and 4 designers to build a user-centric mobile application that automates bill splitting, enhancing dining experiences.
PROBLEM CONTEXT
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.
PROJECT OVERVIEW
Bibite started as a simple coding project from 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.
Our client wanted to solve this problem to be more efficient, accurate, and fun but also, create a novel user experience to attract application downloads. Additionally, our client needed some avenue of revenue and some sort of benefit for users to start using their app.
ROLE
UI/UX Designer in collab with 3 engineers & 4 other designers
SCOPE
Academic Semester (~3 months)
PROCESS
Product consultation, competitive analysis, brand design, UI/UX design, testing, iterating, handoff
TOOLS
Figma, Adobe Illustrator
Solution
Build an app that streamlines the bill splitting process and partner with restaurants to provide promotions to users.
1.
Research
COMPETITOR RESEARCH
We researched competitors like Tab, Claim, and Splitwise and focused on any similarities with our app, how they built trust with their users, and any gaps.
We concluded that we want Bibite to be streamlined, foster community, and have group payment transparency.
2.
Brand Design
ORIGINAL DESIGN
The development team approached us for design support, presenting this initial prototype:
The original product lacked cohesive branding, intuitive user flows, and engaging UI components. It needed a refined visual identity and a more seamless, user-friendly experience.
NEW NAME FORMATION
With these new attributes to the product and taking a look at the existing prototype, it was clear a rebrand was necessary. To synthesize new names to replace "PayMe", we had a powerful brainstorming session in Figma.
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!
MOODBOARDING
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.
LOGO & DESIGN STRATEGY
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 the color entices appetite and communicates friendliness.
3.
UI/UX Design
WIREFRAMING
With the branding figured out, we felt confident in moving onto the UI/UX of Bibite. My design lead delegated workflows for each designer to tackle. I took on the onboarding & user profile and based my flow on our client's vision.
ITERATIONS
Making iterations & asking for feedback is a vital part of my design process. I value taking on tasks on my own but deeply appreciate collaboration and consistently seek advice from my peers & mentors. Here is how I transformed my profile flow:
After presenting my early draft, we conducted user testing internally amongst designers. The hamburger menu was not optimal for mobile screens and caused user confusion. Thus, upon iterating, I added clearer headings to my pages and created a separate settings page to reflect the familiar UI of most modern mobile applications.
KEY DESIGN CHANGES
I love getting feedback for my designs but I also love giving feedback. Here are some notable design changes I contributed to:
Final Product
Making splitting bills at restaurants easier!
Impact
BIBITE WAS A SUCCESS!
Check out this Northeastern article written about our app as well as the incredible traction we got on social media!
Reflection
MAIN TAKEAWAYS
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.
MOVING FORWARD
In future team projects, I hope to engage with the same level of enthusiasm and iterative design processes to create more novel products & experiences.
wong.aud@northeastern.edu
Audrey's portfolio
Made with -`ᥫ᭡. by me