Кейс: как мы переосмыслили дизайн сайта корейского бренда, чтобы подчеркнуть его философию

Существующий дизайн интернет-магазина корейского бренда мыла и аксессуаров Binu-Binu нуждался в обновлении. Мы переосмыслили его, чтобы максимально точно отразить философию бренда в визуальном решении. Кейс о том, как создать гармоничный и функциональный дизайн.

Привет! Мы веб-студия BAR. Мы делаем креативные сайты на Тильда и Вебфлоу: придумываем концепты, дизайним, верстаем, а еще делаем айдентику, иллюстрации и моушн видео для бизнеса. Недавно мы делали редизайн сайта для корейского бренда мыла и аксессуаров Binu-Binu. Рассказываем, как мы переосмыслили бренд и подчеркнули уникальность философии Binu-Binu с помощью дизайна.

Корейский бренд Binu-Binu производит мыло ручной работы и различные аксессуары. Философия бренда основана на глубокой связи с корейскими традициями и культурой, идеей очищения через ритуалы бани.

Исходный сайт был выполнен в простом стиле и имел ряд недостатков — сложная структура, перегруженность информацией, отсутствие фильтров и возможностей персонализации. Это не позволяло полноценно раскрыть особенности и философию бренда Binu-Binu.

Цель нового проекта заключалась в масштабном рестайлинге сайта для повышения узнаваемости бренда, конверсии и лояльности аудитории.

На подготовительном этапе занялись исследовательский работой и собрали доступные материалы об имидже и философии бренда.

Мы проанализировали основных конкурентов нашего проекта. Один из них — интернет-магазин натурального мыла, который позиционирует себя как премиальный бренд, делает акцент на ручной работе и имеет сеть офлайн-магазинов. Еще один конкурент — интернет-магазин, продающий авторское мыло ручной работы по доступным ценам, половину прибыли тратит на благотворительность. Наш проект также позиционируется как премиальный бренд ручной работы, делающий акцент на натуральности и оригинальности продукта. Мы выигрываем у конкурентов более эстетичным дизайном, отражающим философию бренда.

На основе анализа мы разработали информационную архитектуру. Туда мы добавили такие атрибуты товаров, как название, цена, фотографии, описание, категория. Для удобства пользователей предусмотрены фильтрация по категориям и сортировка. В карточке товара отображается название, цена, фото. На странице товара — подробное описание, характеристики, фотографии. И реализовали на сайте перекрестные продажи, показ рекомендуемых и сопутствующих товаров.

Изначально главная страница включала лишь три блока демонстрации товаров. Теперь она выполняет роль агрегатора, позволяя пользователю ознакомиться с философией бренда и его историей, узнать адреса магазинов, ознакомиться с категориями товаров и увидеть новинки, которые появились на сайте. При необходимости можно перейти на отдельные тематические страницы.

Страница «О нас» структурирована — выделены ключевые преимущества бренда, благодаря этому текст читается легче. Добавлена навигация по категориям товаров, фильтрация, сортировка, избранное. Реализован поиск и личный кабинет пользователя, объединена вся информация о товаре на одном экране, так бренду проще делать рассылки и держать покупателей в курсе новых поступлений.

В оригинальном сайте дополнительная информация о товаре располагалась внизу страницы. Чтобы пользователю не приходилось делать лишних действий для поиска информации о товаре, мы собрали все важные данные в пределах одного экрана.

При разработке визуальной концепции для сайта Binu-Binu был проведен анализ типичных решений в индустрии натуральной косметики — пастельные тона, воздушность, сочетание антиквы и гротеска, 2-4 колоночная сетка.

Для того, чтобы сделать проект уникальным, мы собрали большое количество референсов не только интернет-магазинов, но и плакатов, новостных и корпоративных сайтов. Были проанализированы примеры хороших функциональных решений. Такой тип референсов помогает выстроить грамотную систему в макете и сделать сайт удобным для пользователя.

В итоге мы создали макет, который сочетает в себе удобство, понятность функционала и хорошие стилистические решения — интересную работой с сеткой, композицией, отрицательным пространством. Каждый блок имеет эстетичный дизайн, а цветовая гамма гармонично дополняет контент.

Для передачи макета разработчику разработан подробный UI-kit со всеми элементами, выполнены адаптивные версии страниц, добавлены пояснения в комментариях и продумана логика интерактива, чтобы проект был полностью готов к технической реализации.

Если вам понравился наш кейс, и вы хотите, чтобы мы сделали крутой сайт с аналитикой, хорошей конверсии и красивым дизайном — пишите в телеграм. А здесь презентация Bar Agency.