Дизайн интернет-магазина шоколадных конфет ручной работы

Рассказываю о работе над учебным проектом по проектированию дизайна интернет-магазина для шоколадной мастерской «Мадам Шокодам».

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

Время на чтение — 3 минуты.

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

Сайт должен стать новым каналом для продвижения компании.

Пользователи — это жительницы Ярославля 35+ с высоким доходом, которые очень ценят качество.

В качестве референсов по заданию рекомендовано использовать магазины дорогого шоколада и парфюмерии.

Анализ конкурентов

Проанализировала сайты 7 прямых и 2 непрямых конкурентов (всю информацию свела в таблицу GoogleDocs). В результате анализа сформировалось предложение по составу страниц и блоков будущего сайта.

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

«Собери набор» — это страница для самостоятельного формирования набора конфет. Я обратила внимание, что мало кто предлагает такую услугу, а значит этим функционалом можно выгодно выделиться среди конкурентов. Поэтому на эту страницу будет сделан акцент в проекте.

В процессе анализа конкурентов отметила несколько интересных решений. Понравилось как сделано формирование набора в компании АПРИОРИ в виде объемной коробочки, которая заполняется онлайн (очень залипательный сам процесс). Еще понравилось описание конфет у компании «Eochocolate»: подробный текст и красивое фото, в том числе ингредиентов начинки. Что-то похожее захотелось реализовать в проекте.

В результате получилась вот такая структура сайта.

Анализ целевой аудитории

Для анализа целевой аудитории запустила онлайн опрос, в котором приняли участие 21 человек. Провела интервью с двумя представителями целевой аудитории. Изучила группу в VK.

С вопросами и сводом ответов онлайн опроса можно ознакомиться по ссылке

Основные выводы из опроса и интервью

Для покупателей важно:

У покупателей вызывает негатив:

Анализ взаимодействия покупателя с шоколадной мастерской

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

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

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

Основное настроение от сайта, которое хотелось бы передать — это лёгкость, игривость и красота.

Инструменты, которыми попыталась достичь нужный результат

Типографика

Цвет

Использую в дизайне «съедобные» оттенки: палитра цвета шоколада, молока, сливок, кофе, нежных фруктовых начинок, чтобы вызвать ассоциацию с этими продуктами и желание попробовать конфеты на вкус.

Фотостиль

Использовала фото продукции, представленные заказчиком.

Подбирала фото на фотостоке Unsplash, Freepik и AdobeStock. Все фотографии можно бесплатно использовать в коммерческих целях (с упоминанием автора).

Для того, чтобы эффектно показать конфеты подготовила коллажи из конфеты и ингридиентов начинки.

Фото подбирала в теплой цветовой гамме для соответствия выбранной палитре цветов.

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

Аналогичные решения используются во многих магазинах премиального класса.

Такое решение поможет показать ценность продукции.

Иллюстрации

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

Еще в проекте использую иллюстрации в виде текста, изогнутого волной. По моему мнению, такой эффект подчеркивает эксклюзивность и неповторимость конфет ручной работы.

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

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

Для этого случая было спроектировано два вида карточек товара и отдельный каталог для раздела «Собрать набор».

Главная страница

Каталог

Для каталога спроектировала два вида карточек.

При наведении мышки на карточку меняется фото, добавляется короткое описание, оценка покупателей, ссылка на отзывы и кнопка «В корзину».

При клике на карточку можно перейти к подробной карточке товара. При клике на ссылку «Отзывы» — к разделу отзывы на подробной карточке.

Раздел «Собрать набор»

Возможность выбрать конфеты в набор — важное преимущество шоколадной мастерской.

Собрать набор легко. Для этого нужно сделать 3 шага: выбрать конфеты, выбрать упаковку и офрмить заказ.

Раздел «Собрать набор» включает в себя фильтр, каталог конфет, каталог упаковки, блок «Ваш набор», в котором собираются выбранные клиентом позиции, а также элементы навигации для переключения между каталогами.

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

Фильтр находится в лёгкой доступности, на десктопной версии фильтр постоянно на экране в открытом состоянии, на мобильных по умолчанию в свёрнутом состоянии.

Карточка товара

Для раздела «Собрать набор» создала отдельную подробную карточку, чтобы действие пользователя по добавлению конфеты в набор было интуитивно понятным. В карточке для раздела «Собрать набор» акцент сделан на кнопке «Добавить в набор». А в карточке для обычного каталога акцент напротив сделан на кнопке добавления в корзину.

Адаптивы

Страницы сайта проектировались для декстопной версии 1440х1024, планшета 744х1133 и смартфона 393х852.

Было интересно делать адаптивы для раздела «Собрать набор», так как нужно было решить как удачнее разместить блок «Ваш набор», каталог и фильтр.

Спасибо за ваше внимание.

Буду рада обратной связи по проекту, особенно от профи или любителей шоколадных конфет.

Также приглашаю посмотреть кейс на Behance.

В проекте использовались фото и иллюстрации с ресурсов Unsplash, Freepik и Adobe Stock. Спасибо авторам: Mak, urika, Pixel-Shot, Nikolay, Vee, morrowlight, Simple Line, Freedom Life, Africa Studio, Yuliia Osadcha, Yasir Design, Renato Muolo, Daria Shatova, @chandlervid85, @freepik, @4045, @cookie_studio, Annie Spratt, M.studio, Ricardo Henri, Євгенія Височина, Mia Golic, Sara Cervera, Maria Georgieva, Jessica Loaiza, Joвана Младеновић