BiBi

Putting the social back into social media

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

CLIENT

BiBi

DURATION

Three weeks

SKILLS DEMONSTRATED

Competitive Analysis, icon design, iOS design, Prototyping, Microinteractions, User testing, Style guide

01

02

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.

buddy drinks app screenshot

Buddy Drinks

Swarm app screenshot
Untappd app screenshot

Untappd

Giftry app screenshot

Photography

Swarm

Giftry

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

Ritual app screenshot
ItsOnMe app screenshot

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.

Ritual

Groupon app screenshot

ItsOnMe

Swarm app screenshot

Groupon

Swarm

03

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.”

emoji thumbs up
emoji smiling face with sunglasses
emoji wrapped gift

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.

04

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.

BiBi style tile 1

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.

BiBi style tile 2

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.

BiBi style tile 3

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.

05

I used whimsical iconography to style the app as hip and edgy

BiBi high fidelity mockup v1 Feed screen
BiBi high fidelity mockup v1 My bibis screen
BiBi high fidelity mockup v1 open a bibi

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.

BiBi high fidelity mockup v1 pick a location step
BiBi high fidelity mockup v1 pick a bibi step
BiBi high fidelity mockup v1 Account screen

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.

gray My bibis title bar
red My bibis title bar
purple My bibis title bar
turquoise My bibis title bar
Greenery My bibis title bar
orange My bibis title bar

I narrowed my options down to two: purple, and turquoise,and I A/B tested them.

purple My bibis screen mockup
turquoise My bibis screen mockup

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

Before

After

Account screen before
Account screen 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

Before

After

Send a bibi screen after
Send a bibi screen before

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.

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. For wine it was the year and place of origin. For cocktails they liked photos and a list of ingredients. For shots it was just a list of ingredients.

Beer

Wine

Cocktails

Shots

pick a bibi beer screen
pick a bibi wine screen
pick a bibi cocktails screen
pick a bibi shots screen

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.

Grid view

VS.

List view

pick a friend grid view
pick a beer grid view
pick a friend list view
pick a beer list view

Pick a friend

Pick a beer

Pick a friend

Pick a beer

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!

pick a bibi quantity GIF

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?

open a bibi animation GIF

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!

friend's birthday animation

Floating balloons catch the user’s attention, announcing it’s their friend’s birthday today.

It’s as easy as 1, 2, 3

Send a bibi steps GIF

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

Having trouble viewing the prototype? You can also view it on the proto.io website

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 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

© 2017 by Felix Poon | All rights reserved

Felix Poon Instagram Felix Poon LinkedIn
BiBi style tile 1
BiBi style tile 2
BiBi style tile 3

BiBi style tile 1
BiBi style tile 2
BiBi style tile 3
BiBi high fidelity mockup v1 Feed screen
BiBi high fidelity mockup v1 My bibis screen
BiBi high fidelity mockup v1 open a bibi
BiBi high fidelity mockup v1 pick a location step
BiBi high fidelity mockup v1 pick a bibi step
BiBi high fidelity mockup v1 Account screen
gray My bibis title bar
red My bibis title bar
purple My bibis title bar
turquoise My bibis title bar
Greenery My bibis title bar
orange My bibis title bar

BiBi style tile 1
BiBi style tile 2
BiBi style tile 3
BiBi high fidelity mockup v1 Feed screen
BiBi high fidelity mockup v1 My bibis screen
BiBi high fidelity mockup v1 open a bibi
BiBi high fidelity mockup v1 pick a location step
BiBi high fidelity mockup v1 pick a bibi step
BiBi high fidelity mockup v1 Account screen
gray My bibis title bar
red My bibis title bar
purple My bibis title bar
turquoise My bibis title bar
Greenery My bibis title bar
orange My bibis title bar

BiBi style tile 1
BiBi style tile 2
BiBi style tile 3
BiBi high fidelity mockup v1 Feed screen
BiBi high fidelity mockup v1 My bibis screen
BiBi high fidelity mockup v1 pick a location step
BiBi high fidelity mockup v1 pick a bibi step
gray My bibis title bar
red My bibis title bar
purple My bibis title bar
turquoise My bibis title bar
Greenery My bibis title bar
orange My bibis title bar
purple My bibis screen mockup
turquoise My bibis screen mockup
Account screen before
Account screen after
Send a bibi screen after
Send a bibi screen before
pick a bibi beer screen
pick a bibi wine screen
pick a bibi cocktails screen
pick a bibi shots screen
pick a beer list view
pick a friend list view
pick a beer grid view
pick a friend grid view

Giftry app screenshot
Swarm app screenshot
Untappd app screenshot
buddy drinks app screenshot
Ritual app screenshot
ItsOnMe app screenshot
Groupon app screenshot
Swarm app screenshot
emoji thumbs up
emoji smiling face with sunglasses
emoji wrapped gift
BiBi style tile 1
BiBi style tile 2
BiBi style tile 3
BiBi high fidelity mockup v1 Feed screen
BiBi high fidelity mockup v1 My bibis screen
BiBi high fidelity mockup v1 pick a location step
BiBi high fidelity mockup v1 pick a bibi step
purple My bibis screen mockup
turquoise My bibis screen mockup
Account screen before
Account screen after
Send a bibi screen after
Send a bibi screen before
pick a bibi beer screen
pick a bibi wine screen
pick a bibi cocktails screen
pick a bibi shots screen

felix poon design logo
Giftry app screenshot
Swarm app screenshot
Untappd app screenshot
buddy drinks app screenshot
Ritual app screenshot
ItsOnMe app screenshot
Groupon app screenshot
Swarm app screenshot
emoji thumbs up
emoji smiling face with sunglasses
emoji wrapped gift
BiBi style tile 1
BiBi style tile 2
BiBi style tile 3
BiBi high fidelity mockup v1 Feed screen
BiBi high fidelity mockup v1 My bibis screen
BiBi high fidelity mockup v1 pick a location step
BiBi high fidelity mockup v1 pick a bibi step
purple My bibis screen mockup
turquoise My bibis screen mockup
Account screen before
Account screen after
Send a bibi screen after
Send a bibi screen before
pick a bibi beer screen
pick a bibi wine screen
pick a bibi cocktails screen
pick a bibi shots screen
pick a beer list view
pick a friend list view
pick a beer grid view
pick a friend grid view