Как сделать сайт удобнее для mobile-пользователей: кейс о сервисе доставки еды 966.ua
- Заказчик
- 966.ua — это онлайн служба доставки паназиатской кухни. Более пяти лет компания продаёт суши и лапшу в Днепре, Харькове и Одессе.
- Задача
- Сделать комфортным процесс оформления покупки и доставки еды для пользователей мобильных устройств.
В 2018 году 60% трафика на сайт приходило с мобильных устройств, а показатель конверсии с них был низким. Огромное количество пользователей мобильной версии жаловались на то, что не могли оформить заказ.
Поэтому мы начали с аудита.
UX-аудит и выявление ошибок
Мы начали свою работу с UX-аудита — комплексного анализа интерфейса на предмет ошибок.
Такая проверка юзабилити состояла из следующих этапов:
- Погружение в бизнес-процессы.
- Анализ рынка и конкурентов.
- Изучение аналитики.
- Анализ путей пользователей.
- Изучение обратной связи колл-центра.
- Анализ тепловых карт и записей вебвизора.
- Выявление проблемных зон сайта.
В результате мы составили список основных проблем и сформировали гипотезы:
- Неудобное расположение меню, которое, согласно записям вебвизора, пользователям было сложно найти.
- Высокий показатель отказов со страницы выдачи. Причиной могла быть неудобная система фильтров для подбора товара.
- Высокая нагрузка на колл-центр из-за отсутствия всей необходимой информации на сайте для осуществления заказа.
- Критические ошибки на странице чекаута, которые не позволяли завершить покупку через сайт.
Все эти и другие выдвинутые нами гипотезы мы решили проверить с помощью тестирования на фокус-группе.
Составляем портрет целевой аудитории
Перед тем как собрать фокус-группу, мы составили максимально детальный портрет целевой аудитории.
Исходя из данных аналитики, колл-центра и интервью с представителем бизнеса, в 70% случаев это были девушки в возрасте 22–28 лет, которые делают заказ с мобильных устройств. Чаще всего это пользователи iPhone. При этом в покупку входит один суши-сет и напиток.
Пользовательское тестирование
Согласно портрету целевой аудитории, мы собрали фокус-группу и провели модерируемое пользовательское тестирование.
Мы подготовили сценарий и разделили его на отдельные задания, чтобы проверить каждый из ключевых шагов в воронке продаж.
Краткое описание одного из сценариев выглядело так:
Вы возвращаетесь домой после работы. Пятница. Дома нечего есть. Вы решаете заказать еду с доставкой. 966.ua вам рекомендовали на работе.
Задание 1. Выбрать любой сет и любой напиток.
Задание 2. Найти условия доставки и оплаты.
Задание 3. Заказать выбранную еду.
Задание 4. Найти номер телефона, чтобы позвонить в службу самостоятельно.
Результат пользовательского тестирования:
- 75% пользователей не смогли найти меню с первой попытки.
- 50% пользователей не нашли нужной информации о товаре — вес и состав сета. А это ключевые факторы, которые влияют на добавление товара в корзину.
- 80% фокус-группы не поняли всех функций сайта — в частности, что такое расширенный заказ и как к нему перейти.
- 62% опрошенных не знали, что делать после того, как добавили товар в корзину, поэтому не смогли самостоятельно завершить заказ.
Кроме того, что мы подтвердили большинство гипотез, мы выявили ряд инсайтов о целевой аудитории, например:
- Пользователи при покупке сета часто сразу добавляют в корзину напиток.
- Пользователям неудобно проверять количество бонусов, которые они накопили. Им приходится звонить в колл-центр.
Некоторые пользователи к заказанному сету хотят добавить дополнительные роллы из сета, но не могут их быстро найти и добавить. Эти выводы мы учли при разработке нового интерфейса.
Определяемся с концептом
Теперь нам нужно было выбрать концепт, который бы смог покрыть все обнаруженные проблемы. Мы проанализировали и оценили несколько вариантов:
- Создание новой структуры сайта от Mobile first.
- Создание мобильной версии сайта.
- Создание приложения на «Битрикс».
- Создания отдельных приложений для Android и iOS.
В результате мы остановились на решении Mobile first. При таком подходе разработка сайта ведется от мобильной версии к десктопной. Это позволяет сэкономить бюджет на разработке, так как вместо того, чтобы отдельно создавать приложение и отдельно обновлять веб-версию, можно реализовать Mobile first веб-версию.
Создаем динамический прототип основных страниц
С учетом всех выявленных проблем, подтвержденных гипотез и комментариев целевой аудитории мы подготовили прототипы меню и основных страниц: главной, карточки товара, оформления заказа.
Эти прототипы мы залили в Invision и перелинковали, чтобы можно было провести тестирование на фокус-группе и проверить, решили ли мы задачу пользователей.
Тестируем прототип на фокус-группе
Мы провели новое тестирование на фокус-группе, которая подходила под портрет целевой аудитории.
Тестирование показало положительные результаты:
- Подтвердилось удобство навигации.
- Пользователи отметили простоту оформление заказа.
- Вся необходимая информация для принятия решения о покупке стала доступной.
После повторного тестирования мы презентовали заказчику проверенный на целевой аудитории концепт, основанный на показателях аналитики и данных UX-аудита.
Создаем прототипы всех страниц сайта
Утвердив ключевые страницы, мы начали проектирование всех страниц, двигаясь от разрешения 320 px к 1920 px.
В итоге мы получили схему прототипов из 238 экранов, 76 страниц и 162 состояния.
Система прототипов сайта интернет-магазина 966.ua
Благодаря тому, что мы провели тестирование на пользователях и собрали все необходимые инсайты, это помогло сэкономить время UX-проектировщика по работе над проектом. У нас было четкое понимание, что нужно бизнесу, как построить навигацию и на что стоит сделать упор при каждом типе устройств. Нам удалось сократить время на разработку прототипов на 40%.
Как изменился интерфейс интернет-магазина 966.ua
1. Нативная навигация iOS в меню
В прежней версии сайта пользователям было сложно найти меню, так как само меню путали с популярными категориями, вынесенными на первый экран. При скролле меню-бургер пропадало из зоны видимости. Это было критично, так как у пользователя пропадала возможность быстро переходить в корзину и перемещаться из одной категории в другую.
Кнопка «Меню» не была закреплена, и посетителю приходилось скроллить весь ассортимент раздела, чтобы вернуться к шапке экрана.
Ранее в мобильной версии доступ к меню был возможен только в шапке, было не очевидно, что это было меню
По данным аналитики, целевая аудитория сайта использовала преимущественно iPhone, поэтому мы сделали упор на нативную навигацию iOS, расположив пункты меню внизу. Мы учли, что пользователь будет часто обращаться в меню, переходить из категории в категории и добавлять товары, а перед принятием решения захочет посмотреть количество бонусов на счету, чтобы рассчитаться ими. Поэтому нижнее фиксированное расположение пунктов меню должно было стать наиболее удобным вариантом.
Иконки внизу позволяют быстро переходить в нужный раздел
2. Корзина как сквозной элемент
В десктопной версии старого сайта ссылка на «Корзину» располагалась в правом верхнем углу и отображала только количество добавленных товаров и общую стоимость.
Кнопка перехода в корзину в правом верхнем углу старого сайта службы доставки 966.com.ua
Такое решение имело негативную обратную связь, так как не отображало, какой конкретно товар добавили в корзину и что с ним делать дальше.
В новой версии сайта мы сделали сквозную корзину и расположили ее в правой части экрана. Мы отказались от отдельной страницы корзины, сократив глубину воронки. Также она стала удобной для коллективных покупок, так как наполнение корзины сразу наглядно видно.
Сквозная корзина в правой части экрана новой версии интернет-магазина 966.ua
Это упростило доступ к оформлению заказа и позволило пользователю в любое время просматривать свой список покупок без перехода на отдельную страницу. То есть пользователь получил полноценный блок для управления своим заказом и подсказку о том, что делать дальше.
В мобильной версии старого сайта после добавления товара в корзину было не очевидно, что товар добавлен, так как все изменения происходили вне зоны видимости экрана. Пользователи не понимали, как перейти в чекаут, так как кнопка оформления заказа оставалась на первом развороте мобильного телефона.
В новой версии эта проблема была решена, корзина стала доступной в нижнем фиксированном меню.
Каждое добавление товара в корзину отражается в иконке меню.
3. Доступность информации о товаре
В старой версии интернет-магазина 966.com.ua информация о весе и количестве кусочков в сетах была вынесена в ховер. Из-за этого поступало много жалоб от пользователей мобильных устройств, что данная информация отсутствует на сайте в принципе, так как ховер в мобильной версии сайта не выводится.
Информация о весе сета и количестве кусочков появлялась при наведении курсора на карточку товара в выдаче
Поэтому в новом варианте мы спроектировали карточку товара так, чтобы вся информация о продукте была доступна.
В новой версии интернет-магазина мы вывели информацию о весе сета и количестве кусочков в карточке товара
Количество товара и его вес — это ключевые характеристики, на которые обращает внимание пользователь при заказе еды.
Снабдив его всей необходимой информацией для принятия решения, мы помогаем ему с выбором и сокращаем путь к покупке.
4. Оформление заказа
До редизайна форма оформления заказа содержала две вкладки: быстрый заказ и расширенная форма заказа. Как показал UX-аудит и пользовательское тестирование, пользователи не понимали разницу между этими опциями, так как изменения при клике проходили в нижней части экрана.
Переключение между формами происходит вне зоны видимости экрана
Кроме того, необходимость заполнения большого количества полей было неудобным. Также отсутствовало поле для ввода промокода.
Новый дизайн страницы оформления заказа предусматривает заполнение малой формы с ключевой информацией: телефон, имя, способ оплаты, промокод. Остальные данные можно сообщить оператору по телефону.
Либо покупатель может продолжить заполнение подробной формы с указанием адреса, времени доставки, количества приборов, чтобы сэкономить время на уточнении этой информации в разговоре с колл-центром.
Новый дизайн быстрой и подробной формы оформления заказа
5. Мотивационная система для допродаж
В старой версии сайта не использовались инструменты cross-sell. Мы поработали это направление и сделали процесс добавления дополнительных товаров на новом сайте простым, понятным и вовлекающим.
Мы продумали мотивационную систему в несколько шагов с элементами геймификации. Заполняя шкалу можно было получить подарок: от бесплатной доставки до дополнительных роллов к заказу.
Для этого в правом сквозном блоке корзины, кроме добавленных пользователем товаров, мы вывели информацию о том, какой подарок ждет клиента за выбранный заказ, а также какую выгоду он получит, если добавит еще товар на определенную сумму.
Использование системы мотивации в корзине
Таким образом, мы получили мотивационную систему для увеличения среднего чека.
Учитывая инсайты, которые мы получили в ходе пользовательского тестирования, мы также добавили cross-sell элементы: предложили пользователям дополнить заказ сетом из набора, напитком или десертом.
6. Личный кабинет
Ранее личного кабинета на сайте не существовало, что вызывало у клиентов множество вопросов по поводу количества накопленных бонусов, возможности их использования.
Часто покупая одно и то же, пользователи повторяют заказ через кабинет. Поэтому в процессе редизайна мы снабдили пользователя личным пространством с возможностью отслеживания статуса заказов, количества бонусов, наличия новых промокодов, истории заказов, любой из которых можно повторить в один клик.
Если пользователь заполняет профиль личной информацией, например, дата рождения, ему начисляются дополнительные бонусы и скидки. Также можно составить список адресов доставки, чтобы быстрее в будущем оформлять заказы.
Прототип страницы личного кабинета
Личный кабинет стал обязательным атрибутом любого интернет-магазина, так как эта функциональность ускоряет и упрощает процесс оформления заказа и демонстрирует заботу о пользователе.
Результат проектирования от mobile-first
Проектирование интернет-магазина от Mobile first — это хороший вариант, если преобладает целевая аудитория с мобильных устройств, особенно для служб доставки, где покупки со смартфона растут с каждым годом. Такое решение позволяет сократить время на проектировании и разработке, так как создается один сайт, а не отдельно приложение или мобильная версия.
UX-аудит перед началом работ и тестирование концепта на пользователях также могут сэкономить ваш бюджет на этапе проектирования интерфейса, так как предоставляют исчерпывающие данные о продукте и его использовании.
Все эти взаимосвязанные процессы помогли нам создать удобный интернет-магазин для пользователей мобильных и десктопных устройств и заложить хороший фундамент для его дальнейшего развития.