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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Каждое добавление товара в корзину отражается в иконке меню.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#юзабилити