Разработка интернет-магазина сети «Кораблик»

CX-исследование. Проектирование и дизайн интерфейса. Разработка на 1С-Битрикс Enterprise

Клиент

«Кораблик» — торговая сеть по продаже детских товаров, объединяющая 150 магазинов. На рынке с 2000 года.

Проблема

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

Задача

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

Этапы проекта

Аналитическое исследование

Мы проанализировали целевую аудиторию и покупательское поведение, выявили барьеры и технические проблемы.
Изучение бизнес-процессов

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

Опираясь на выводы аналитического исследования, создали список UI/UX-решений для прототипирования интерфейсов.
Проектирование, дизайн

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

Сайт разработан на системе управления «1С-Битрикс: Enterprise». Верстка была реализована с применением технологии БЭМ и библиотеки jQuery. Gitlab для менеджмента репозиториев с кодом для backend и frontend разработки.

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

Виталий Мазуревич

ведущий UX/UI проектировщик AGIMA

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

Товарные карточки, корзина, листинги и личный кабинет

Аналитическое исследование

Этапы аналитического исследования

Полученные данные помогли нам:

Сегментировать аудиторию и составить портреты покупателей из каждого сегмента;
Выявить ключевые барьеры;
Разработать оптимальные пользовательские сценарии.

Сегментация аудитории

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

Розничные;
Онлайн;
Многодетные.

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

«Розничный покупатель» Татьяна — 35 лет, двое детей. Покупает детские товары в розничном магазине рядом с работой. В интернет-магазине хочет ознакомиться с ассортиментом перед походом в розничный магазин, а также получить информацию об акциях и скидках.

«Онлайн-покупатель» Наталья — 29 лет, ребенок 3 года. Много покупает онлайн, потому что с маленьким ребенком трудно ходить в розничные магазины. В интернет-магазине хочет быстро находить нужные товары: например, строго определенный тип игрушек или мебели, подбирать товары, которые можно забрать самовывозом из ближайшего магазина.

«Многодетный покупатель» Елена — 38 лет, трое детей. Покупает как в интернете, так и в рознице. Покупки частые, нередко — большие заказы на десятки товаров. В интернет-магазине хочет делать крупные заказы питания и подгузников, точно понимая, в какой срок их доставят,экономить время на покупках, быстро подбирать подарки детям друзей.

Барьеры

Главные трудности, с которыми столкнулись пользователи

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

Что мы исправили:

Реорганизовали товарный католог.
Заложили удобную для пользователя структуру страниц.
Устранили технические проблемы.

Реорганизация каталога

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

Оптимальные
UI/UX-решения
для нового сайта

Появился раздел с актуальными акциями и новостями

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

Адаптивная версия сайта