Инвестиционный портал с человеческим интерфейсом: кейс УК «Доверительная»

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

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

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

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

Проблема: финансовые сайты часто уходят в одну из двух крайностей

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

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

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

В проекте для УК «Доверительная» нужно было найти середину. Нашей целью было сделать сайт живее, понятнее и современнее, но оставить нужную финансовую сдержанность.

Исследование: сначала разобрали продуктовые и регуляторные сценарии

На старте мы посмотрели, как должен работать сайт с точки зрения инвестора.

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

1. изучение инвестиционных продуктов;
2. переход из каталога в карточку фонда;
3. поиск обязательных документов;
4. оформление продукта онлайн;

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

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

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

Структура: прямой путь к продукту как главная идея

В инвестициях клиент редко принимает решение за секунду. Сначала он присматривается, сравнивает, проверяет детали, читает условия, открывает документы. Хороший сайт в такой ситуации не торопит человека и не перегружает его всем сразу.

Мы строили интерфейс вокруг маршрута, в котором будет легко ориентироваться. Так появилась структура сайта:

1. каталог инвестиционных продуктов;
2. карточки фондов;
3. страницы для разных клиентских сценариев;
4. разделы с раскрытием информации;
5. онлайн-покупка;
6. административная часть;
7. база для дальнейшего развития личного кабинета.

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

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

Концепция: Как нашли визуальный баланс

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

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

Постепенно, палитру успокоили. В основе остались синие, голубые и серые оттенки. Акценты стали мягче. Иллюстрации тоже перестали быть просто ярким украшением и встроились в общий ритм страниц.

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

Дизайн: акварель, карандаш и финансовая сдержанность

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

УК «Доверительная» хотела сохранить акварель как более живой визуальный прием. Он уже присутствовал в материалах компании и нравился команде клиента.

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

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

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

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

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

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

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

Контент: сделать плотную информацию читабельной

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

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

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

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

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

Разработка: сайт, которым можно управлять

Проект реализовали на 1С-Битрикс. Для клиента это важная часть всей системы, потому что сайт должен постоянно обновляться. Помимо этого использовали PHP, JavaScript, HTML, и Nginx.

Команда УК «Доверительная» получила административную часть для управления продуктами, контентом и документами. Это необходимо для инвестиционного портала, где фонды и показатели должны оставаться актуальными.

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

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

Результат: инвестиции без лабиринта

УК «Доверительная» получила инвестиционный портал, который объединяет продукты, документы, покупку и управление контентом.

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

Проект дал УК «Доверительная» свежий, обновленный образ после ребрендинга из «Система капитал», осовременив его технически и визуально. Вот что изменилось:

1. путь к покупке стал короче за счет более последовательного сценария оформления;
2. на карточках фондов стало проще находить ключевые условия, документы и дальнейшие действия;
3. обязательные документы получили более понятную структуру и управляемое размещение через административную часть;
4. обновление контента, продуктов и материалов стало меньше зависеть от ручных задач и постоянного участия разработчиков;
5. команда клиента получила основу для более быстрого добавления новых страниц, материалов и продуктовых разделов;
6. сайт стал лучше поддерживать digital-сценарии: пользователь может изучить продукт, проверить информацию и перейти к действию в одном контуре;
7. после ребрендинга компания получила более цельный цифровой образ без разрыва между финансовой строгостью и живой визуальной подачей;
8. установлена база для дальнейшего развития личного кабинета инвестора и клиентских сервисов.

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

Для бизнеса  же важна внутренняя сторона: насколько удобно управлять сайтом, обновлять материалы, добавлять продукты и развивать клиентские сервисы.

В проекте для УК «Доверительная» мы собрали эти части в одну систему. Получился сайт, который помогает инвестору двигаться по продуктам без засечек, а команде клиента — управлять информацией быстрее и удобнее.