Как стать автором
Обновить

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

Время на прочтение 6 мин
Количество просмотров 3.4K

Всем привет! Сегодня речь пойдет об интересном кейсе, когда мы, используя только 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.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

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
А вы используете UX исследования в своем проекте?
66.67% Да, периодически 2
33.33% Нет, не использую вообще 1
0% Не совсем понимаю что это 0
Проголосовали 3 пользователя. Воздержались 3 пользователя.
Теги:
Хабы:
+3
Комментарии 30
Комментарии Комментарии 30

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн