Посмотреть шоурил
B2B
Web/Mobile
IT-Tech
SaaS
Сделано в Адикт в 2022
Редизайн сервиса FirstVDS
Крупнейший российский хостинг-провайдер, который предоставляет в аренду VDS/VPS серверы, а также смежные услуги вроде продажи домена или защиты от DDoS
Конверсия:
x2
Посетители и просмотры:
+15%
Сокращение отказов:
10%
Команда
Проект разрабатывался в агентстве, поэтому команда была двусторонняя: агентская сторона (Адикт) и сторона заказчика (FirstVDS).
Со стороны агентства:
Я — Дизайнер проекта
Анализировал текущее решение, конкурентов, метрики, вебвизор и тепловые карты сайта, разрабатывал концепции, дизайн всех экранов, адаптивы, дизайн-систему и передавал проект заказчику
Арт-Директор
Фильтровала дизайн решения, давала советы, помогала в интерпретации данных исследования, защищала решения перед заказчиком вместе со мной
Менеджер
Поддерживала коммуникацию с заказчиком, запрашивала данные и передавала команде в понятном виде, следила за сроками
Со стороны клиента:
Продукт-оунер
Вёл коммуникацию с командой, принимал решения о согласовании макетов, объяснял нюансы продукта, которые были не понятны
Команда поддержки
Предоставляли данные о болях пользователей, делились их фидбеком
Команда аналитики
Предоставляли доступ к метрикам и финансовые данные разных продуктов
Ресёрч
Анализ метрик, вебвизора и тепловых карт сайта
Команда аналитика поделилась с нами доступом в Яндекс.Метрику, где я провёл пару недель, изучая портрет ЦА и их поведение на разных страницах
Анализ конкурентов
Были проанализированы такие конкуренты как Selectel, Reg Ru, Timeweb, G-Core-Labs, One Host Planet, VDSina. Особое внимание уделялось структуре их продуктовых страниц, устройству конфигуратора сервера и корзины
Интервью с ЦА и заказчиком
Во время ресёрча были проведены более 15 интервью с разработчиками и менеджерами, которые отвечают за закупку серверов. Также мы длительно общались и с самим заказчиком. Кого-то искали сами, а кого-то для нас пригласила команда поддержки со стороны клиента
Интервью помогли лучше понять особенности сферы VDS/VPS-серверов, укрепить большинство корректных гипотез и отказаться от нескольких ошибочных
Итогом исследования стал обширный FigJam файл, состоящий из портретов ЦА, анализа конкурентов, макетов, объединённых с тепловыми картами и кучей гипотез по улучшению интерфейса
Проблемы
После ресёрча были определены следующие проблемы:
Часть главной страницы до редизайна
Нарушение структуры
Многие пользователи не находят нужный контент на странице и пролистывают много портянок текста. Нет единой структуры для внутренних страниц.
Анализ структуры сайта в FigJam
Сравнение структуры внутренних страниц с конкурентами
Несогласованный дизайн, нет системы
Разные части сайта разрабатывались разными командами в разные промежутки времени, что породило множество неконсистентных визуальных приёмов
Разрозненные визуальные приёмы на примере блока приемуществ
Проблемы с юзабилити и коммуникацией
Отсутствие полноценной корзины, не информативный конструктор сервера, всплывающие баннеры, язык роботов, элементы навигации, напоминающие рекламу
Решения (1/4)
Улучшение конструктора серверов
Конструктор сервера до редизайна
Конструктор сервера после редизайна
Можно повысить конверсию в покупку сервера, если:
Добавить в форму недостающие опции
До редизайна в форме конструктора были не все опции, часть из них была спрятана в корзине, что могло отпугнуть покупателей с мыслью, что этих опций вовсе нет
До редизайна в конструкторе не было выбора предустановленного ПО
Сделать форму пошаговой
Некоторые опции связаны, поэтому разделение формы на шаги может упростить сборку сервера, снижая когнитивную нагрузку
Прозрачно объяснить стоимость
Добавление стоимость к каждому параметру конструктора даст чёткое понимание, что влияет на итоговую стоимость сервера, а также даст инструмент для промо акций
До редизайна в конструкторе не отображалась стоимость опций
Детальное саммари и возможность шеринга
При покупке сервера пользователи обычно открывают несколько сайтов и настраивают одинаковую конфигурацию, выбирая оптимальный вариант.
Но итоговое решение обычно принимает не тот, кто настраивает сервер, поэтому часто делают скриншот саммари. Если саммари будет информативное, это повысит шансы покупки сервера именно у FirstVDS. А кнопка шеринга упростит процесс передачи конфигурации лицу, принимающему решения.
До редизайна в саммари были не все детали и не было кнопки шеринга
Акцент на преимуществах сервера
У FirstVDS есть разные “преконфиги” вроде “VDS Форсаж”, каждый конфиг обладает своими преимуществами, их выделение должно помочь с выбором нужного.
Акцент на подарках к серверу
Более заметное выделение подарков, которые идут к серверу, может повысить шанс выбора FirstVDS на фоне конкурентов
До редизайна не было акцента на подарках и преимуществах
Решения (2/4)
Улучшение структуры продуктовых страниц
Пример двух продуктовых страниц до редизайна
Можно повысить конверсию в покупку смежных продуктов, если:
Освежить дизайн и сделать его консистентным
Свежий, минималистичный и консистентный дизайн вызывает больше доверия, чем разрозненный и устаревший. Доверие особенно важно, когда речь идёт о размещении на серверах компании того, от чего зависит ваш доход (интернет-магазин например)
Починить тепловые карты
Когда блок с целевым действием находится примерно в 800px ниже от главного экрана это сильно понижает шанс, что до этого блока вообще доскролят. Все портянки текста были переформулированы и переприоретизированы.
На первое место всегда выводились CTA-блоки вместо преимуществ и описания продукта, чтобы не заставлять пользователей скролить до нужной им информации
Унифицировать структуру
Собрать все продуктовые страницы по единому принципу. Единое расположение заголовков, кнопок целевого действия и так далее.
Такая структура снизит когнитивную нагрузку при переходе между разными продуктами и сделает навигацию по страницам интуитивно понятной
Пример двух продуктовых страниц после редизайна
Решения (3/4)
Обновление корзины
Сложно сказать, что у заказчика в целом была корзина, т.к. это была просто страница оплаты конкретного сервера с настройкой доп.услуг
Корзина до обновления
Можно повысить конверсию в покупку сервера и смежных дополнительных услуг, если:
Реализовать опцию добавления нескольких товаров в корзину
В изначальную корзину нельзя было добавлять несколько серверов или допуслуги, что может снижать конверсию оптовых покупателей, которые берут сразу несколько серверов, а также снижать конверсию в покупку допуслуг
Добавить карточки доп.услуг в корзину
Вместе с серверов часто берут доменное имя или защиту от DDoS, добавление подобных услуг в корзину может повысить конверсию в их покупку
Добавить возможность полного редактирования сервера
Параметры сервера вещь нестабильная и требования к железу могут меняться в любой момент. Добавление опции редактирования сервера прямо в корзине также может положительно сказаться на конверсии
Промоутинг длительной аренды
Более явное отображение экономии при покупке сервера на длительный срок поможет повысить конверсию в покупку серверов на длительное время
Корзина после редизайна
Решения (4/4)
Дизайн-система
Дабы всё придуманное не порушилось за пару лет, необходимо закрепить паттерны в лице дизайн-системы. Но что важнее, дизайн-система в разы увеличит time-to-market команды
Часть дизайн-системы
Можно повысить TTM команды FirstVDS, если:
Зафиксировать токены дизайна и базовые атомы интерфейса
Завести токены цветов, типографики, отстпов, сетку и иконки, чтобы были базовые кирпичики для построения дизайна. А также кнопки, чекбоксы, поля ввода, ползунки конфигуратора и так далее в разных цветовых решениях. Таким образом не даём плодить неконсистентные куски интерфейса
Зафиксировать шаблоны продуктовых страниц
Описать базовую структуру и вывести шаблоны для быстрой сборки новых продуктовых страниц. Таким образом сильно ускоряем TTM новых продуктов.
Завести движок для статей
Вывести компоненты для статей вроде текстовых блоков, цитат, медиа-контента и пр. Таким образом сильно ускоряем выход новых статей, а их FirstVDS пишут много.
Компоненты движка статей
Итоги
Дизайн макетов занял около 6 месяцев и ещё 8 месяцев заняла их разработка со стороны заказчика. Спустя год после релиза проекта заказчик поделился результатами
Конверсия выросла в 2 раза
Рост конверсий по поставленным бизнес-задачам и показателям вырос до двух раз с момента ребрендинга сайта FirstVDS
Рост посетителей и просмотров на 15%
Обновлённые страницы стали лучше индексироваться, что повысило органический трафик сайта
Сокращение отказов на 10%
Пользователи стали быстрее находить нужную информацию и реже уходить с сайта
Рост TTM на 70%
Время разработки решений начиная от дизайна и заканчивая разработкой сократилось на 70% благодаря внедрению дизайн-системы. Если раньше запуск нового раздела требовал несколько месяцев разработки, то сейчас на это уходит от 2 до 4 недель.
Сайт стал консистентным и более узнаваемым
Это также могло сказаться на росте конверсии т.к. подобные улучшения поднимают доверие к продукту