БКС
редизайн экосистемы банка и торговый терминал с простым доступом
www.bcs.ru
04.2021

в начале 2020 года реализовали задачу по объединению существующих приложений БКС в единый веб-кабинет и выпустили новый продукт — торговый терминал.

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

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

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

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

применив идеи из CJM, сделали новый user flow, который помогал решать проблемы и сокращал путь пользователя до достижения цели. это стало основой для проработки концепции.

Часть CJM новичка
концепция
начали с разработки единой навигации для веба и мобильного приложения, чтобы обеспечить бесшовный пользовательский опыт:


  • портфель — активы пользователя;
  • рынки — каталог инструментов с поиском и фильтрацией;
  • для вас — лента с рекомендациями, сформированная от стратегии пользователя;
  • сервисы — безбумажный офис, отчеты, настройки профиля, тарифы;
  • терминал — (веб-версия) рабочий стол с настройкой виджетов.


сайд-бар оставили как преемственность от предыдущих личных кабинетов, но усовершенствовали, превратив его в контекст-бар.

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

Вариации контекст-бара
терминал

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

терминал представили в двух версиях: светлой и темной. темные версии не всегда воспринимаются пользователями как удобные, но тут решение понравилось и клиенту, и пользователям на юзабилити-тестировании.

Темная версия терминала
юзабилити-тестирование
тестировали десктоп, мобильное приложение и терминал

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

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

3
стенда
24
респондента
39
часов материала
>150
юзабилити-проблем
aic.framework

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

имплементация брендинга

параллельно с началом разработки онлайн-проекта была запущена работа над новой бренд-платформой группы БКС. на ранних этапах мы были в контакте с брендинговым агентством и обменивались материалами.

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

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

Поэтажная структура страниц
айдентика

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

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

промежуточные итоги

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

даже на первых порах видно, что работа показывает свою эффективность:

+7%
прирост по торговым операциям
+10%
прирост торгового оборота по операциям через терминал
-10%
обращений в поддержку
цифровая экономика РФ
модернизация информационного портала «Цифровая экономика РФ»
www.digital.ac.gov.ru
04.2020