Кейс

Создание обновленного юзабилити сайта для интернет-магазина Happy Baby

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

Проблема

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

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

Задачи

1. Разработка уникального UI/UX дизайна с логической структурой и понятной навигацией.
2. Создание и внедрение функционала интернет-магазина с сохранением уже готовой seo-структуры.
3. Внедрение возможности оформления онлайн-заказа для упрощения взаимодействия пользователя с ресурсом.

Решение

Работа над созданием новой версии сайта предполагала следующие этапы:

Сбор аналитических данных и проведение комплексных исследований для построения карты пользовательского опыта CJM и создания прототипа сайта.
Разработка UI/UX дизайна, который бы «подводил» пользователя к совершению онлайн-покупки. Создание mobile first дизайна, так как 70% аудитории посещают сайт с мобильных устройств.
Подбор цветовых решений и шрифтов.
Программирование.
Интеграция с платёжными системами.
Последующее администрирование и поддержка сайта (по запросу клиента).

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

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

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

Подбор цветовых решений и шрифтов

Цвета:

DD2F44

006daa

DFCFB7

f0f0f0

Разработка UI/UX дизайн-концепции

В процессе разработки дизайн-концепции мы делали акцент именно на юзабилити и построении логической навигации, чтобы сайт работал по принципу привычных всем маркетплейсов. При создании платформы мы добавили:

Корзину
Опцию оформления заказа.
Каталог с различными категориями товаров.
Карточки продукции с описанием характеристик.

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

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

Оптимизация бизнес-процессов

Чтобы пользователь с удобством мог оформлять заказ, мы подключили платёжные системы. В результате, мы сразу получили MVP - минимально жизнеспособный продукт, который сразу можно было использовать. Для удобного администрирования мы провели этап интеграции сайта с Bitrix24. Мы пошли по стратегии наращивания функционала, чтобы отследить поведение ЦА и работу сайта. В последующем также была проведена интеграция с 1С.

Интеграция

Сайт был построен на 1С Битрикс, так как его функционал релевантен запросу клиента. Это позволило быстро реализовать проект, создать удобную админ-панель, точно провести интеграции и сделать готовый проект независимым от разработчика.

Поддержка

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

Результат

Работа над созданием новой версии сайта предполагала следующие этапы:

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

Над проектом работали

Команда

Руководитель

Константин Андреев

Руководитель

Константин Андреев

Руководитель

Константин Андреев

Руководитель

Константин Андреев

Руководитель

Константин Андреев

Руководитель

Константин Андреев