Не убивать, а лечить! Дизайн аудит пошагово

Всем привет! Я хочу поделиться опытом проведения UI/UX аудита на примере реального кейса.

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

1. Исследования и погружение в бизнес
2. Анализ и поиск проблем
3. Рекомендации по результатам исследований
4. Составление отчета

Получаем план аудита. А теперь подробнее о каждом пункте.

1. Исследование и погружение в бизнес

На этапе погружения нужно получить необходимую информацию от владельца бизнеса:

• общую информацию о компании
• о конкурентах на рынке
• какие цели хочет достигнуть бизнес
• какие задачи хочет решить

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

В моём случае клиент составил описание компании (в формате вопрос/ответ) + дал доступ к аналитике сайта. Я обращалась к нему только за небольшими уточнениями. Например, узнала, что для рекламы они используют листовки и это помогло мне составить CJM.

Описание от клиента довольно объемное, поэтому вкратце:

Проект квартира 33 это интернет магазин в отдельном домашнем регионе (Екатеринбурге). Основной сайт сети магазинов компании — 33 комода. Нововведения сначала тестируются на сайте Квартиры 33, затем переносятся на сайт 33 комода.

Из социальных сетей есть аккаунты в инстаграме и вконтакте.

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

2. Анализ и поиск проблем

На этом этапе информация систематизируется и анализируется.
Я составила для себя план:

1. Упорядочить информацию от клиента
2. Провести анализ конкурентов: составить таблицу, сравнить параметры, влияющие на достигаемые цели в проекте
3. Поработать с аналитикой
4. Составить CJM
5. Определить гипотезы для А/Б тестирования (если на сайте достаточно трафика для его проведения)
6. Проверить оптимизацию страницы с помощью Google mobile friendly
7. Проверить скорость загрузки сайта с помощью Google developers
8. Проверить сайт на Accessibility

Канвас Остервальдера

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

Анализ конкурентов

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

P.S. Конкурентов я обычно сравниваю в гугл таблицах, потому что это быстро и привычно для клиента. Оригинал по ссылке.

Аналитика

Для анализа я брала данные посетителей, которые заказали мебель и сравнивала их с общим числом посещений. Это помогает сначала узнать какие факторы определяют успех стратегии, а потом охватить больше клиентов. За рассматриваемый период взяла квартал с 20 января по 19 апреля 2020.

Сегментирование по возрасту

Отсюда видно, что больше всего визитов на страницу совершают люди 55+, но покупки они совершают практически реже всех остальных групп. Самые активные покупатели в возрасте 35–44 лет, затем 25–34. Эта информация поможет определить ЦА.

Сегментирование по полу

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

Сегментирование по географии

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

Сегментирование по интересам

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

Сегментирование по типу и производителю устройства

Большинство пользователей заходят и совершают заказ с ПК, но 39.4% посетителей пользуются мобильными устройствами. Поэтому стоит оптимизировать сайт для мобильных устройств.

Сегментирование по источнику трафика

Большее количество переходов мы получаем по рекламе (конверсия 36.5%), но конверсия лучше у переходов через поисковые системы — 48.8%.

Customer Journey Map — CJM

CJM — универсальный инструмент тестирования как прототипов, так и готовых сайтов (приложений). Очень удобен для выявления узких мест во взаимодействии с продуктом. А еще он помогает генерировать идеи по улучшению опыта пользователя. Для построения карты взаимодействия уже есть некоторые начальные данные:

• изучена специфика бизнеса
• составлена таблица конкурентов
• определена целевая аудитория

Осталось определить основную персону. Я составила ее по информации от клиента и данным Яндекс.Метрики.

CJM я тоже составляю в гугл таблицах.

Для этого случая карта получилась очень большой. Ее можно увидеть по ссылке.

А/Б тестирование

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

Для проведения полноценного тестирования у меня не было времени, поэтому я составила гипотезы и подготовила данные для его проведения. Сделать это можно в Google Optimize.

Показатель для улучшения — процент оформленных заказов. Сейчас его конверсия — 0.66% за месяц (26 марта — 25 апреля 2020).

Я составила гипотезы по результатам анализа конкурентов и CJM. Расположила их в порядке тестирования.

Гипотеза 1 Разместить информацию о работе магазина в пандемию на видном месте.

Исходная конверсия — 0,66%
Желаемая конверсия — 0,957%
Минимально видимый эффект — 45%
Уникальных посетителей в каждую ветку — 12422
Длительность теста — 30 дней

Гипотеза 2 Разместить в шапке ссылки на доставку и оплату.

Исходная конверсия — 0,66%
Желаемая конверсия — 0,957%
Минимально видимый эффект — 45%
Уникальных посетителей в каждую ветку — 12422
Длительность теста — 30 дней

Гипотеза 3 Выделить пункт Акции в верхнем меню.

