BiBi is a social app that lets you gift drinks to friends at participating bars and restaurants. Our client approached us to design a user interface that captured BiBi’s brand identity. They wanted BiBi to stand out from their competition by being “hip” and “edgy” on the one hand, but accessible to everyone on the other. Our challenge was to create a design that was both. Keep reading if you want to learn about my design process. Otherwise you can skip to the deliverables.
skip to deliverables
Swarm, the check-in app by Foursquare, used saturated primary colors and childish icons and animations, skewing the app young.
Gift-giving apps like Giftry used calligraphic type, pastel colors, and glittering/sparkling imagery, skewing the app feminine.
To appeal to a broad demographic we decided to avoid color patterns that are childish, or are associated with a particular gender.
Many apps used the same minimalist design patterns, making them feel unremarkable and utilitarian. But we noticed some apps made the experience more fun by using microinteractions. Groupon, for example, used an animation of a flying ufo cat when you refresh the results. Gift boxes burst open in confetti when you tap them in Swarm. My teammates and I agreed that microinteractions was an important component for the BiBi app.
The first two principles outlined our approach to branding and UI patterns, while the third outlined our approach to setting BiBi apart as “hip” and “edgy.”
BiBi’s aesthetic design is good quality, but it has a mainstream appeal that is accessible to everyone.
Users shouldn’t have to think too much when they’re using the app. Recognizable UI patterns, consistency, and a vivid visual language will make the app intuitive and easy to use.
Receiving a BiBi should be like receiving a wrapped gift. It’s an experience of mystery followed by surprise and joy. Using emotive elements and whimsical microinteractions will keep the app feeling casual, spontaneous, and fun.
I emphasized the gift-giving aspect and evoked birthday party elements like confetti and primary colors to give a playful feel.
I went for a nightlife vibe with darker colors, and styled the crossing white bands over a background of charcoal to evoke a giftbox with ribbon. I used images rather than icons to give a more real life feel.
I took a minimalist approach to this style to let the drink icons and photography get more of the spotlight. I used a bright orange CTA and bright colors in the drink icons to energize the palette.
Our clients liked my direction for the first two styles because they had more personality, but they cautioned that the first might be too juvenile, and the second might be too masculine. I took this feedback and created high-fidelity mockups somewhere between these two.
The tab bar Friends and Account icons are departures from convention; users still found them intuitive, and they helped distinguish BiBi from its competitors.
A subtle background pattern of drinks-related iconography adds a playful style to the design.
The tab bar My bibis icon opens when that page is active.
I populated location thumbnails with photos from Yelp if available; when not available, I used stock imagery with a less generic feeling.
I used branding icons for beer because people care more about the brand of a beer than a product image or description.
Navy blue made the app feel like a banking app. To explore better choices, I styled several versions in different colors, and discussed the pros and cons of each with my team and creative director for feedback.
I narrowed my options down to two: purple, and turquoise,and I A/B tested them.
There was no clear winner. Ultimately I went with turquoise because purple reminded some users of familiar brands such as the LA Lakers, and Viber, whereas turquoise did not elicit any similar reactions. The turquoise also worked well as a warm color, giving the app a more relaxed feel.
The previous version was cluttered. I replaced labels with icons and cut extraneous elements like lines and arrows for a cleaner design and greater visual interest.
Icons felt outdated. I removed the gray fill and the extraneous stroke from the active and inactive icons respectively to give a lighter more modern feel.
Users didn't think a house icon and a giftbox icon matched well with Pick a spot and Pick a bibi, so I changed them to a pin icon and the BiBi logo.
Users expected an icon of a drink, or the BiBi logo here, not a beer mug. I took this opportunity to introduce more of BiBi's branding, and changed it to the BiBi logo.
You'll notice in the last Before and After that I also changed the design from grid view to list view. I explain the reason for this next.
In our initial meetings our clients told us they preferred to have icons represent drinks, but through user testing we learned that the preferred representation style depended on the type of drink. We took this opportunity to really consider the user's needs and wants. We asked users to imagine themselves going to a bar or restaurant; then we asked them, “what do you want and need to know when ordering a drink?”
User testing was also instrumental in weighing the pros and cons of displaying drinks in grid view versus list view. I designed both versions and A/B tested them.
Users preferred grid view when choosing friends and beers so they could focus more on visuals than text, but it was awkward when there was an uneven number of items listed in a subcategory.
I chose list view to avoid the awkward gaps that happen in grid view, and to maintain a consistent style with the wine, cocktails, and shots screens which performed better in list view.
Users enjoyed this interaction so much they wanted to keep increasing the quantity just to see more beer mugs slide in.
Oh! What’s this?
This animation brought to life our third design principle, that receiving a bibi should be like receiving a wrapped gift: an experience of mystery followed by surprise and joy.
It’s your birthday!
Floating balloons catch the user’s attention, announcing it’s their friend’s birthday today.
It’s as easy as 1, 2, 3
Pick a friend, a spot, and a drink, and a video message if you'd like. You know exactly where you are in the process because your selections float to the top. When you’re all done they collapse into one icon, displaying a summary of the bibi details.
Check out my final deliverables in the next section.
I used fun iconography throughout the app to evoke what BiBi’s all about: drinking and friendships
I implemented a sliding modal design so that there are fewer perceived screens to go through, and the user always knows what step they're on
User testing helped me determine the best way to display beers, wines, cocktails, and shots
I created a cohesive visual language for BiBi’s combination of gift-giving and social media, putting the social back into social media as our clients wanted.
This is just a sample from the UI Elements section. Check out the whole document here.
Having trouble viewing the prototype? You can also view it on the proto.io website
I’m proud of what I accomplished in three short weeks, but if I had more time to work on this project I would’ve designed a new logo and logotype for BiBi. Their current logo is rounded and soft, which doesn’t feel appropriate for a drinking app. Given the limited time frame, I prioritized microinteractions and animations because they touch every screen in the app.
This was my last project for DESIGNATION. Shortly afterwards I began a UX/UI design apprenticeship at Intrepid Pursuits, where I redesigned the BOS: 311 app.
back to top