Интерфейс личного кабинета системы «Прожектор»

Проблемы

До редизайна личный кабинет выглядел примитивно и решал базовые задачи клиента. Руководство «Колесника» планировало масштабировать продукт и продавать лицензии для других компаний в сфере управления частным капиталом.

Анализ личного кабинета выявил три главные проблемы:

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

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

Выглядит небезопасно и ненадёжно. Интерфейс системы был оформлен в айдентике «Колесника» и не внушал доверия. Казалось, что это всё просто картинка, а не настоящие данные. Чтобы вывести «Прожектор» на рынок как самодостаточный продукт, предстояло спроектировать интерфейс по новой логике, внедрить в него новую айдентику и поработать над тем, чтобы сервис создавал атмосферу надёжности и безопасности.

Задача и вызов

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

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

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

Первые шаги: страница входа и регистрации

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

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

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

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

Анкета подтверждения профиля

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

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

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

Портфель

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

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

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

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

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

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

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

История операций

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

О компании

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

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

Передача в разработку

Когда интерфейс был готов, мы подготовили материалы для команды разработки «Прожектора»: собрали и описали дизайн-компоненты, выверили макеты для десктопной и мобильной версии, сверстали и передали архив файлов с вёрсткой страниц и компонентов в ХТМЛ и ЦСС для связки с бэкендом системы.