July 21, 2022

Как мы делали приложение Совкомбанк Инвестиции

Ссылка на копию исходных макетов

Мне как простому обывателю без исторической справки довольно сложно сказать когда начался бум приложений для торговли ценными бумагами. В октябре 2019 года мне сделали оффер на позицию дизайнера интерфейсов в Совкомбанке. Я в основном занимался поддержкой личного кабинета и частично помогал с дизайном в приложения Халва. Спустя 3-4 месяца мне сообщили, что теперь я буду заниматься новым проектом в сфере инвестиций. На тот момент у меня не было опыта и хоть каких-либо познаний в данной сфере. Скрестив пальцы, я стал погружаться в задачу и исследовать тему. В этой статье мне хотелось бы поделиться процессом.

Disclaimer: так как на момент написания статьи прошло уже довольно много времени, некоторые подробности будут намерено опущены, к сожалению память штука не всегда надежная.

Исследование и первые концепты

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

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

Обычно любой дизайн начинают с поиска рефов, исследований, создания варфреймов, прототипов, пока не будет сформирована и утверждена четкая структура. Также полезно составлять CJM или User Stories. Это удобно у условиях большой неопределенности. Я же решил сразу начать с высокодетализированных концептов, при этом параллельно исследуя приложения конкурентов: Сберабанк, Тинькофф, Открытие, БКС, Газпром, ВТБ, Акции, РБК.

Наверное тут сразу вопрос: а что, так можно было? Я считал, что в тех условиях по-другому никак. Сроки были сжатыми, а я чувствовал большую ответственность. У меня не было уверенности, что ценность такого подхода была бы понятна всем.

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

Брокерки

Вторым вопросом для меня стала преемственность дизайна от приложения Халва. Я обратился к нашему Арт-директору Саше К. и Тимлиду Артему П., чтобы мы смогли сформировать определенную позицию и защитить ее перед заказчиком в момент презентации концептов. Лично для меня складывалась ситуация, когда единый визульный стиль будет удобен при использовании общих компонентов, а в конечном счете и понятен клиентам банка, которые уже используют Халву. Это оказалось довольно верным решением, т.к. в дальнейшем механизм открытия БС и ИСС производился только через приложение Халва.

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

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

Пример флоу с первой итерацией дизайна

Новая итерация. Полный пересмотр концепта

После встречи у меня сложилось понимание, что мне нужно больше насмотренности. Надо было выходить за рамки решений доступные в пределах России. Я вспомнил, что как-то раз наткнулся на сервис Mobbin, где выкладывали скрины из всех самых популярных приложений в мире. Они были удобно рассортированы по категориям и позволяли полноценно пройтись по всем экранам.

Тот самый сервис, который выручает меня всегда

Я стал смотреть все доступные приложения из сферы финтеха, чтобы начать собирать более широкую базу референсов. У меня всегда были открыты страницы с Robinhood, Coinbase, Revolut, Binance.

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

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

Изначально библиотека компонентов была заточена только под iOS. Я взял официальный UI-кит от Apple и модифицировал его под свои нужды. Тогда никто не говорил про Android и что у нас будут ресурсы для разработки под эту платформу. Но это был всего-то вопрос времени. И это время настало.

Таблица стилей текста под iOS и Android

Мне пришлось расширять библиотеку, добавлять в нее новые стили текста, а также пересобирать компоненты. Основной проблемой при работе с макетами была сложность в сборке большого количества экранов под Android после iOS. Приходилось брать каждый элемент, который мог отличаться от гайдлайнов платформы и менять его вручную через набор инстансов и стилей. Так я пришел к тому, что у меня должны быть универсальные мастер-компоненты, которые будут одинаково хорошо работать в iOS и Android не ломая правил из гайдлайнов. А значит при создании флоу из большого количества экранов, я мог его продублировать и через функцию Select simillar выделять нужные компоненты, и сразу менять платформу.

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

Когда я пришел в Совкомбанк оказалось, что вся команда работает в Sketch. Для меня это было шагом назад после Figma. Приходилось работать в офлайне и постоянно делать бэкап файлов. А после обновления приложения довольно часто случалось так, что компоненты просто ломались и было довольно трудно собирать их снова, т.к. после этого в некоторых местах еще и слетали оверрайды. Во мне зрел бунт, я понимал что работа идет не эффективно, а коммуникация с разработчиками через Zeplin не дает нужной прозрачности. В моей голове начал зреть план...

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

Дизайн карточки актива

Переход от Sketch к Figma

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

Экран проекта в Zeplin

Я всегда старался оптимизировать свои процессы по работе над задачами. Таким образом у меня стало появляться больше времени. Это время я стал уделять тестам по переносу дизайна из Sketch в Figma. Не все было гладко. Импорт ломал компоненты и некоторые детали интерфейса. В итоге вариант "просто взять и перенести" был не для меня. Определенно нужно было отрисовывать все экраны и библиотеку с нуля. Это было довольно трудоемко, но после того, как я наткнулся на статью о генерации темной темы с помощью плагинов в Figma, стало ясно, что далеко мы c текущими инструментами не уедем... Как я писал выше, были уже и другие проблемы: отстутствие прозрачности, постоянная необходимость бэкапить файлы, сложность в презентации промежуточных этапов, постоянная миграция файлов при работе с разных устройств.

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

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

Так выглядела палитра цветов при создании стилей для светлой и темной темы

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

Первые тестовые билды и редизайн Халвы

Чтобы хоть как-то показывать опыт взаимодействия с интерфейсом, мне часто приходилось делать интерактивные прототипы и демонстрировать их на зум-коллах. Это не было сложной задачей, но определенно отнимало время. Я был очень рад, когда ребята из разработки стали нам показывать первые тестовые билды. Таким образом мое восприятие готового дизайна стало подкрепляться реальными кейсами, которые наглядно показывали ошибки в проектировании. Я использовал тестовые устройства, а также проверял дизайн через эмуляторы в XCode и Android Studio.

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

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

Новый дизайн Халвы стал источником вдохновения и хорошей опорой. Помните, я выше писал, что мы хотели сохранить преемственность в продуктах? Банк делал большую ставку на продукт нашей команды, а значит дизайн должен быть точно не хуже. Так случилась новая итерация дизайна, которая заново визуально объединила Халву и Инвестиции.

Экран продукта в приложении Халва
Портфель

Выдержка из переписки

Я: — Макс, а ты помнишь с чего начинался редизайн ОМП?

МЗ: — С найма меня на работу)
Там был долгий процесс, считай два года делали редизайн

Я: — А можешь описать предпосылки? Почему решили редизайнить и тд?

МЗ: — Сильно отставали от Тинькофф

Дизайн Каталога и Карточки актива

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

Анализ референсов от конкурентов

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

Каталог

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

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

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

Карточка актива

Пополнение и вывод

Основной сценарий данного раздела состоял из перевода средств с банковского счета клиента на брокерский (при условии, что он открыт) или ИИС. Каких-то продуктовых проблем для нас не было. Все базировалось на механиках, которые уже работали в приложении Халва, а значит и дизайн можно было сделать общим, чтобы сформировать единый опыт для пользователей Халвы и Инвестиций.

Пополнение

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

Вывод

Торговое поручение

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

Первая итерации формы для торгового поручения

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

Процесс успешного заполнения формы и подачи заявки

Подача торгового поручения происходила через подтверждение с помощью sms-кода. Позже некоторые конкуренты заменили эту механику на подтверждение через биометрию.

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

Торговое поручение

Подготовка к релизу. Итоги

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

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

Тут пошли титры и саундтрек