Задача
Финансовый софт покупают люди, которым уже что-то похожее продавали. Список функций ничего не говорит им о ежедневной работе.
Поэтому страница должна была ответить на один вопрос: что окажется на экране после того, как подключишь счёт. Показать интерфейс, показать, что происходит с приходящими данными, дать посмотреть цену и попросить демо, не уходя со страницы.
Что сделали
Первый экран говорит, что делает продукт
Три слова во всю ширину, Plan Save Grow, под ними одно предложение про подключение банков, карт и почты со счетами. Остальной экран занимает интерфейс: два телефона с остатком и графиком по неделям.
Цифры, которые компания публикует о себе, стоят на тёмной полосе сразу ниже, поэтому утверждение и подтверждение попадают в один проход прокрутки.

Продукт показан экранами
Обзорный блок разбирает обещание на части. Счета подключаются один раз, дальше продукт раскладывает операции по мере поступления и показывает стоимость месяца до его конца. Экраны рядом показывают ровно это.
Дальше идёт короткий разбор подключения в том же порядке, в каком его проходит пользователь. Настроить рабочее пространство и статьи, позвать тех, кто согласует расходы, указать банковский канал и почту со счетами, посмотреть, как заполняются категории.

Отзывы тех, кто согласует расходы
Блок отзывов сделан слайдером, на экране один отзыв: портрет, несколько предложений, имя и должность. Финансовые директора говорят о том, что изменилось в их неделе, а не о впечатлениях от продукта.
По одному — это осознанно. Три цитаты рядом просматривают как узор, а одну читают.

Тарифы и заявка на демо на той же странице
Три тарифа стоят рядом, цена за рабочее пространство, средний отмечен как популярный. У каждого написано, что он добавляет к предыдущему и кому подходит, поэтому посетитель выбирает строку, а не сравнивает матрицу.
Финальный блок предлагает разбор на своих данных вместо презентации. Вопросы по ценам вынесены на страницу тарифов, а кнопка регистрации остаётся в шапке на всём пути вниз.

Техническая часть
Сайт — это купленный шаблон, перестроенный под бренд, причём перестройка идёт скриптом, а не руками. Вот как это устроено и что показывают замеры страницы.


Оценки Lighthouse
Скорость 98 на десктопе
Lighthouse замеряет десктопную версию на 98 по скорости загрузки: самый крупный элемент появляется примерно за секунду.
Доступность 96 на обоих замерах
Проверка доступности даёт 96 и на мобильном, и на десктопе: контраст, порядок заголовков, описания картинок, подписи кнопок и полей.
Сто баллов за SEO и практики
Lighthouse ставит странице 100 по SEO и 100 за лучшие практики — и на мобильном, и на десктопе, ни один пункт в этих разделах не проваливается.
Сниппет помещается целиком
Заголовок в 36 символов, описание в 119 — оба помещаются в выдаче целиком, а не обрываются посреди слова.


Безопасность
HTTPS без пути назад
Незащищённый адрес переадресуется на HTTPS, сервер отдаёт заголовок HSTS с preload, и браузер перестаёт пробовать небезопасный вариант.


Приватность
За посетителем никто не следит
На странице нет ни счётчика аналитики, ни менеджера тегов, ни рекламного пикселя.

Мобильная версия
Мобильная версия под палец
На ширине 390 пикселей страница ровно 390 пикселей: вбок ничего не уезжает.


Процесс сборки
Ребрендинг собирается скриптом
Исходник шаблона лежит нетронутым, а скрипт прогоняет по нему 107 правил замены и собирает брендированный сайт: названия, цвета, шрифты, изображения, ссылки.
Мобильная версия

Что получилось
- Понятно, как работает продукт, ещё до регистрации.
- Интерфейс, шаги подключения, тарифы и заявка на демо живут на одной странице.
- У каждого утверждения на странице рядом стоит экран.
Сайт доводит посетителя от первого предложения до кнопки регистрации без звонка по дороге. Он показывает интерфейс, проходит первый день работы, называет цену и предлагает разбор на настоящих данных.


