Многостраничный сайт для веб-сервиса CWILL — уникальный финтех продукт по оформлению завещаний и платежей в крипте

Перед нами стояла задача создать продукт уровня стабильного чувства надежности и доверительного отношения, которое сильнее любой мимолетной «прикольной идеи» и нового тренда. Когда речь идет о таких деликатных темах как смерть и цифровое наследство, важно найти тонкий баланс между UX-ом, маркетингом и психологией пользователей — преодолеть базовое недоверие к незнакомому продукту, объяснить логику работы сервиса, наглядно продемонстрировать степень безопасности и уровень защиты данных, вызвать глубокий эмоциональный отклик и достичь идеального соприкосновения продукта с триггерами аудитории.

Для решения такой задачи выполнять стандартные этапы разработки is not enough. Начали по классике — несколько итераций интервью с заказчиком и заинтересованными юнитами, чтобы досконально погрузиться в тематику и точно сформулировать цели разработки. Дальше — swot-анализ конкурентов. Но что делать, если конкурентов не существует? Правильно! Провести комплексный ресерч рынка, выделить топовых игроков и затестить все возможные веб-сервисы смежных направлений, параллельно отмечая удачные юзабилити решения и, наоборот, пробелы в позиционировании.

После теста 37 (да, мы вели учет) приложений, смогли выделить конвенциональные алгоритмы проектирования, ключевой функционал и базово закладываемые пользовательские сценарии, неочевидные UX-решения, упрощающие коммуникацию пользователей с продуктами, и уникальные маркетинг-фичи, уместные в тематике финансов:

1. реализация приоритетных для ЦА способов регистрации
2. соблюдение правил безопасности платежей
3. пошаговый процесс оформления финансовых услуг
4. автоматическое создание черновиков при внезапном прерывании операций
5. создание и кастомизация шаблонов
6. разработка вовлекающих пушей с подсказками

Переходим к аналитике целевой аудитории. Чтобы на 100% понять боли и точно нащупать запрос ЦА, нужно перенять ее картину мира и именно через эту призму прорабатывать сайт. Кроме традиционных социально-демографических параметров, препарируем каждый сегмент в контексте страхов, внутренней философии и приоритетов, жизненных ценностей, уровня мышления, факторов принятия решений и психологии поведения в цифровой среде. Когда информация из всех открытых источников — научных исследований, статей, отчетов о рыночных трендах — изучена, «внедряемся» в закрытые криптосообщества и общаемся с потенциальными юзерами фэйс-ту-фэйс.

Такой подход позволяет не просто получить портреты аудитории на 360°, но и сформировать фокус-группу для будущих тестов.

Итак, пользователь, на которого ориентируемся:

• современный мужчина 25-45 лет
• менеджер C-level с бизнесовым мышлением, системным подходом
• высокий уровнем заработка
• регулярно юзает криптосервисы с разным функционалом
• в курсе последних тенденций рынка
• выработал иммунитет к скаму и автоматически скипает неоднозначные финансовые предложения
• мыслит за рамками привычных представлений о норме
• интересуется инвестированием и умеет идти на риск
• привык планировать жизнь на несколько лет вперед

Имея на руках подробную «инструкцию» к хаку интуиции и психологии пользователей, приступаем к пошаговому простраиванию информационной архитектуры. Путь пользователя буквально разбиваем на атомы из взглядов, вздохов и мыслей в Customer Journey Maps, учитывая все возможные сценарии взаимодействия с сайтом и потенциальные вариации отклонения от заложенной логики — от первого касания с продуктом до регистрации в личном кабинете.

Вот теперь UX-дизайнер может приступать к прототипам! К процессу подключаем маркетолога, чтобы со старта разрабатывать продукт в тонком балансе маркетинговой и логической составляющих. Скрупулезно расшифровываем разветвленные схемы будущего сайта и трансформируем их в проты высокой детализации: отдельные посадочные страницы под услуги оформления завещаний и управления активами, полноценная страница FAQ — для превентивного закрытия потенциальных возражений будущих пользователей и раскрытия сложных для понимания вопросов, страница «О компании» — для повышения уровня доверия к сервису.

Если кто-то вам скажет, что архитектура с первого раза ложится в макеты — знайте, он недоговаривает. Пользовательский опыт — гибкая история, которая тестится и допиливается перманентно. Наш UX-ер мастерски детектит нарушения в логике, правит закономерности, прогоняет новый паттерн через User Flow и только после этого продолжает разработку прота.

Копирайтер уже на низком старте и оперативно перехватывает таск. Задача — написать тексты понятным для целевой аудитории языком, не перегружая контент терминами и незнакомой лексикой. Наш коп как никто умеет сопереживать пользователям и примерять их роль на себя, но в этом кейсе и примерять не нужно — продукт новый не только для целевой аудитории, но и для всей команды разработки. Так что пишем тексты — проводим тест внутри команды. Если смыслы не очевидны, упрощаем формулировки и делаем нарратив еще более прозрачным.

