Как данные о пользователях и анализ конкурентов помогают проектировщику: кейс сайта для сети аптек

Специалисты на проекте: Алевтина Бабинская, Игорь Мыслинский, Юрий Бычин, Антон Жилин

Коротко о проекте

Тип проекта: проектирование интерфейса;

Продукт: сайт сети аптек;

Цель: повысить конверсию сайта;

Длительность: 50 рабочих дней;

Особенности проекта: для принятия и обоснования решений в ходе проектирования активно использовались данные веб-аналитики и результаты массового онлайн-опроса пользователей;

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

Методы анализа

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

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

Слайд из отчета по веб-аналитике с анализом одного из путей пользователей

Во-вторых, мы провели массовый онлайн-опрос посетителей сайта. Мы задали им всего 6 вопросов:

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

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

Проблема текущей версии сайта

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

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

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

Фрагмент раскрытого трехуровневого мегаменю на сайте заказчика

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

Новый сценарий покупки

Опираясь на результаты опроса, мы определили новый сценарий покупки. Мы выяснили, что на самом деле решающий фактор, по которому посетители сайта выбирают аптеку — вовсе не удобное расположение. Этот ответ был лишь третьим по популярности. А два самых популярных ответа — это «минимальная цена» и «наличие всех позиций в заказе».

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

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

Типичные элементы управления для выбора города и магазина в шапке сайта интернет-магазина

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

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

Решение с размещением ссылок на подкатегории или фильтров в левой колонке — стандартное решение для индустрии

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

Новая карточка товара

Новая корзина

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

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

Часть макета корзины

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

Пример похожего интерфейса: выбор пункта самовывоза на сайте OZON

Новые функции

Наш опрос показал, что больше половины всех посетителей сайта покупают лекарства с определенной периодичностью — это те люди, которые проходят какие-либо курсы лечения, имеют хронические заболевания и т. п.

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

Сообщение, которое мы предлагаем показывать пользователю, если не все товары в его корзине можно доставить курьером

Заключение

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

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

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

Автор текста — Мария Новикова.