Проектирование, UI/UX-дизайн, адаптивная HTML-верстка Robo-Advisory платформы

Lepshey совместно с HiEnd Systems разработали робо-эдвайзер сервис по созданию и управлению инвестиционным портфелем.

На разработанной платформе клиенты оценивают свое текущее финансовое положение и устанавливают инвестиционные цели (накопить на учебу, машину, пенсию).

Используя интерактивные возможности сервиса (co-browsing, video chat) пользователи консультируются с финансовым специалистом и получают индивидуальные рекомендации, как достичь заявленных целей.

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

Пользовательские сценарии

Главная страница предлагает пользователю выбрать один из двух сценариев взаимодействия с платформой:

  1. RoboAdviser — финансовое консультирование по инвестициям и пенсии в автоматическом режиме. Инвестиционный портфель создается автоматически.
  2. IFL — пользователь работает с финансовым консультантом напрямую через текстовый, видео, аудиочат и co-browsing. Инвестиционный портфель подбирается специалистом индивидуально для пользователя.
Scenario scheme
Scenario RoboAdviser path arrows
Scenario IFL path arrows

Главная страница

Главная рассказывает про возможности платформы, преимущества Loyal North и их продукты. Она предлагает пользователю выбрать способ взаимодействия с платформой и объясняет особенности каждого.

Fusion home page

Анимированные иконки и мини-иллюстрации

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

  • Pension Planner
  • Investment Planner
  • Planning on advised
  • Life Time Planner
  • Mortgage
  • Protection Planner

Посадочные страницы

С главной пользователь попадает на одну из посадочных страниц: RoboAdviser и Personal Consultant.

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

Связь с консультантом

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

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

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

Мобильная версия сайта

Сайт адаптируется под любые устройства: смартфоны и планшеты.
Пользователи не ограничены в способах взаимодействия с сайтом.

Работа с консультантом

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

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

Работа с анкетами

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

Графика и анимации

Калькулятор инвестиционных планов

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

Гайдлайн

Мы подготовили UI Kit с описанием принципов построения интерфейса.

Заголовки

Текст

Цветовая схема

Основные цвета

#334455
#1177DD
#ffaa22
#777788
#ffffff

Дополнительные цвета

#cc2277
#9955bb
#33aa11
#eeeeee

Элементы

Кнопки и ссылки

Блоки

Навигация

7
специалистов
дизайнеров и frontend-разработчиков на проекте
70
макетов
проектирование, UI-дизайн, HTML-верстка
700
часов
потребовалось на реализацию проекта

Я Михаил, основатель Lepshey.

Давайте обсудим ваш проект.