Клиент
Команда интернет-магазина AromaCode.ru
Сфера
Продажи: парфюмерия, косметика, средства по уходу
Задача
Полный редизайн продукта:
от исследования до концепции, визуализации и тестирования
Год
2020-2021

AromaCode.ru — крупный интернет магазин парфюмерии и косметики. Первостепенная задача — это полный редизайн сайта (ПК-версии и мобильной). Было необходимо обновить его визуальную часть, проработать юзабилити, повысить конверсию и в дальнейшем поддерживать продукт. Предыдущий дизайн, мягко говоря, устарел, он был далеко не «юзер-френдли», а учитывая то, как стремительно развивается сфера продаж (а именно маркет-плейсы и интернет-магазины) — отступать было нельзя!

Исследование

Начал я свою работу над проектом с исследования. Я изучил конкурентов, ознакомился со сферой продаж (раздел парфюмерия и косметика), её целевой аудиторией, провёл не мало времени в Яндекс-метрике и её веб-визоре.

Проблемы с юзабилити встречались чуть ли не на каждой странице сайта.

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

Прототипы

Я спроектировал и отрисовал более 20 страниц, разделов и форм. Это были кликабельные прототипы, с их помощью мы быстро вносили нужные поправки во время тестов.

Цвета и элементы

Основной цвет компании

#3EA3AF

Вторичный цвет элементов

#55ACEE

Цвет текста и заголовков

#333437

старая версия

мой предложенный вариант

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

Проблемы с шапкой сайта

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

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

Как я решил проблему:

  • Придал общую структуру элементам, выровнял их по сетке;
  • Упростил визуальную нагрузку разноцветных кнопок, убрал лишнее;
  • Расположил информационные ссылки (доставка, оплата и т.д) на отдельном меню в шапке;
  • Добавил выпадающее меню для корзины.
Главная страница

Главная страница не вовлекает покупателя

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

Начать можно было с главного слайдера: если верить Яндекс-Метрике, пользователи чаще используют навигационные элементы внизу слайдера, нежели список справа. На тот момент я сверялся со скриншотом карты кликов за последний квартал в Метрике. Помимо того, что навигацией справа не пользовались, она выглядела, мягко говоря, «не очень» и выбивалась из общей картины в целом (по структуре, которая вовсе отсутствовала, и из общего стиля сайта).

Визуально я изменил общий стиль всех кнопок, форм и ссылок. Необходимо было отказаться от выпуклых кнопок с грубыми тенями вокруг них и градиентов,  это помогло значительно «освежить» дизайн сайта, сохранив «узнаваемое лицо». Добавил «воздушности» дизайну: почти на всех элементах расстояние между друг другом было чуть-ли не в 2px, что создавало неудобство в читаемости. Это, зачастую, может привести к тому, что пользователь либо не заметит полезную для него информацию, либо “устанет” от попыток поиска.

Изменения коснулись и блока статей на сайте. Больше 50% поисковых запросов ведут на SEO статьи интернет-магазина по ключевым словам. Блог на старой версии был максимально не оптимизирован для работы с ним. Сложно было ориентироваться в нём, искать определенную статью, не было дополнительных разделов; единственная его функция на тот момент — это переход в товар из статьи (не было возможности перейти к другим статьям и свободно читать их).

Блог я проработал следующим образом:

  • Создал различные разделы, подборки, категории для удобной навигации по нему;
  • Добавил возможность подписаться на новостную рассылку;
  • Более структурированно расположил статьи (плиткой), добавил хлебные крошки.

старая версия сайта

новая версия блога

блок социальных сетей и блога

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

И не забыть про доверие покупателей!

Интернет-магазин AromaCode.ru уже очень давно на рынке парфюмерии и косметики. В этой сфере очень важно доверие и лояльность к магазину как новых, так и старых покупателей.

Ещё одна из проблем с главной страницей здесь — это отсутствие каких либо блоков ведущих на социальные сети (VK, Instagram, Youtube).

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

Дополнительные страницы

Всего было отрисовано 40+ экранов только для ПК версии дизайна

Каталог и поиск товара

С каталогом и поиском в старой версии дизайна всё было тоже не так однозначно. Поиск не работал нужным образом. Если верить исследованиям Beymard, 60% мобильных пользователей изучали новый сайт и продукты именно через поиск. Пользователи считали, что так быстрее и удобнее, нежели чем перемещаться по основной навигации.

Заставить поиск мыслить «человеческим языком» практически нереально, но его можно заставить понимать его на уровне некоторых этапов и запросов. Конечно, это задача для бэкенд разработчиков, но я, со своей стороны, могу поспособствовать этому следующим образом:

  • Точный поиск: ситуация, когда покупатель знает точно название товара, но может в нём ошибиться на лишний апостроф или букву. В названии уходовых средств или парфюмерии зачастую встречаются такие моменты. Поиск должен различать подобные запросы: «Escentric Molecule 02» и «Escentric Molecul 02» и «Molecule 02»;
  • Идентичные и похожие значения слов: «Очищающий шампунь Esthetic House» или «Шампунь для очищения Esthetic House»;
  • Раскладка: распознавать английские названия товаров и брендов, написанные русскими буквами «Том форд» и «Tom Ford»;
  • История поиска и топ запросов: учитывать статистику поисковых запросов по сайту, во многих случаях тоже помогает покупателю сориентироваться в поиске нужного товара.

старая версия

мой предложенный вариант

Страница с каталогом

Фильтры для каталога

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

