Проектирование и создание сайта 966.ua

О проекте:

966 - это онлайн служба доставки паназиатской кухни. Более 5 лет компания продает суши и лапшу в Днепре, Харькове и Одессе.

Проблема:
В 2018 году 60% трафика на сайт приходило с мобильных устройств, а показатель конверсии с них был низким. Огромное количество пользователей mobile версии жаловались на то, что не могли оформить заказ.

Этапы UX-аудита:

Погружение в бизнес-процессы;
Анализ рынка и конкурентов;
Изучение аналитики;
Анализ путей пользователей;
Изучение обратной связи колл-центра;
Анализ тепловых карт и записей вебвизора;
Выявление проблемных зон сайта.

Основные гипотезы:

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

Выбор концепта

Мы проанализировали и оценили несколько вариантов:

- Создание новой структуры сайта от mobile first;
- Создание мобильной версии сайта;
- Создание приложения на Битрикс;
- Создания отдельных приложений для Android и iOS.

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

Динамические прототипы основных страниц

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

Утвердив ключевые страницы, мы начали проектирование всех страниц, двигаясь от разрешения 320px к 1920px. В итоге мы получили схему прототипов из 238 экранов, 76 страниц и 162 состояния.

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

Как изменился интерфейс интернет-магазина 966.ua

Корзина как сквозной элемент

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

Доступность информации о товаре

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

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

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

Мотивационная система для допродаж

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

Результат

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

Скачать полную версию кейса в PDF:
«Как сделать сайт удобнее для mobile-пользователей: Кейс о сервисе доставке еды 966.ua»