
О проекте
Bon Bon больше 13 лет продает профессиональную косметику для волос, лица и тела. В каталоге более 10 000 товаров от 45+ брендов, среди них Keune, Paul Mitchell, Kemon и Subtil. Покупают здесь как розничные клиенты, так и мастера, салоны и оптовые партнеры.
Главный вызов: у Bon Bon не было брендбука, и это тормозило масштабирование. При этом новый сайт должен был снять часть запросов с менеджеров и подготовить магазин к выходу на рынок ЕС.
Задачи
- Обновить логотип и создать фирменный стиль.
- Упростить навигацию и структуру каталога.
- Сделать умный поиск и удобные фильтры.
- Добавить в карточку товара отзывы, способ применения, состав, наличие и сроки доставки.
- Упростить оформление заказа и предусмотреть доставку за границу.
- Заложить программу лояльности и подарки к заказу.
- Разделить условия для розничных покупателей и профессионалов.

Брендинг
Разработали новый логотип: надпись и эмблему, построенную из букв названия бренда. Вдохновением для дизайнеров стали волны волос и ленты, которыми их перевязывают.



Рассмотрели пять цветовых вариантов и остановились на розовой палитре с пудровым, кремовым и лавандовым.

Создали UI-дизайн-систему с описанием всех состояний элементов: типографика, кнопки, поля, переключатели, табы, иконки. Она ускоряет разработку и позволяет добавлять новые страницы, не теряя стилистику.
.png)
Главная и навигация
Спроектировали многоуровневое меню каталога с отдельными входами в «Бренды» и «Акции», на мобильных меню открывается пошагово. На главной квиз «Найди свое идеальное средство» подбирает уход по типу кожи или цвету волос и сохраняет результат как beauty-код.




Поиск и каталог
Поиск подсказывает варианты прямо во время ввода и выводит результаты с сортировкой. В каталоге есть пошаговые фильтры на мобильных, бренды «популярные + по алфавиту», теги выбранных фильтров и поп-ап «Сообщить о наличии».

.png)

.png)
Карточка товара
В карточке собрали галерею, наличие, рейтинг, выбор объема, активные ингредиенты, условия доставки и оплаты. Добавили подписку на регулярную доставку, рассрочку, бонусы за покупку и блок «Вместе дешевле».

.png)
Корзина и оформление заказа
В корзине есть шкала до бесплатной доставки и выбор подарка к заказу. При оформлении можно выбрать отделение Новой почты на карте, доставку за границу, оплату частями, сертификаты, промокоды и оплату бонусами.
.png)

.png)
Личный кабинет и лояльность
В кабинете собраны заказы с ТТН, избранное, отзывы с фото, бонусы «Бонбонусы», управление подписками и запись на консультацию. Мастерам и салонам профессиональные товары открываются после регистрации в качестве партнера.



Результаты
- Разработали визуальный стиль бренда: логотип, цветовую палитру и фирменные элементы.
- Создали дизайн-систему: UI Guide и библиотеку компонентов для дальнейшего развития магазина.
- Разработали новый UX/UI-дизайн ключевых страниц: главной, каталога с поиском и фильтрами, карточки товара, корзины и оформления заказа.
- Проработали дополнительные возможности для продаж: программу лояльности, подбор ухода через квиз beauty-кода, подарки к заказам и отдельные условия для профессиональных покупателей.
- Заложили в дизайн возможности для масштабирования: международную доставку и выход на новые рынки.
- Дизайн реализовала команда Linecore.
