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

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

Проблема клиента 

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

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

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

UX-аудит и выявление ошибок

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

Такая проверка юзабилити состояла из следующих этапов:

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

В результате мы составили список основных проблем и сформировали гипотезы:

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

Все эти и другие выдвинутые нами гипотезы мы решили проверить с помощью  тестирования на фокус-группе.

Составляем портрет целевой аудитории

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

Исходя из данных аналитики, колл-центра и интервью с представителем бизнеса, в 70% случаев это были девушки в возрасте 22-28 лет, которые делают заказ с мобильных устройств. Чаще всего это пользователи iPhone. При этом в покупку входит 1 суши-сет и напиток.

Пользовательское тестирование 

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

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

Краткое описание одного из сценариев выглядело так:

Вы возвращаетесь домой после работы. Пятница. Дома нечего есть. Вы решаете заказать еду с доставкой. 966 вам рекомендовали на работе. 

Задание 1. Выбрать любой сет и любой напиток

Задание 2. Найти условия доставки и оплаты 

Задание 3. Заказать выбранную еду

Задание 4. Найти номер телефона, чтобы позвонить в службу самостоятельно

Результат пользовательского тестирования:

• 75% пользователей не смогли найти меню с первой попытки. 
• 50% пользователей не нашли нужной информации о товаре - вес и состав сета. А это ключевые факторы, которые влияют на добавление товара в корзину.
• 80% фокус-группы не поняли всех функций сайта, в частности, что такое расширенный заказ и как к нему перейти.
• 62% опрошенных не знали, что делать после того, как добавили товар в корзину, поэтому не смогли самостоятельно завершить заказ.

Кроме того, что мы подтвердили большинство гипотез, мы выявили ряд инсайтов о целевой аудитории, например:

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

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

Определяемся с концептом

Теперь нам нужно было выбрать концепт, который бы смог покрыть все обнаруженные проблемы. Мы проанализировали и оценили несколько вариантов:

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

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

Создаем динамический прототип основных страниц  

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

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

Тестируем прототип на фокус-группе

Мы провели новое тестирование на фокус-группе, которая подходила под портрет целевой аудитории.

Тестирование показало положительные результаты:

• Подтвердилось удобство навигации,
• Пользователи отметили простоту оформление заказа,
• Вся необходимая информация для принятия решения о покупке стала доступной. 

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

Создаем прототипы всех страниц сайта

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

В итоге мы получили схему прототипов из 238 экранов, 76 страниц и 162 состояния.

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

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

1. Нативная навигация iOS в меню

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

Кнопка “Меню” не была закреплена и посетителю приходилось скроллить весь ассортимент раздела, чтобы вернуться к шапке экрана. 

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

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

В десктопной версии старого сайта ссылка на “Корзину” располагалась в правом верхнем углу и отображала только количество добавленных товаров и общую стоимость.

Такое решение имело негативный feedback, так не отображало, какой конкретно товар добавили в корзину и что с ним делать дальше. 

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

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

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

В новой версии эта проблема была решена, корзина стала доступной в нижнем фиксированном меню.

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

В старой версии интернет-магазина 966.com.ua информация о весе и количестве кусочков в сетах была вынесена в ховер. Из-за этого поступало много жалоб от пользователей мобильных устройств, что данная информация отсутствует на сайте в принципе, так как ховер в мобильной версии сайта не выводится.

Поэтому в новом варианте мы спроектировали карточку товара так, чтобы вся информация о продукте была доступна.

Количество товара и его вес - это ключевые характеристики, на которые обращает внимание пользователь при заказе еды.

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

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

До редизайна форма оформления заказа содержала две вкладки: быстрый заказ и расширенная форма заказа. Как показал UX-аудит и пользовательское тестирование, пользователи не понимали разницу между этими опциями, т.к. изменения при клике проходили в нижней части экрана. 

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

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

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

В старой версии сайта не использовались инструменты cross-sell. Мы поработали это направление и сделали процесс добавления дополнительных товаров на новом сайте простым, понятным и вовлекающим.

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

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

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

Учитывая инсайты, которые мы получили в ходе пользовательского тестирования, мы также добавили  cross-sell элементы: предложили пользователям дополнить заказ сетом из набора, напитком или десертом.

6. Личный кабинет

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

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

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

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

Результат проектирования от mobile-first

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

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

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

‍

‍