Рассказываю о работе над учебным проектом по проектированию дизайна интернет-магазина для шоколадной мастерской «Мадам Шокодам».
Немотря на то, что проект учебный, мастерская самая настоящая. Она работает в городе Ярославле и предлагает конфеты ручной работы из шоколада через социальные сети и маркетплейсы. Еще мастерская проводит мастер-классы, дегустации и участвует благотворительных акциях.
Время на чтение — 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вана Младеновић