Личный кабинет КИТ Финанс

Задача

К 2018 году об инвестициях в России заговорили самые обычные люди. Не только бизнесмены с миллионами на счетах, но и строители, программисты, писатели. Ставки по банковским депозитам падают, поэтому бывшие вкладчики всё чаще рассматривают акции, облигации и ПИФы как альтернативу для сбережений, а все крупные банки уже запустили удобные онлайн-сервисы для торговли на бирже. 
 
Брокерская компания КИТ Финанс обратилась к нам с просьбой помочь в конкурентной борьбе за начинающих инвесторов и создать понятный личный кабинет для управления брокерским счетом.

Над проектом работали:

Вожак стаи
Александр Лебедев
Старший frontend-разработчик
Виктория Денисова
Дизайнер интерфейсов
Алексей Петров
Дизайнер интерфейсов
Виктория Лебедева
Редактор
Маргарита Сидорова
Технический директор
Павел Лебедев
Старший frontend-разработчик
Георгий Шинкарев

Клиент

КИТ Финанс

bg graph
mac mobile
graph
Задача
Компания КИТ Финанс Брокер работает на рынке ценных бумаг с 2000 года и преимущественно с продвинутыми инвесторами. При этом всё больше конкурентов продвигает брокерские услуги среди массовой аудитории, в КИТ Финанс решили не отставать. Тысячи собственных активных трейдеров – хорошо, но десятки тысяч – еще лучше. Чтобы их привлечь, требовалось сделать доступный веб-сервис для работы с брокерским счетом. Решить эту задачу поручили нам.
С самого начала мы выступали не только в роли дизайнеров, но напрямую участвовали в разработке нового бизнес-направления для заказчика.
line
Цель
Глобальная цель проекта – трансформировать КИТ Финанс Брокер из инструмента профессиональных инвесторов в удобный продукт для всех и в короткие сроки составить конкуренцию лидерам в нише.
bg
ellipse
Точка отсчета
До сотрудничества с нами на сайте брокера уже работал сервис для онлайн-торговли – веб-банк. У него широкий функционал, но сложный для неопытного пользователя интерфейс. Большинство новых клиентов отпадает на этапе заполнения заявки.
Веб-банк продолжает работать для постоянной аудитории. В планах компании заняться его модернизацией, но не срочно. Приоритетная бизнес-задача – снизить порог входа для новых клиентов, поэтому в личном кабинете мы не пытались учесть все нюансы торговли на биржах, а выбрали базовые функции, необходимые начинающему инвестору.
ellipse
mobile
line
Поиск решений
Чтобы погрузиться в тему, участники рабочей группы прошли обучение основам биржевой торговли в офисе клиента. Параллельно мы занялись анализом конкурентов: зарегистрировались на всех аналогичных сервисах, сами пробовали торговать, попутно изучали особенности интерфейсов, выявляли их плюсы и минусы.
screen
screen
screen
screen
screen
screen
screen
Работая над прототипами, мы обнаружили расхождения между представлением об онлайн-торговле для новичков в идеальном мире, и тем, как устроены бизнес-процессы заказчика. Ради достойного результата клиент согласился на увеличение сроков: мы временно заморозили проект, пока в компании обновляли внутренние процессы. Если вычесть эти паузы, путь от первой встречи с клиентом до релиза занял полгода. Технической реализацией проекта также занимались специалисты нашей студии.
screen
Реализация
Основные функции личного кабинета:
  • Быстро открыть новый брокерский счет или ИИС.
  • Пополнить счет или вывести деньги с помощью банковской карты и по реквизитам.
  • Мгновенно купить или продать активы: акции, облигации, паи фондов, валюту.
bg
Мы использовали фирменные цвета компании, малиновый и темно-синий, и дополнили их неяркими вспомогательными оттенками. Хотя интерфейс и ориентирован на широкую аудиторию, люди предпочитают доверять деньги тем, кто выглядит профессионально. Сдержанный без засечек шрифт Geometria не отвлекает от главного – цифр и динамики котировок.
Типографика
Geometria
Medium
Regular
desktop fonts mobile-fonts
Цвета
Малиновый
Основной
#ab0e6b
Темно-синий
Основной
#1c2a43
Синий
Вспомогательный
#22314c
Темно-серый
Вспомогательный
#3e3f42
Серый
Вспомогательный
#6b6c6f
Пепел
Вспомогательный
#9ea0a5
Серебристый
Вспомогательный
#eff1f8
bg bg bg
Элементы
Мобильная и десктопная версии
mobile
line
Для простоты мы использовали минимум иконок и ясные графики. По умолчанию показываем линейный график, более опытные трейдеры могут самостоятельно переключиться на свечной формат отображения динамики цен.
mobile mobile
select
select select select
nav
line
layers
С помощью акцентного малинового цвета управляем вниманием пользователя. Оформили таким образом приоритетные для заказчика действия: пополнить счет, купить актив.
mobile
tablet
Восстановить историю операций легко, даже если инвестор передал средства в доверительное управление. В личном кабинете доступны сделки за любой период с указанием суммы покупки, комиссии брокеру, даты. Вся система прозрачна.
operation
operations
shares
Транслируем котировки в реальном времени. При наведении на актив предлагаем моментально совершить покупку или продажу.
tablet
Карточка инструмента содержит всю необходимую информацию для принятия решения о продаже или покупке инвестиционного актива.
tablet mobile
grid
line
line
screen mobile
Чтобы зарегистрироваться в личном кабинете, достаточно номера телефона. Когда первый шаг сделан, интерфейс побуждает пользователя открыть счет – без него нет доступа к каталогу финансовых инструментов.
tablet
ellipse
layers layers
circle
Внести данные, проверить документы и подписать договор на открытие счета – теперь можно за 15 минут. Раньше этот процесс занимал несколько дней.
Преимущества нового сервиса:
  • Говорит на доступном языке: интерфейс не требует инструкций по применению.
  • Инвестиции на высоких скоростях: создание и управление счетом отнимает минимум времени.
  • Биржа всегда рядом: проверить состояние портфеля можно в пару кликов с любого гаджета.
ellipse
mobiles
line
Поздравляем!
В ближайшее время Вы получите уведомление об открытии счета.
А пока можете ознакомиться с полезной информацией для инвестора.
iMac
Rambler's Top100