Исходная конверсия — 0,66%
Желаемая конверсия — 0,957%
Минимально видимый эффект — 40%
Уникальных посетителей в каждую ветку — 15618
Длительность теста — 30 дней

Гипотеза 4 Расположить на главной странице баннер со специальным предложением и CTA кнопкой.

Исходная конверсия — 0,66%
Желаемая конверсия — 0,957%
Минимально видимый эффект — 37%
Уникальных посетителей в каждую ветку — 18181
Длительность теста — 30 дней

Гипотеза 5 В меню добавить спецпредложения.

Исходная конверсия — 0,66%
Желаемая конверсия — 0,957%
Минимально видимый эффект — 37%
Уникальных посетителей в каждую ветку — 18181
Длительность теста — 30 дней

Mobile test

Google mobile friendly

Первую проверку я выполняла с помощью Google mobile friendly и получила такой результат:

Google developers

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

Этот сервис дает подробные и понятные рекомендации по оптимизации, которые помогут ускорить загрузку страницы. Все рекомендации я подробно расписываю на 3 этапе аудита.

Accessibility test

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

Ошибок на странице немного:

В таблице я разобрала каким образом и какой член команды может их исправить:

3. Рекомендации по результатам исследований

После проведенных исследований составляем список рекомендаций.

По таблице конкурентов

1. Магазин слабо представлен в социальных сетях. А это напрямую связано с онлайн продажами. Для начала рекомендую разместить рекламу в инстаграм. Он подходит под ЦА по интересам и возрасту.
2. Желательно добавить хотя бы пару альтернативных способов связи с клиентами.

Исследования CJM

1. На листовках указывать, что есть доставка и ее условия. Также возможно размещать QR код для удобства перехода на сайт. Перечислить кратко какие виды мебели представлены в магазине, если там этой информации нет.
2. На главной странице разграничить визуально спецпредложения и новинки. Информацию о рекламируемом товаре размещать не на карточке, а под ней, чтобы товар можно было легко рассмотреть. Информацию о том, что есть доставка разместить в шапке сайта.
3. В каталоге заменить сортировку по наличию на чекбокс “в наличии”. Этот элемент управления больше подходит по смыслу. Добавить сортировку “по новизне”. Выводить количество товаров, которые соответствуют критериям фильтра. Настроить независимую работу фильтра и сортировок.
4. На странице товара размещать информацию по наличию.
5. Корзина. Сейчас не понятно зачем нужна регистрация на сайте. Ее можно использовать для системы лояльности. В таком случае об ее условиях сообщать на главной странице и рядом с формой регистрации.
6. В сообщении о том, что заказ принят в работу лучше указать еще дальнейшее действие, например: “С вами свяжется наш специалист в течении нескольких часов” или “завтра 09.00–17.00”, если заказ оформлен в нерабочее время.
7. Для спокойствия клиентов лучше высылать на почту письмо с деталями заказа.

A/Б тестирование и проверка гипотез

Я составила гипотезы по результатам анализа конкурентов и CJM. Перед внесением изменений на сайт эти гипотезы можно проверить тестированием.

Проверка на оптимизацию

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

1. Оптимизировать изображения. Сжать их размер и использовать современные форматы. Например, JPEG 2000, JPEG XR и WebP обеспечивают эффективное сжатие по сравнению с PNG или JPEG, поэтому такие изображения загружаются быстрее и потребляют меньше трафика.
2. Скрытые изображения. Чтобы уменьшить время загрузки для взаимодействия, настроить отложенную загрузку скрытых изображений. Тогда основные ресурсы сайта будут загружаться в первую очередь.
3. Оптимизировать код. Чтобы сократить расход трафика, удалите ненужные правила из таблиц стилей и отложите загрузку кода CSS, который не используется в верхней части страницы. Уменьшив файлы JavaScript, вы сократите объем полезной нагрузки и время анализа скриптов.
4. Пересмотреть функционал сторонних сервисов. Сторонний код может сильно замедлить загрузку страниц сайта. Рекомендую использовать только необходимые сторонние ресурсы и сделать так, чтобы они загружались в последнюю очередь.
5. Убедиться, что файл robots.txt не блокирует роботу Googlebot, не запрещает доступ к важным ресурсам. Если эти ресурсы находятся на другом домене, то можно не обращать внимания, так работает инструмент.

Проверка на доступность

Для большего охвата аудитории учесть улучшения по Accessibility.

Дополнительно

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

4. Составление отчета

Дальше делаем обратное — выводы подкрепляем соответствующим доказательством из исследований (с таблицами и иллюстрациями). Грубо говоря мы начинаем с выводов, группируем их. После каждой группы выводов (рекомендаций) объясняем почему это нужно внедрить с помощью результатов исследований. Этот этап я не буду расписывать подробно, потому что он повторяет предыдущие. Клиенту отдаём именно результат 4 этапа.

Надеюсь, моя статья была вам полезна ❤