О продукте
Сайт компании это Personal и Business направление: Personal это приложение
и карта Cryptopay. Business это массовые выплаты, платёжный виджет, APIшка
и другие возможности крипто платежей.
Задача
•
Провести редизайн сайта компании
•
Обновить визуальный язык
•
Внедрить дизайн систему
Критерии успеха
•
Рост метрики регистрации B2C
•
Рост метрики регистрации B2B
•
Улучшение показателя TTM
Моя роль
•
Спроектировал дизайн систему
•
Спроектировал новый лейаут
•
Отрисовал весь UI и страницы
•
Помог с текстами
•
Собрал первый bundle иллюстраций
•
Подкинул гипотезы в бэклог
Результаты
Конверсия в регу
+34%
Customer
Конверсия в регу
+23%
Business
TTM
-37%
Проблемы
Старый сайт был морально устаревшим: низкая конверсия
в заявки, плохой код, отсутствие ДС и статистики все
эти аспекты блокировали дальнейшую работу над ним,
поэтому его однозначно надо было переделывать!
К задаче прилагались наработки будущего концепта: сжатое описание основных страниц, а так же черновая версия дизайна, после изучения всех материалов я провёл ревью, выявив основные проблемы, требующие доработок и совместных решений с командой и продактом.
Боли
V 1.0
Низкая конверсия в заявку
Минимальное описание услуг
Плохая структура
Слабая SEO оптимизация
Отсутствие метрик
Устаревший дизайн и визуальный язык
Отсутствие дизайн системы
Customer главная
Было
Карта сайта
Сперва мы составили карту сайта, чтобы определить для себя структуру и понять связи между страницами.
Kamil
Artem
Pasha
Mood board
После составления и согласования карты сайта
я приступил к поиску будущего референса новой визуальной эстетики и дизайн кода.
Я изучил тренды в сфере Web 3, наших основных конкурентов, а так же крупные финансовые продукты. Подготовил мудборд и после нескольких совместных итераций и брейн штормов с командой дизайна,
мы выбрали новый стиль.
Почему мы
не стали
делать 3D?
Живые продукты отличаются от концептов в сторону функциональности, нам заходила 3D эстетика:
она создавала ощущение энигматизма и технологичности, но сроки не позволяли нанимать студию или дизайнера для создания сложных визуалов, поэтому мы использовали флэт,
т.к. он позволял работать быстро и не перегружать
визуальный язык!
Revolut
Coinbase
OKX
Nexo
Айдентика 2.0
Шрифт Gilroy для сайта и промо: широкий, плакатный,
дружелюбный, но достаточно деловой. Главный цвет бренда: синий вибрант – основной для продукта
и customer направления, а строгий чёрный для business.
Синий вибрант это отсылка к Web 1.0. Эпохе веб-брутализма с характерными чертами эстетики
синих экранов. Момент зарождения и формирования интернета и первых графических интерфейсов.
Сейчас так же на наших глазах формируется облик
Web 3.0, через эту метафору мы транслируем преемственность, делая доступной «гик-технолию»
блокчейна для всех, упрощая порог входа и опыт.
Вкусный лейаут
В качестве новой сетки взяли, уже устоявшийся
на момент тренд бенто. У такой сетки хорошая динамика, а за счёт модульности появляется
простор для дальнейших экспериментов
с гипотезами и контентом.
Click
Дизайн система
Вместе с основным UI-китом был спроектирован набор продуктовых виджетов и блоков: модульность позволяла быстро и удобно внедрять и легко упаковывать новый контент, а так же тестировать гипотезы.
Продактам и маркетологам был выдан гайд, что сильно улучшило продуктовый подход в компании т.к. все команды начали мыслить в рамках одной системы.
Мобильная
Мы использовали подход «от фронтенда к бэкенду»: сначала верстали, а затем передавали в бэкенд на интеграцию с БД и серверной частью кода.
Такой подход позволяет независимо работать над отдельными частями проекта, что упрощает разработку.
При вёрстке макетов применяли CSS Grid. Он позволяет легко контролировать размеры и положение контента на странице, а также изменять макет под размер экрана — при адаптации к разным устройствам.
Kick off
V 2.0
С первых недель запуска сайт показал
хорошую конверсию в регистрации после двух недель +11%
Оплата v 2.0
Стало
Про решение
01
Почти на каждой странице значительно возросла метрика продолжительности просмотра страницы: Main +21%,
Card +15%, Earn +8%, Buying crypto +9%
02
Мы внедрили удобную дизайн систему
с возможностью гибкого управления контентом, в будущем это снизило стоимость релизов и тестирований.
TTM +37%
03
Через месяц был запущен блог. Через
два месяца после запуска мы увидели
рост органического SEO трафика:
+14% переходов с поисковиков!
04
В процессе создания сайта я так же собрал MVP брендбука, что закрыло
много болей в маркетинге, а так же
стало каналом для транслирования
нового дизайна внутрь компании
05
Главный инстайт: новый сайт показал очень хорошую конверсию в HR так совпало, что после запуска начался активный найм и все новые участники команды отметили, что их привлёк
в том числе дизайн сайта.
Показатели
Конверсия в регу: +34%
Сопутсвующие показатели
Среднее время на странице: +17%
SEO: +12%
TTM: -37%
Результаты
Сайт показал хорошие результаты почти с первого месяца, выросла конверсия в заявку, а так же глубина и среднее время просмотра. Позже на этой же дизайн системе был реализован Business лендинг и блог. Дальше развитием
сайта занималась команда маркетина!
Результаты
Конверсия в регу
+34%
Customer
Конверсия в регу
+23%
Business
TTM
-37%
Выводы
Этот кейс показал, как важно использовать фреймворки
и грамотно их адаптировать под нужды продукта
для того, чтобы своевременно поставлять качественный продукт в рынок
