Кейс: увеличиваем оборот интернет-магазина на 75% (~1,5 млн рублей) за месяц с помощью UX/BA

Всем привет! Сегодня речь пойдет об интересном кейсе, когда мы, используя только 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-ориентированного подхода, когда в центре цифрового бизнеса стоит клиент (считай интернет-пользователь) привязанный к целевому действию, поэтому:

1. Все процессы анализируются и выстраиваются с позиции пользователя;

2. Ключевые метрики проекта определяются паттернами поведения;

3. Положительный эмоциональный отклик важен на каждом экране контакта

О проекте

Сам проект мы не сможем назвать (NDA), но рассказать что конкретно делали, привести статистические данные до/после — запросто.

Отрасль проекта — e-commerce, целевая аудитория — м/ж 21-50 лет, регион — СНГ.

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

В конце статьи мы укажем весь бюджет работ по UX/BA исследованиям.

Входные данные (до работ и после наблюдается одинаковая динамика трафика с погрешностью в 10%):

• Среднесуточная посещаемость 1500 /чел

• Количество переходов по SEO — 25%

• Количество переходов по рекламе (СРС, Я.Директ)- 35%

• Все остальное — прямые переходы/из закладок

План работ

1. Технический анализ

2. Тесты по методологии «Бритвы Оккама»

3. Приоритизация элементов и контента

4. Анализ Я.Метрики и Вебвизора

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

• Мелкие картинки переделали в спрайты для более быстрой загрузки

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. Также мы анализировали соответствие рекламных объявлений (текст + креатив) целевой странице, основной посыл, динамику интереса и отклика на новые креативы, но по итогу, изменения в рекламный канал вносились после основных результатов. Об этом поговорим отдельно в следующих статьях (тема большая и обширная, для данного кейса будет оффтоп).

Вопросы?