CLIENT
BiBi
DURATION
Three weeks
SKILLS DEMONSTRATED
Competitive Analysis, icon design, iOS design, Prototyping, Microinteractions, User testing, Style guide
Summary
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. 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, and we did just that.
01
We looked at drinking, shopping, gift-giving, and social apps for our competitive analysis
Branding
Drinking apps like Buddy Drinks and Untappd skewed masculine by using bold dark colors and typography.
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.
Photography
Ritual and ItsOnMe used a lot of stock imagery, conveying a corporate impersonal feel. Our approach was to use more authentic candid-style photography.
Microinteractions
Many apps used minimalist design patterns that felt 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 were an important component for the BiBi app.
02
We took what we learned from our client brief and competitive research, and defined our goals for BiBi in three design principles
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.”

👍 I want nice not pretentious
BiBi’s aesthetic design is good quality, but it has a mainstream appeal that is accessible to everyone.

😎 It’s so easy even a drunk person could use it!
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.

🎁 This one’s on me!
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.
03
I gave our design principles visual expression through divergent style tiles
Style Tile 1
I emphasized the gift-giving aspect and evoked birthday party elements like confetti and primary colors to give a playful feel.
Style Tile 2
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.
Style Tile 3
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.
04
I used whimsical iconography to style the app as hip and edgy
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.
06
Test users pointed out problem areas, here’s how I resolved them
I followed a systematic process to choose a better color
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.
I decluttered the account screen
Left: Before  |  Right: After
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
I redesigned outdated iconography
Left: Before  |  Right: After
1) 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.
2) 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.
3) 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.
07
I took a user-centered approach to design BiBi’s most important feature
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?”
For beer they liked seeing the branding (bottom left). For wine it was the year and place of origin (bottom center-left). For cocktails they liked photos and a list of ingredients (bottom center-right). For shots it was just a list of ingredients (bottom right).
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.
08
I used microinteractions and animations to define the BiBi brand
Order up!
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: 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.
09
These were the final deliverables
High fidelity mockups
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.
Style guide
This is just a sample from the UI Elements section. Check out the whole document here.
Prototype
10
These are my final thoughts
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 touched every screen in the app.
Back to Top