UX/UI кейс: redesign, e-commerce, research, kassirsha
Д. Хармс
Пролог
Это мой первый кейс. Как впрочем, редизайн сайта. А редизайн — учебный. Путь оказался полон вызовов и тайн. Хармс тут ни при чём. Почти.
Как всё начиналось
Я и мои друзья часто покупаем масла в Оливии. Классный специализированный магазин с огромным выбором, где масло можно продегустировать. Вот так ходишь, ходишь в магазин за пополнением запасов оливкового масла extra virgin DOP, а потом бах — и ожидания не оправдываются, когда идёшь искать компанию в интернете.
Оливия – компания, которая продает и поставляет масла, органическую косметику на их основе, а также закуски, соусы и заправки. Аудитория – b2b и b2c сегменты.
Чего я хотела добиться редизайном:
- дать посетителям больше пользы (рецепты, блог), упростить процесс покупки и регистрации на сайте
- создать площадку с полезной информацией (блог), повысить средний чек через отзывы и рекомендованное, добавить интерактива
- стимулировать онлайн-покупателей приходить на дегустации в оффлайн-магазины, что также повышает средний чек. Дегустация – аргумент
- помахать ручкой b2b сегменту с первого взгляда на шапку сайта
Как это сделать:
- вытащить на видное место полезные материалы для b2c (карусель с баннерами из разных категорий сайта, блог, рецепты, новости)
- поместить способы связи для b2b на видное место, добавить форму для связи и сотрудничества прямо с сайта
- «Отзывы» – убеждение для b2c, «Наши клиенты» – убеждение для b2b
- сократить дистанцию между компанией и клиентами: добавить фотографии первых лиц
- превратить текстовые полотна в читабельный текст
- добавить больше призывов к действию
- добавить вариант самовывоза к оформлению заказа и оплату на сайте. (Почему их нет?)
Как говорится, критикуешь – предлагай. Но реализовала не всё. Что не нарисовала, описала буквами.
Итак, маркетинговые решения. Для увеличения среднего чека добавила блоки «С этим товаром покупают», «С этим товаром можно приготовить». Покупатель может выбрать другой сопутствующий товар – оливки для пиццы, бальзамик для салата, соус для пасты и т.д. Закрыть сомнения – через отзывы. Баннер создает больше точек контакта с продукцией, блогом и доставкой, а блок с социальным доказательством вызывает доверие у потенциального покупателя.
UX-исследование
В соц.сетях есть группа подписчиц – девушки 30-35 с детьми, заботящиеся о красоте, здоровье и детях. В подписках – рецепты, секреты красоты, новости города, саморазвитие (психология, эзотерика). На сайте есть раздел с пользой масел и местами упоминаются рецепты, но отсутствует информация о косметике и о дегустациях. Дегустация – это, повторюсь, неопровержимый аргумент. Сегодня мне так парень из ларька сухофруктов напродавал. А эти ребята – просто монстры дегустаций.
Также есть важная часть аудитории – b2b. Для этой категории важно экономить время, отслеживать поставку онлайн, делать заказы и т.д. Важно быстро связаться.
Промониторила конкурентов, чтобы собрать голема из существующих решений. Юзабилити-тестирование проводила на друзьях и на себе, как на покупателе (да, знаю, что дизайнер не равно покупатель).
Архитектура и макет
Этот проект – мой первый в жизни, так что нужно было начать хоть с чего-нибудь. Архитектуру сайта набросала исключительно для тренировки. А потом и вовсе ею не пользовалась, поскольку не собиралась переделывать сайт полностью. Но если бы делала с нуля, то здесь задержалась бы подольше, чтобы в проектировании избежать косяков. С низкоуровневыми макетами аналогично.
Customer Journey Map
Работая в розничном магазине, я научилась технике продаж, которую неоднократно применяла в работе. Использовала технику при общении в оффлайне и переносила на тексты в онлайн. Я заметила, что при проектировании работает та же история. AIDA используется при проектировании интерактива в web, написании лендингов и продающих текстов. CJM для меня перекликается с AIDA. Только шире за счет использования аналитики и точек коммуникации пользователя с брендом в онлайне и оффлайне, чтобы создать потоковость. CJM «сочувствует» пользователю, поскольку учитываются контекст, эмоции, мысли и действия. Мой CJM в истории этого магазина такой:
ссылка на полную версию картинки:
Есть два сайта:
Первый я редизайнила, второй обнаружила, пока писала этот лонгрид. Первый в целом интуитивно понятен, но неотёсан. Местами содержит смысловые тупики и вообще не призывает к действию. Есть пустые ссылки. Баннер ведёт вникуда и в карусели дублирует сам себя. На втором сайте я обнаружила живые ссылки на соц.сети.
Под скринами — мои решения с комментариями.
Главная
Начну с шапки. Поменяла расположение некоторых элементов. Читаем мы слева направо, поэтому самое важное находится по краям. Зеленым выделены целевые действия (главная, каталог, телефон, корзина). На сайте выше отсутствует важная кнопка для b2b (Партнеры). Также нет раздела с косметикой, хотя о ней упоминается в описании и она продается в магазинах. «Мамам» этот раздел может показаться интересным.
Для баннера придумала карусель из ссылок разных категорий. Подборка товара, новинки, рецепт, новости, инфа о поставщике. Баннер — это польза плюс по смыслу привязанный товар из магазина. Так люди будут больше узнавать о товарах с разных сторон.
Под баннером разместила блок с новостями. Чувство новизны вызывает интерес. Выбор покупателей нацелен на социальные доказательства. Если кто-то оценил, то и мне может понравиться. Этот блок ведет в каталог.
Рецепты — рассказ о продукте и предложение сопутствующих товаров, что повышает средний чек. Группа аудитории — мамы, которые любят готовить. А что ещё делать с продуктами питания?)
Раздел с наборами на оригинальном сайте меня поставил в тупик. Там предлагалось позвонить, а телефон не был указан. Поскольку наборов на сайте также не было, дала волю фантазии. Ассортимент можно поделить на ценовые и смысловые категории (например, товар на сумму от 300р до 1000р; оливковое масло и бальзамик или масло и соус). Дать пользователю поиграться и собрать набор на определенную сумму. Добавляем интерактив.
Подвал я реорганизовала по смысловым группам и добавила призыв к действию для b2c — кнопка «Перейти в каталог», чтобы не прерывать сёрфинг.
ссылка с картинкой побольше:
Каталог и фильтры
Реорганизовала блок с фильтрами. Видов масел много. На каком-то сайте увидела строку поиска в фильтре. Мне понравилось.
Классификация и тип были смешаны в кучу. Пока разбиралась, узнала в чем разница между оливковыми маслами. Неоливковые делят на рафинированные и нерафинированные, поэтому блоки разделила.
Размещала блоки по смыслу. Как обычно ищут масло? Вид, тип, цена. Потом, возможно, страна производства. Для меня было бы важно увидеть на сайте, в чем отличие оливковых масел из разных стран. Даже если на вкус влияет место и сорт. Пусть об этом будет написано.
Баннер — это любой оффер, не обязательно для владельцев карт. До конца не уверена в их существовании.
ссылка с картинкой побольше:
Карточка товара
Разделила на блоки инфу с сайта, добавила информацию о наличии и доставке. Закрыла сомнения блоком ЧаВо под доставкой. Блок с отзывами сделала похожим на соц.сети. Выглядит привычно, отчего бы не поделиться впечатлениями.
Если человек покупает что-то одно, в оффлайне продавец совершает допродажу. Сайт может предложить рецепты, показать похожие или сопутствующие товары.
ссылка с картинкой побольше:
Корзина
Ниже будет три картинки: положили в корзину, в корзине с наполнением и в пустой.
Здесь ничего необычного, как будто с консультантом в магазине общаешься.
ссылка с картинкой побольше:
Пустую корзину хочется заполнить. Добавляем CTA «Перейти в каталог». Кто не знает чем, получает рекомендации.
Процесс регистрации
Было — стало. Тренды таковы, что всем регаться лень, поэтому сделала только ввод номера. У входа и регистрации одно лицо. Подписаться на рассылку можно уже зайдя в личный кабинет. У капчи не было иконки «Обновить». Когда я неправильно вводила капчу, я не могла закрыть форму по нажатию на поле (ну это мелочи, наверное). Когда уже преисполнилась гнева от четвертого подряд неправильного ввода, то начало казаться, что тексты «Забыли?» и «У вас нет аккаунта?» максимально насмехаются надо мной.
Мобильная версия
Удобное решение — сдвинуть главное целевое действие в подвал экрана. CTA на широком экране — корзина, ЛК, онлайн-чат и звонки (обратный и прямой). Потому что там пальцы и мы туда скроллим. В гамбургере — ссылки из десктоп-версии, поиск по каталогу — в строке, меню под поиском — а-ля гугл.
ссылка на картинки побольше:
E-mail рассылка
Как продолжение банкета при первой регистрации или заказе. В письме есть кнопки с действиями на сайт в личный кабинет. Когда приходит подобное письмо, ты точно уверен что оплата прошла, что заказ формируется.
ссылка с картинкой побольше:
That's all, folks
Неучтённое
Под конец я ещё раз перечитала раздел «О нас» на текущем сайте и поняла, что можно добавить геоточку с выбором города, чтобы в раздел доставки сразу подтягивать примерную стоимость и время доставки в регион покупателя.
Изначально хотела переработать все текстовые полотна, но уже стало лень. Лень, потому что редизайн для study case, и я сама себе и проджект, и дизайнер, и начальник. В раздел для корпоративных клиентов поместить форму обратной связи, расписать преимущества работы с компанией, поделиться ценностями и фотографиями главных лиц. Лица вызывают доверие.
Рассказать, с кем конкретно компания сотрудничает, а не абстрактно «во многих гипермаркетах страны».
Поглубже проработать бренд и каналы. Воскрешать соц.сети. Обучить продавцов. И материально их поощрять.
Результаты аудита сайта на ошибки показали печальную скорость загрузки и web и мобильной версий. Убрать тяжелые картинки, оптимизировать внутренние ссылки.
Интересно, существует ли в природе колесо вкусов масел — как у вина, кофе и чая? Продукт привязан к сортам и географии, есть культура потребления.
Общие выводы
Сегодня мы многое поняли! Исследование аудитории — краеугольный камень в UX/UI и маркетинге. Остальное прикладывается.)
Подписаться на мой канал можно здесь. Сводки с полей, чат, промежуточные результаты. Ссылка на Behance с картинками здесь.