Начните вводить запрос...
Технологии

Шаг за шагом: как команда XLTools обновила сайт продукта

Опубликовано 12 января, 2021

XLTools — мощная надстройка для Excel, которая помогает бизнес-пользователям быстрее и проще подготавливать данные, отслеживать изменения и автоматизировать задачи. В сегодняшнем посте расскажем, как команда разработки XLTools шаг за шагом обновляла сайт продукта — основной канал привлечения пользователей и продаж — и покажем немного интересной статистики.

В июле был запущен новый сайт продукта XLTools. Идея обновить сайт, созданный еще в 2013 году, зрела несколько месяцев: его вид устарел и по меркам 2019 года, и на фоне конкурентов. В ходе анализа выяснилось, что одного редизайна будет мало: сайт недостаточно хорошо выполнял основную задачу — конверсию посетителей в платящих пользователей. 

Шаг 1. Анализ текущего сайта на WordPress и глубинные интервью с пользователями

Средняя скорость загрузки сайта составляла 12 секунд. Вдобавок, он был неадаптивен, что очень мешало развитию: поисковики его плохо индексировали. Анализ поведения пользователей показал, что и навигация была не очень удобной. На замену WordPress, плагины которого и замедляли работу, выбрали Gatsby – генератор статических сайтов на React. Gatsby позволяет построить сайт с быстрой загрузкой страниц.

Затем провели около 10 глубинных интервью с пользователями (value discovery), чтобы выяснить ценность продукта с их точки зрения. Как результат, по-новому посмотрели на XLTools: яснее сформулировали основные преимущества надстройки, скорректировали состав лицензионных пакетов.

Наконец, собрали дизайн-референсы, переработали структуру сайта, создали новую навигацию, подготовили прототипы страниц. Кстати, на этом этапе помогли доски Miro — удобный инструмент, чтобы собрать воедино мокапы, mind-maps’ы, заметки, результаты мозговых штурмов. Дизайн-направление вели в Figma, здесь же собирали скриншоты хороших решений. 

XLTools -Miro -2

Шаг 2. Реализация и обновление самого продукта

Это был самый трудоемкий этап, ведь неизбежные правки замедляли работу, а работа над обновлением самого продукта XLTools не останавливалась ни на минуту. Где было возможно, команда выполняла задачи по сайту параллельно, разбив на спринты. Вот, что было реализовано на этом этапе: 

  • Адаптировали существующий контент под новую структуру прототипов, создали контент для новых страниц.
  • Подготовили дизайн типовых страниц и компонентов в Figma, создали анимации и иллюстрации.
  • Для каждой страницы прописали мета-теги, сразу учитывая SEO-составляющую сайта.
  • Создали сайт на Gatsby.js, настроили связь с базой, подключили платформы продаж и email-рассылок.

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

XLTools -prototype -2

Шаг 3. Запуск и оптимизация. Работа над ростом трафика и конверсией в продажи

Оптимизация началась в день запуска: трафик, конечно, упал, что всегда и происходит на первых порах после обновления. На доработки, оптимизацию производительности, переиндексацию в Google и Yandex ушло еще около месяца. Что в итоге:

  • Сайт адаптивен на всех мобильных устройствах.
  • Средняя скорость загрузки сократилась до 5 секунд и ниже с учетом всех страниц, всех устройств и всех стран! 
  • Общая оценка производительности сайта в Pagespeed Insights / Lighthouse выросла с 48% до 80% на мобильных, с 80% до 95% на десктопе.

В целом, основных целей команда достигла. У XLTools теперь есть быстрый, удобный сайт с современным дизайном. После оптимизации посещаемость выросла с 20 000 до 26 000 в месяц и продолжает расти!

Вот так сайт выглядел до переделки: 

XLTools Before

А так - после: 

XLTools After

Сейчас продуктовая команда работает над увеличением трафика и самое главное — над повышением конверсии в установки и продажи XLTools. Но это уже история про продуктовые эксперименты.  

***

Ранее мы рассказывали о проекте по миграции Adxstudio Portal на Dynamics 365 for Marketing Event Portal, что позволило клиенту сохранить привычную функциональность сайта при обновлении версии CRM. 

Похожие сервисы

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

Как мы обрабатываем Ваши личные данные

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