4thmoment

Цыренов Содном

Сайт-лендинг финтех-платформы 4th Moment

О клиенте

4th Moment — это финтех-платформа, которая помогает стартапам и бизнесу быстро разворачивать сложные платежные инструменты и автоматизировать транзакции. Чтобы привлечь первых клиентов и крупных инвесторов, основателю проекта требовалось создать сильное визуальное позиционирование и запустить удобный сайт.

США

Стартап

3 недели

IU/UX, Брендинг

Локация

Опыт на рынке

Длительность проекта

Услуги

Запрос клиента

Разработать запоминающийся фирменный стиль, упаковать сложный технологичный продукт в понятное для B2B-рынка предложение и подготовить площадку к приёму первых заявок.

Задачи

Моя роль

В проекте я отвечал за весь цикл работы по сайту — от сбора вводных данных и их анализа до проектирования структуры с дальнейшим запуском:

Сбор и систематизация требований от заказчиков и экспертов

Проектирование структуры сайта и пользовательских путей

Редактура и согласование всех текстов

Разработка дизайна под все разрешения экранов

Создать визуальный стиль с нуля. Разработать айдентику, которая выделит стартап на фоне консервативных конкурентов и сформирует доверие к новому финансовому продукту.

Спроектировать понятную UX-структуру. Разложить сложную техническую информацию по полочкам, чтобы закрыть страхи клиентов и наглядно показать пользу платформы.

Отрисовать адаптивный UI-интерфейс. Сделать удобную десктопную и мобильную версии, сохранив читаемость графиков, схем и интерактивных блоков.

Особенности проекта

Сжатые сроки. На весь процесс от идеи до запуска работающего сайта у меня было всего 3 недели.

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

Гипотеза

Если мы откажемся от тёмных фонов из референсов в пользу кристально белого пространства, но сохраним контрастную графитовую типографику, добавим яркие оранжевые акценты и мягкую 3D-графику из полупрозрачного стекла, то продукт будет выглядеть дорого, безопасно и технологично.

Результат

На этапе презентации концепции клиент утвердил фирменный стиль с первого предъявления без единой правки. В ходе предварительного тестирования визуального концепта на фокус-группе из 10 потенциальных клиентов, 9 из 10 респондент оценили уровень доверия к бренду как «высокий», отметив, что светлый стиль и стеклянная графика вызывают ощущение прозрачности финансовых операций.

Решение

Я разработал дизайн-систему на контрасте глубокого тёмного и чистого белого цветов. Главным акцентом сделал неоновый оранжевый цвет — он используется строго для кнопок и важных цифр. Для иллюстраций создал мягкие трехмерные элементы из полупрозрачного стекла.

Как я начал разрабатывать брендинг

Контекст

Большинство финансовых компаний используют похожие сине-голубые оттенки и стандартные фотографии из стоков. Клиент прислал ряд референсов с технологичными, но довольно тёмными и перегруженными интерфейсами. Нам же требовалось найти баланс: выделиться на фоне консервативного рынка, сохранить ощущение лёгкости и при этом подчеркнуть премиальность продукта.

Гипотеза

Если за основу взять проверенную лидерами рынка структуру, но добавить регистрацию после ознакомления с сервисом и внедрить наглядный интерактивный онбординг, мы сможем минимизировать потерю пользователей на этапе перехода от лендинга к реальному использованию продукта.

Результат

Использование готового рыночного скелета в сочетании с моими точечными UX-улучшениями позволило улучшить архитектуру. Заходя на сайт до проведения первого тестового платежа стал заниматься у пользователя на 15% процентов меньше времени в сравнении с основными конкурентами.

Решение

Я спроектировал базовую карту пользовательского пути, где сосредоточился на оптимизации пяти ключевых этапов:

Стартовый экран. Вместо абстрактного описания он видит чёткое ценностное предложение: какую проблему бизнеса решает платформа и за сколько минут её можно подключить.

Пользователь видит блок, где может выбрать свою сферу бизнеса и сразу посмотреть, как именно платежи будут проходить через его сайт. Это закрывает главный страх о том, подойдёт ли сервис конкретному проекту.

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

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

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

Как я решал бизнес-задачи
через UX/UI

Контекст

В идеальных условиях проектирование путей пользователя требует детального исследования со всеми ответвлениями сценариев и долгим тестированием. Однако из-за жёсткого ограничения по времени у меня физически не было возможности выстраивать этот процесс с нуля.

Гипотеза

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

Результат

После сборки прототипа я провёл юзабилити-тестирование на пяти представителях целевой аудитории и сравнил с конкурентами:

Время понимания продукта: среднее время, за которое человек смог своими словами объяснить суть работы платформы, сократилось с минуты до 18 секунд.

Вовлеченность: глубина прокрутки страницы выросла на 35% — пользователи стали доходить до блока с тарифами и формой обратной связи, не теряя интерес на середине пути.

Решение

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

Понятная подача информации на страницах сайта

Контекст

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

Гипотеза

Если спроектировать интерфейс по строгой сетке и перестроить широкие таблицы в вертикальные карточки, мобильные пользователи смогут легко изучать данные без потери удобства.

Результат

После запуска сайта мы подключили аналитику и получили следующие данные за первый месяц работы:

Снижение отказов: показатель отказов на мобильных устройствах снизился на 22% по сравнению с предыдущими тестовыми страницами клиента.

Равенство конверсий: разница в конверсии между компьютерами и смартфонами сократилась до 0.5% — мобильные пользователи стали заполнять заявки так же активно, как и десктопные.

Скорость загрузки: благодаря чистой верстке без тяжелого кода, а также иллюстраций сайт загружается за 1.2 секунды даже при слабом мобильном интернете.

Решение

Для мобильной версии полностью переработал структуру: все таблицы тарифов развернул в вертикальные карточки, которые удобно листать одним пальцем. Кнопки действия увеличил в размере и расположил в нижней части экрана, чтобы на них было удобно нажимать на ходу.

Реализация UI-интерфейса и адаптация под мобильные экраны

Контекст

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