Моя роль:
Я отвечал за визуальную составляющую проекта (айдентика, сайт, маркетинговые материалы) и мобильные приложения для iOS и Android.
Я был единственным дизайнером в проекте и только благодаря тесному взаимодействию всей команды у нас получился такой качественный и проработанный продукт.
Инструменты и особенности проекта:
Мы использовали связку Sketch и Abstract, чтобы передавать макеты разработчикам в единой точке правды (мастер-файле) и дать возможность project-менеджеру/разработчикам быстро править текстовки/ тарифы и другие детали, поддерживая дизайн систему в порядке.
Еще Abstract пригодился, когда мы временно наняли внештатного дизайнера, чтобы делигировать некоторые задачи.
Цель проекта
Команде нужно было предоставить мобильное приложение для брокера КИТ Финанс которое заменило бы терминалы QUIK и десктопный ЛК для их пользователей.
Помимо основной цели мы также хотели запустить на основе брокера свое решение, ориентированное на начинающих инвесторов и предложить другим брокерам/банкам whitelable решения на основе нашего приложения и API.
Трудности
В сжатые сроки с ограниченным бюджетом нужно было написать API, подключить его к брокеру и выпустить приложение для двух мобильных платформ.
До начала работы с брокером КИТ Финанс, команда использовала API компании БКС и вся работа по backend’у начиналась с чистого листа.
С продуктовой точки зрения нужно было расставить приоритеты по разработке основного функционала / ключевых фишкек приложения / монетизации и получения первой прибыли.
Результаты
Команда выпустила мобильную платформу для инвестиций и написала новый API к которому позже подключились КИТ Финанс (3 мес), Абсолют Инвестиции и Питер Траст (для двух последних подключение заняло всего 2 недели включая whitelable приложения для двух платформ).
Оба приложения (КИТ и Simple) получили рейтинг 4,5 звезд в App Store. Simple Invest как отдельный продукт получил новых клиентов и собрал лояльную аудиторию. Для клиентов КИТ Финанса наше решение стало основным способом взаимодействия с их портфелями.
Портфель – один из основных экранов приложения.
Пользователь видит свои активы по категориям и их доли в портфеле.
Базовые действия легко доступны и всегда под рукой.
Для клиентов с валютными и ИИС счетами предусмотрено легкое переключение между счетами одним свайпом.
Каталог инструментов.
Основная информация об инструментах, важная людям, которые только начинают свой путь в инвестициях.
Каталог с более чем 1000 акций (российскими и зарубежными), облигаций, ETF и разными валютами (доступными по биржевому курсу)
Избранные акции и подборки для тех кому сложно сделать выбор.
Подборки и инвест-советник
Приложение ориентировано на новичков в инвестициях, поэтому было очень важно дать им отправную точку в каталоге где разбегаются глаза и не понятно во что вложить деньги.
Роль точки входа выполняет вкладка с подборками и идеями, которые предлагают пользователю начать знакомство с инвестициями через известные и надежные компании.
62%
Активных клиентов КИТ Финанс перешли на нашу платформу вместо традиционных систем (Quik/Meta Trader)
29%
Клиентов стали использовать нашу платформу наравне с традиционными решениями
на 61%
Снизилась стоимость привлечения активного клиента после внедрения нашего решения (с 6000 рублей до 2 360 рублей)
21,5 %
Конверсия от установки приложения до открытия брокерского счета благодаря упрощенному и удаленному процессу открытия СМЭВ
Экран покупки облигаций
Облигации это самый популярный инструмент инвестиций у начинающих инвесторов, очень важно было сделать экран покупки облигаций максимально информативным и простым.
Мы решили показывать клиенту доходность, максимально приближенную к реальной, и встроили на экран слайдер который показывает размер прибыли инвестора в зависимоти от количества купленных бумаг и срока их погашения. Блок с датой выплаты купонного дохода наглядно показывает сколько осталось до выплаты и какой на данный момент НКД
Обучающие материалы в разных частях приложения
Когда человек решил инвестировать реальные деньги в ценные бумаги у него появляется страх их потери. Ощущение бесконечного каталога разных инстурментов только усугубляет сомнения. Было важно оградить новых пользователей от огромного количества вариантов, для решения этой проблемы по всему приложению есть подсказки, подборки/идеи, баннеры с информацией по каждому типу инструмента и советами «с чего начать» + обучающие сторис (о них будет ниже)
История
В любом приложении для инвестиций нужна кристально чистая и наглядная история операций, мы стремились к простоте истории расходов по карте, которую большинство пользователей видят в своих банковских приложениях.
У каждого типа расхода/дохода есть свои иконки, движения денег между счетами / вывод / пополнение наглядно показаны, по каждому событию можно посмотреть подробную справку, также учтены кейсы с ошибками по операциям и задержками в процессе их выполнения.
Регистрация новых пользователей и открытие счетов
Кол-во новых счетов – одна из важнейших метрик проекта, чтобы увеличить конверсию мы сделали полностью удаленное открытие счета онлайн и автоматический сканер паспорта с подстановкой полученных данных, которые мы разделили на несколько экранов чтобы не пугать потенциального клиента количеством полей ввода.
Кол-во открытых счетов – это одна из самых важных метрик нашего проекта, за открытые и пополненные нашими клиентами счета мы получали реальные деньги у брокера.
Открытие счетов и комиссии при выводе средств это основные статьи заработка проекта – а молодому стартапу как можно раньше нужно показать первую выручку инвесторам, поэтому эта часть приложения была особенно важна.
Чтобы повысить конверсию и не пугать потенциальных клиентов долгим вводом паспортных данных мы разбили процесс открытия счета на несколько экранов: от стандартного Email и номера телефона до паспортных данных и предпочитаемого типа счета.
Удаленное открытие счета и сканер паспорта с подстановкой данных (который мы совместили с необходимостью отправить фото паспорта брокеру) подняли конверсию от установки приложения до открытия счета до ≈20%
По ходу открытия счета мы знакомим пользователя с разными типами счетов, прямо во время регистрации пользователь может посмотреть обучающие слайды о преимуществах ИИС.
В конце обучающих слайдов мы встроили калькулятор, который на основе предполагаемого стиля и объема инвестиций посоветует один из двух типов ИИС.
Дизайн система и обучающие материалы
В сложном продукте, где у каждого инструмента много вариантов отображения и состояний, очень важно сохранять консистентность визуальных элементов, для этого мы использовали единую библиотеку элементов в Sketch.
Обучающие материалы, система иллюстраций и их тесты
Отдельным испытаением было подготовить для проекта более 50 обучающих слайдов, которые не должны быть скучными но при этом быть информативными, так я пришел к созданию небольшой дизайн системы для иллюстраций
Каждую серию обучающих сторис мы тестировали на реальных пользователях. Так нам удалось максимально упростить текстовки, поменять многие слайды, которые вызывали вопросы и сделать в итоге максимально универсальные и понятные обучающие материалы для новых пользователей.
Обучающие материалы в приложении это лейблы с подсказками, баннеры с краткими описаниями, вопросики рядом с инструментами/элементами на которые можно тапнуть и посмотреть, что это такое.
Но самое затратное по ресурсам это обучающие слайды, мы добавили в приложение «сторис» на несколько разных тем, с нарисованными с нуля слайдами в стилистике сервиса.
Для этого я создал персонажа, который появляется почти во всех слайдах в разных ситуациях, его облик, одежда и т.д. являются частью дизайн системы иллюстраций для слайдов, так мне удалось быстро собирать иллюстрации достаточного качества чтобы быстро тестировать слайды.
Векторные логотипы компаний
Не могу не показать файл с 1000+ векторных логотипов для каталога акций и облигаций, даже мощный Macbook Pro 15 с трудом его открывает.
Мы делегировали векторизацию и сбор логотипов и на это ушло мало ресурсов. В итоге мы получили библиотку логотипов в идеальном качестве для всех приложений которые идеально сочетаются с UI сервиса и между собой
Спасибо,
что посетили мой сайт
Если у вас есть критика, советы или вы хотите поработать
вместе – пишите мне любым удобным способом:
© 2013-2019 by Pavel Okrema