Ключевые тезисы — в заголовки, информационные блоки — в короткие этапы и шаги. Топ возражение — безопасность данных и средств. Как отработать? Дать максимум инфы, подкрепленной осязаемыми доказательствами, и разработать отдельную страницу, целиком посвященную безопасности сервиса. Еще один страх «не понимаю, как пользоваться — лучше и не буду». Решение? Отдельно отрисовать блоки с визуальным отображением интерфейса, где ключевые действия буквально разложены на этапы, а логика взаимодействия с элементами дополнительно иллюстрируется анимированными переходами.

Finally, прототипы с логичным расположением блоков, элементов и текстов — done. Можно дизайнить? В других агентствах — возможно, в Ninen — только после юзабилити теста на фокус-группе (зря что ли наш маркетолог две недели заводил полезные знакомства в клубе криптоэнтузиастов после работы). Тестируем прототипы на реальных пользователях и переходим к UI-исследованию.

UI-дизайнер изучает сегменты ЦА в контексте психологии дизайна и решительно погружается в исследование привычных для ниши стилистических приемов и цветовых решений. Выделяем две общие визуальные формулы конкурентов:

1. темная тема + неоновые свечения + кастомная 3D графика + яркие сочные цвета
2. или, в противовес, высокая плотность изображений интерфейсов + строгие «айтишные» цвета + максимальная визуальная серьезность.

Результаты формируют основу системы дизайна — кастомного документа Ninen, задающего правила и принципы визуальной стратегии сервиса.

Дальше — прорисовка вариантов дизайн-концепций главного экрана aka настоящий челлендж для нашего UI спеца. Инновационный продукт заказчика не имеет очевидного физического воплощения. Как показать процесс перевода завещанных денег эстетично и при этом понятно? Не мыслить шаблонно! У вдохновения нет границ: идеи для вариантов концепций черпаем в пинтересте, на всех возможных проф и околопрофессиональных ресурсах, в картинных галереях и даже в фильмах. В итоге презентуем заказчику аж 8 концепций в разных стилистиках, обжигаемся, но запоминаем: мокапы со скринами интерфейсов — кринж, поэтичная, но при этом технологичная и понятная ассоциация с перемещением транзакций по планете — лайк.

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

Иллюстрации — максимально наглядные, чтобы вызвать как рациональные, так и эмоциональные ассоциации с функционалом. Используем стилизованные скрины интерфейса личного кабинета и 3D картинки для воздействия сразу на несколько органов чувств и визуального подкрепления информации, которая раскрывается в текстах. Проще говоря, не упражняемся в метафорах и отсылках, а идем от потребностей аудитории: быстро считать суть сервиса — убедиться в его ценности и безопасности — понять, как перейти к регистрации. На выходе получаем одновременно стильный и конверсионный дизайн, который не станет морально устаревшим через 3-5 лет.

Соблюдая выбранную стилистику, последовательно отрисовываем все 7 страниц сайта.

1. Две отдельные посадочные страницы под услуги оформления завещаний и управления активами: понятные иллюстрации, демонстрация пошагового взаимодействия с интерфейсом, отзывы реальных юзеров для повышения уровня доверия к сервису и безошибочно расположенные конверсионные элементы, ненавязчиво подводящие к регистрации.
2. Полноценная страница FAQ — для превентивного закрытия потенциальных возражений будущих пользователей и раскрытия сложных для понимания вопросов.
3. Страница «О компании» — чтобы снизить степень недоверия к стартапу, раскрыть философию компании и познакомить с командой. Последнее — особенно важно. Составляем ТЗ на фотосессию и получаем идеальные фото тимы: пользователю гораздо легче проникнуться идеей сервиса, когда он понимает, что за созданием продукта стоят настоящие люди, а не картинки с фотостока.
4. Страница «Безопасность». Как вы помните, одно из ключевых возражений ЦА — безопасность личных данных и финансов. Чтобы комплексно его закрыть, разрабатываем отдельную страницу, через которую передаем всю серьезность подхода к обеспечению безопасности юзеров: независимые аудиты, контроль доступа и проверка учетных записей, проведение регулярных тестов. И все это — с релевантными скриншотами и иллюстрациями, анимированными иконками, ассоциативными примерами и цветовыми акцентами на ключевых смыслах.
5. Resourses. Эта страница выполняет сразу 2 функции. Пользователи — получают доступ к ежемесячным отчетам по результатам работы сервиса. SEO-специалист — может писать ТЗ на 500+ ключевых слов для лучшего продвижения сайта в поисковой выдаче.
6. Контакты — кроме очевидной функции обратной связи закрываем возражение о физическом существовании компании и «скаме». Контакты оформили максимально понятно и френдли — не ради «галочки».

Для точечного воздействия на психологические триггеры и усиления продуктового отклика внедряем экологичные маркетинговые инструменты: конверсионные кнопки после прогревающих блоков, видеогайды по работе с интерфейсом, отзывы реальных пользователей. Все маркетинговые решения взаимосвязаны и в комплексе работают на то, чтобы органично подвести пользователя к кнопке Sign Up.