About the project
For over 13 years, Bon Bon has been selling professional hair, face, and body care. The catalog carries 10,000+ products from 45+ brands, including Keune, Paul Mitchell, Kemon, and Subtil. Its customers range from everyday shoppers to hairstylists, beauty salons, and wholesale partners.
The main challenge: Bon Bon had no brand book, which held back its growth. On top of that, the new website had to take some of the load off the sales managers and get the store ready to enter the EU market.
Goals
- Refresh the logo and build a brand identity.
- Simplify navigation and the catalog structure.
- Build smart search and easy-to-use filters.
- Add reviews, how-to-use instructions, ingredients, stock status and delivery times to the product page.
- Streamline checkout and lay the groundwork for international shipping.
- Plan a loyalty program and free gifts with orders.
- Separate the terms for retail customers and professionals
Branding
We designed a new logo: a wordmark and an emblem built from the letters of the brand name. Our designers drew inspiration from waves of hair and the ribbons used to tie it up.
We explored five color options and settled on a pink palette with powder, cream, and lavender accents.
We also built a UI design system that documents every element state: typography, buttons, input fields, toggles, tabs and icons. It speeds up development and lets the team add new pages without losing the visual style.
.png)
Homepage and navigation
We designed a multi-level catalog menu with dedicated entry points for Brands and Sale. On mobile, the menu opens step by step. On the homepage, the "Find your perfect product" quiz recommends care based on skin type or hair color and saves the result as a personal beauty code.
Search and catalog
Search suggests matches as you type and shows sortable results. The catalog has step-by-step filters on mobile, brands grouped as "popular + A to Z," tags for applied filters, and a "Notify me when it's back" pop-up.
.png)
.png)
Product page
The product page brings together the gallery, stock status, rating, size options, key ingredients, and delivery and payment terms. We added a subscription for regular delivery, installment payments, bonus points for purchases, and a "Better together" bundle block.
.png)
Cart and checkout
The cart shows how much is left for free shipping and lets shoppers pick a free gift with their order. At checkout, customers can choose a Nova Poshta branch on a map, ship abroad, pay in installments, and use gift cards, promo codes, or bonus points.
.png)
.png)
Account and loyalty
The account includes orders with tracking numbers, wishlists, reviews with photos, Bonbonusy bonus points, subscription management, and consultation booking. Hairstylists and salons unlock professional products once they register as partners.
Results
- Created the brand's visual identity: logo, color palette, and signature graphic elements.
- Built a design system: a UI guide and component library to support the store's future growth.
- Designed new UX/UI for all key pages: homepage, catalog with search and filters, product page, cart, and checkout.
- Designed extra sales features: a loyalty program, care recommendations through the beauty-code quiz, gifts with orders, and separate terms for professional buyers.
- Built scalability into the design: international shipping and room to expand into new markets.
- The design was implemented by the Linecore team.
