Bon Bon Bon

Detroit chocolatier Bon Bon Bon is a small company with big appeal and a huge national customer base. They came to Skidmore Studio for a website redesign, hoping to replicate their unique, charming store experience for online shoppers. 

The team on the project was made up of an Account Manager, Producer, Copywriter/Strategist Alissa Kline, and myself as the UI/UX designer.

bon-intro-1250

DISCOVERY & STRATEGY

We sat down for a deep-diving discovery session learning about their customer base, current website pains, e-commence needs, dreams, and project goals. Along the way, we looked into the industry to see what’s happening and spend some time at their brick-and-mortar locations to really see the shopping experience.

Next, we collaborated on the site strategies – what is it that we want this site to do and ways to hit our project goals. We drafted a sitemap to organize the content to match our project goals and to start building wireframes.

bbb-sitemap

UI/UX, CONTENT STRATEGY, & WIREFRAMES

When I create wireframes, I like to start thinking about the content on each page – figuring out hiearchy, spacing, typography, and even sizing of elements. This allows me to space plan and get a really good gut check with the client to make sure we are heading down a good direction. It’s very iterative and the next step is to add the visual design to the wireframes.

bbb-wfs

THE RESULTS

When you walk into a Bon Bon Bon store, it’s already a pretty visual experience. But each Babe Babe Babe (what they call themselves) adds their own personal and unique experience to your visit. We collected a bunch of items from the stores to add a lot of texture and really show their personality.

Through iteration and exploration, we created a really unique site that fits their brand and goals perfectly. With the Babe Babe Babes, we collaborated with their photographers to shoot a bunch of new images for the site including gifs explaining their packaging and photos to show the size of the package.

packaging-C-360×360
packaging-D-360×360
packaging-E-360×360
packaging-B-360×360
bbb-homepage
bbb-cat-page
bbb-builder
bbb-about
bbb-contact-faq
bbb-product
bbb-stamp-bons

© Nate Rapai. All rights reserved.