Из-за того, что у фильтров не было зависимости друг от друга, значительно усложнялась работа с ним. Хорошим решением было сделать такой принцип работы фильтра, в котором при применении одного параметра, например «Бренд», в остальных блоках фильтра показывались бы только те значения, которые актуальны для этого бренда. Например, если выбрать бренд «Amouage», то типы товаров, семейства и ноты отображались бы только для этого параметра.

Как я переработал фильтры:

  • Добавил поиск по фильтрам;
  • Разработчики проделали работу с зависимостью фильтров друг от друга;
  • Добавил возможность отображения выбранных фильтров + возможность удаления ненужного;
  • Отобразил количество найденных товаров;
  • Для удобства добавил ползунок фильтра цены.

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

Карточка товара тоже получила ряд улучшений: так же, как и в ситуации с главной страницей, было решено оставить текущую структуру. Изучая целевую аудиторию парфюмерии и косметики, я был удивлён сколько существует разных терминов в парфюмерии и впервые узнал значение слова «парфюманьяки» 🕵️‍♂️.

Это помогло мне понять, что было бы классно увидеть в карточке товара помимо фото, характеристик, цены и кнопки «купить». Я добавил отображение коллекции парфюма на видное место, т. к. многие следят за определенными коллекциями ароматов, и тем самым дал возможность ознакомиться с ними сразу из карточки товара. Так же был добавлен «парфюмерный словарь» в котором содержится информация и конкретные термины о парфюмерии (к примеру, там можно с лёгкостью узнать чем отличается парфюмерная вода от туалетной). 

Также, нашлось место и под сроки с доставкой, ведь по исследованиям beymard,  64% ​​покупателей ищут стоимость доставки прямо на странице товара, а 24% утверждают, что отказались от покупки, потому что не смогли ее найти. Таким образом, помимо стоимости, я добавил ещё и сроки доставки.

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

Важное значение отзывов о товаре

В нынешнее время почти ни один магазин, товар или компания не обходятся без отзывов. В нашем случае мы снова можем обратиться к исследованиям Baymard, где говорится, что:

И это ещё не все: стоит отметить, что покупатели очень хорошо воспринимают обратную связь с интернет-магазином. Это считается большим плюсом и толкает людей пересмотреть своё отношение к товару, сайту и бренду в целом. Было решено выделить среди отзывов о товаре команду интернет-магазина, чтобы была видна обратная связь с операторами.

Мобильная версия

Мобильной версии было уделено особое внимание, как я ранее уже писал об этом — 80% заказов поступает именно с неё. Здесь нельзя было облажаться, и после запуска новой версии клиентам я продолжал её дорабатывать, изучать поведение покупателей на сайте с помощью метрики.

1
4
5
6
7
8
3
9
10
Мобильная версия

Проблемы с мобильной версией

Несмотря на то, что мобильная версия была очень плоха, покупатели совершали заказы именно через неё, как ранее уже упоминал — 80% покупателей было именно с мобильной версии. На старой версии был плохой визуал (UI) — зачастую можно было встретить выбивающиеся из общего стиля элементы, формы, иконки плохого качества (увеличенные не в своих размерах png) и т.д. 

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

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

Мобильная версия

Изменение основной навигации

Пристальное внимание я уделил юзабилити. В отличии от ПК версии, с мобильных устройств совершать покупки сложнее, размер мобильных устройств — это основной барьер для работы с сайтами. Изменения коснулись, в первую очередь, навигации, было решено избавиться от привычного всем «бургер» меню в пользу нижнего таб бара. Объяснить это можно тем, что верхняя часть дисплея — труднодоступная цель. Сейчас очень любят смартфоны диагональю от 7′ и, соответственно, классический хедер с «бургер» меню становится еще более труднодоступным. Большинство крупных интернет-магазинов, маркет плейсов, инстаграм аккаунтов и т.д уже перешли на нижние панели вкладок. 

Мобильная версия

Каталог и фильтры

На странице с каталогом тоже было не мало проблем с поиском нужного товара. Что касается фильтрации товаров, здесь можно обратиться к исследованиям Nielsen Norman Group, а именно, к статье с фильтрами.

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

Как была решена задача:

  •  Меню с фильтрами я сделал на весь экран (фассетный поиск). Большинство интернет-магазинов оставляют примерно 10% экрана с контентом, но это довольно спорное решение т.к контента толком и не видно, т. к. одновременно показывать покупателю фильтры и товар на мобильной версии невозможно (так же у крупных маркет-плейсов используется именно весь экран);
  • Добавил небольшой поиск для удобства (достаточно начать вводить название характеристики);
  • Отобразил примененные фильтры, добавил возможность убирать один конкретный или сразу очистить все фильтры.
Мобильная версия

Оформление заказа

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

Я, в свою очередь:

  • Убрал лишние отвлекающие элементы со страницы;
  • Добавил возможность выбора предыдущего адреса доставки (при наличии аккаунта покупателя, в личном кабинете сохраняются предыдущие адреса);
  • Разделил выбор службы доставки на: курьер, пвз, почта. На текущее время у магазина имеется 10 способов доставки, и на старой версии дизайна они были расположены все в разнобой. Я их сгруппировал, разделил и упростил выбор нужного способа.

Заключение

На этом кейс с разработкой UX/UI дизайна не закончен. Я по сей день получаю задания от маркетологов, разработчиков и сеошников по улучшению юзабилити, тестирую новый функционал и дорабатываю старый. Хотелось бы, конечно, уместить всю проделанную работу в один кейс, но это получился бы слишком большой том для чтения 📖

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