Всем привет! Сегодня речь пойдет об интересном кейсе, когда мы, используя только UX-исследования и BA-ориентированный подход, смогли улучшить оборот проекта на 75% всего за 30 дней. Вас ждет интереснейший лонгрид, запаситесь поп-корном )
Предисловие
Что такое UX в полном его понимании? Это и юзабилити-тест, и user-flow, и 100500 других исследований под общей методологией пользовательского опыта.
Самые посещаемые веб-сайты в мире (Amazon, Aliexpress, Youtube, Wikipedia и тд) имеют превосходный UX, но устаревший дизайн (не претендую на истину - считаем что пользователь сам решает, совершая конверсию; все остальное субъективно), о чем еще говорила Heidi Toussaint, менеджер команды Rapid Research в Google, в 2019 году - "дизайн больше не решает проблемы пользователя в полной мере".
Дизайн больше не решает проблемы пользователя в полной мере
Heidi Toussaint
Менеджер команды Rapid Research UX
Мы используем UX/BA для решения бизнес-задач в различных проектах и получаем быстрые результаты почти сразу.
Коротко о нас - евангелисты UX-ориентированного подхода, когда в центре цифрового бизнеса стоит клиент (считай интернет-пользователь) привязанный к целевому действию, поэтому:
Все процессы анализируются и выстраиваются с позиции пользователя;
Ключевые метрики проекта определяются паттернами поведения;
Положительный эмоциональный отклик важен на каждом экране контакта
О проекте
Сам проект мы не сможем назвать (NDA), но рассказать что конкретно делали, привести статистические данные до/после - запросто.
Отрасль проекта - e-commerce, целевая аудитория - м/ж 21-50 лет, регион - СНГ.
Кейс показывает насколько быстро можно улучшить результаты без космических расходов, опираясь на цифры и твердую методологию.
В конце статьи мы укажем весь бюджет работ по UX/BA исследованиям.
Входные данные (до работ и после наблюдается одинаковая динамика трафика с погрешностью в 10%):
Среднесуточная посещаемость 1500 /чел
Количество переходов по SEO - 25%
Количество переходов по рекламе (СРС, Я.Директ)- 35%
Все остальное - прямые переходы/из закладок
План работ
Технический анализ
Тесты по методологии "Бритвы Оккама"
Приоритизация элементов и контента
Анализ Я.Метрики и Вебвизора
1. Технический анализ
Технический анализ нужен для выявления проблем на клиент-серверном уровне, ухудшающее взаимодействие с сайтом. Еще в 2016 году аналитики Google заявили, что с каждой 0,5 сек дополнительного ожидания, значение конверсии падает в среднем на 10-15%В ходе исследований Google рекомендует время полной загрузки сайта в пределах 1-2 секунды. Разберемся с этим подробнее.
Google рекомендует время полной загрузки сайта в пределах 1-2 секунды
На скорость загрузки сайта влияют 5 значений:
скорость запросов клиент-сервер- количество запросов клиент-сервер (css|js|jpeg|etc..)
размер страницы
количество/нагруженность JS/Jquery
время ожидания сервера до первой отрисовки страницы
1.1. Скорость и количество запросов клиент-сервер
В нашем кейсе, количество запросов при каждой загрузке страницы колебалось от 220 до 290 (скрин), поэтому перед нами стояли две серьезные задачи - оптимизировать способ асинхронной/многопотоковой загрузки файлов сайта клиентом, при этом сократив их количество до критического минимума.
Первое, на что мы обратили внимание - отсутствие на сервере включенного алгоритма сжатия Brotli (эффективнее Gzip/Deflate на ~30%).
Далее - на мобильном браузере каждый запрос при загрузке выполнялся поочередно из-за устаревшего протокола HTTP/1.0 на уровне сервера, было решено перейти на HTTP/2.0, дабы сделать загрузку всех ресурсов многопотоковой (чем ускорили загрузку на мобильных телефонах на 70%).
Кеширование на базе memcache + прописанные в htaccess правила для файлов jpg|js|css|png
Убрали версии css/js файлов в коде (напр, /main.css?version=3.2) - чем сэкономили совокупно еще 0.7 - 1 сек
22 css файла начали загружать с помощью скрипта асинхронной загрузки
Мелкие картинки переделали в спрайты для более быстрой загрузки
1.2. Размер страницы
Изначально, размер главной страницы составлял 3.5 Мб, каталог - 3.1 Мб, страница товара - 2.7 Мб.
В нашем случае, 60% объема занимали картинки. Сначала мы сжали все картинки на сервере с расширением jpg/png с помощью утилиты FileOptimizer без потери качества, сократив общий размер на 34%.
После этого, сконвертировали все изображения в Webp - минифицированный и продвинутый веб-формат картинок, рекомендуемый Google, чем сократили размер еще на 52%.
Как итог - размер главной составил 1.1 Мб, каталог - 0.9 Мб, страница товара 1.3 Мб.
С этим шагом справились успешно
1.3. Количество JS/Jquery
Ко всем скриптам ставили атрибут async, для важных в последовательности - defer. Провели инспекцию, и из 44 файлов js, отключили 28 за ненадобностью, чем значительно облегчили время загрузки и интерпретации
1.4. Время ожидания сервера до первой отрисовки
Вот здесь сложнее - причин может быть много и не все очевидные. В нашем случае помогла дефрагментация БД в MySQL и проставка индексов где это возможно. Время ожидания сократилось от 1.4 с до 600-700мс
Какие результаты получили после технического анализа?
Время загрузки сайта сократилось с 4...6 сек до 1.2-1.8 сек.
Скорость отклика страниц и взаимодействия с сайтом значительно улучшилась
2. Тесты по методологии "Бритвы Оккама"
Методологический принцип "Бритвы Оккама" гласит - "Не следует множить сущее без необходимости" или "Многообразие не следует предлагать без необходимости".
На этом принципе в IT строятся множество предположений для создания конверсионных интерфейсов: UX буквально построен на этом.
В нашем случае, принцип "Бритвы Оккама" будет звучать так - "Интерфейс должен быть упрощен и облегчен до максимума, для удобства совершения конверсии".
Что было сделано:
Небольшим внешним изменениям (без функциональной части) подверглись страницы каталога, товара, корзины.
Поменяли шрифт на Roboto (более читаемый в нашем случае), контентную часть шрифта увеличили с 12рх до 14рх
Поменяли акценты на элементах - цену товара и наименование на главной и в каталоге сделали "жирным" шрифтом- уменьшили вертикальные отступы между элементами (с 30рх до 15рх)
Изменили отображение всех кнопок в единый стиль + увеличили шрифт с 14рх до 16рх
изменили отображение опций товара в корзине - показываются только "активные", остальные - скрываются. Таким образом, при покупке 3+ товаров с множеством опций все выглядит компактно и легко
Результаты. Средний недельный процент отказов упал с 22,8% до 17..18%, увеличилось среднее время на сайте с 3:02 до 3:30, глубина просмотра увеличилась с 4,21 до 5,22
3. Приоритизация контента и элементов
На странице товара все элементы выстроили в порядке важности по приоритету и статистики запрашиваемости (использовали информацию с внутренней статистики Яндекс.Метрика, Wordstat, Hotjar, Вебвизор).В итоге, в области одного экрана мы оставили только необходимое, в порядке приоритета и прямой логической связи с остальными объектами.
Зрительно выровняли по модульным сеткам все элементы, как на ПК, так и на мобильной версии.
Провели анализ конкурентов по прямой и смежным нишам
Результаты. Увеличилась конверсия с 0.8% до 1.3%
4. Анализ Я.Метрики и Вебвизора
Провели анализ всех внутренних страниц по четырем показателям - отказы, глубина просмотра, время на сайте, тип источника. Были выявлены проблемные страницы на разных типах устройств ( отказы более 30%, глубина менее 3 страниц с момента входа), по ним была проведена еще раз работа из раздела 2 (Тесты по методологии Бритвы Оккама)
Вебвизор выявил на экранах мобильных телефонов в диапазоне ширины от 300 до 350рх ряд проблем с версткой.
Кросс-бразуерный тест также выявил небольшой ряд ошибок отображения и навигации по сайту.
Результаты. На мобильных телефонах на 30% страниц уменьшились отказы с 40% до 18%. Увеличилась активность перехода на страницы товара из каталога (благодаря увеличению скорости открытия страниц)
Общие выводы и результаты
Статистика по Я.Метрике через месяц после внедрения рекомендаций:
Общий оборот интернет-магазина вырос с 2 млн до 3.5 млн рублей уже на следующий месяц после всех работ;
Средний чек вырос с 5000 до 8400 руб;
Показатели отказов с 21,7% упали до 19,8% и держатся в таком диапазоне до сих пор;
Глубина просмотров увеличилась с 4.6 до 5.2-5.5 и держится до сих пор;
Количество трафика и их разбивка по источникам осталась такой же (с погрешностью в 2-3%)
На ноябрь 2021 оборот составил 3 млн, что является устоявшимся показателем.
Думаю, при бюджете работ в 75 тыс рублей, получить такой результат - круто!
P.S. Также мы анализировали соответствие рекламных объявлений (текст + креатив) целевой странице, основной посыл, динамику интереса и отклика на новые креативы, но по итогу, изменения в рекламный канал вносились после основных результатов. Об этом поговорим отдельно в следующих статьях (тема большая и обширная, для данного кейса будет оффтоп).
Вопросы?
Наши контакты:
Сайт: ux10.media
Telegram: @ux10media