Назад

Давай упрощай: как с помощью дизайна привлечь новичков в сложный мир инвестиций. Кейс Purrweb

Время чтения: 6 минут

Содержание

    Привет, я Кристина Спиридонова, менеджер по работе с клиентами в Purrweb. На примере платформы для копи-трейдинга Fintarget расскажу, как с помощью UX/UI дизайна сделать инвестиции понятными для новичков и в 2 раза сократить время на разработку и запуск MVP.

    Инвестиции — это сложно. Чтобы не потерять деньги уже сегодня, нужно хорошо разбираться в теме. Знать, какие акции покупать, какие продавать, разбираться в финансовых показателях. Таким выглядит мир инвестиций для новичков. Им вроде хочется, но колется. Они медлят, а банки и брокеры теряют потенциальных инвесторов. А ведь нужно просто правильно упаковать существующие инструменты, чтобы было понятно всем.

    В проекте с БКС-брокер мы нашли баланс между горящими сроками, сложной тематикой и согласованиями — поблочную разработку UI/UX дизайна для MVP, и в итоге сделали понятную для новичков инвестиционную платформу всего за 1,5 месяца вместо прогнозируемых трех.

    Кейс будет полезен:

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

    А теперь обо всем в деталях.

    С кем и над чем работаем?

    БКС-брокер, одна из крупнейших российских компаний на рынке ценных бумаг.

    Раньше инвесторы приходили к ним на стадии, когда были «обучены» для самостоятельной работы. Хотя у БКС был инструмент, идеально подходящий для новичков — автоследование. Это когда торговые поручения выполняются автоматически на основе выбранной инвестиционной стратегии. Услуга была популярна среди текущих клиентов БКС, но во «внешнем» мире о ней никто не знал.

    Ребята выдвинули гипотезу, что смогут привлечь больше клиентов, если покажут, что инвестиции — это просто, даже если у тебя не так много опыта. Чтобы быстро протестировать гипотезу, команда БКС решила сделать MVP — минимальный жизнеспособный продукт.

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

    Продукт назвали Fintarget — магазин инвестиционных стратегий.

    Особенности создания продукта «по обе стороны баррикад»

    У БКС была своя команда разработки, для MVP им не хватало дизайн-экспертизы. Обычно мы разрабатываем продукт целиком, погружаясь во все тонкости уже на старте и закрывая UI/UX и dev-части самостоятельно. На этом проекте привычный «комплексный» формат работы сменился на разработку «по обе стороны баррикад». Коллективное создание проекта внесло коррективы в рабочий процесс — добавился этап согласования с технической командой заказчика.

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

    Со стороны БКС с нами работали проектный и продакт-менеджеры Fintarget, всего два человека — необычно для такой большой компании. Ребята с самого старта наладили внутреннюю коммуникацию, агрегировали правки в одном списке — по итогу мы общались только с проектным менеджером. Играть в «глухой» телефон не пришлось, в случае вопросов мы четко понимали, кто поможет их закрыть.

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

    Разработка и дизайн проекта шли параллельно, поэтому мы придерживались такого режима работы:

    1. Делаем новые экраны. 
    2. Согласовываем их. 
    3. Один дизайнер переключается на новый экран, а второй работает над адаптивами и запросами от разработчиков БКС.

    В принципе, этот же подход можно применять, если вы обращаетесь в агентство как за UI/UX услугами, так и разработкой.

    Декомпозируем задачу на блоки

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

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

    1. Первым делом начали именно с карточки стратегии и витрины стратегий
    2. Затем перешли к профилю пользователя
    3. Потом перешли к важным, но не срочным элементам сайта: разделам «FAQ» и «О проекте»

    Эволюция карточек инвестиционных стратегий

    Первая итерация — это про «прощупать почву»: понять в правильную ли сторону движемся, какие принципиальные моменты нужно учесть — определить пожелания и видение клиента на тестовом варианте интерфейса проще, чем в вакууме.

    При разработке первой версии карточек инвестиционных стратегий мы ориентировались на текстовое ТЗ заказчика, но понимали, что «текстовое представление» может сильно не соответствовать визуальному результату. Вот что получилось:

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

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

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

    На этой стадии согласование прошло быстро — клиент утвердил макет. Но хотелось «еще поиграть с креативностью».

    Так выглядит «боевой» макет:

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

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

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

    Например, страницу самой стратегии согласовали быстро:

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

    Создаем личный кабинет пользователя

    В профиле самое главное для пользователя — это ответ на вопрос «как у меня дела?». Иначе говоря, какая доходность (успехи-падения) у подключенного инвестиционного профиля. Это был наш уровень понимания задачи, от этого и шли.

    Эта страница тоже создавалась в несколько итераций. Детали от аналитиков и маркетологов клиента помогали понять некоторые тонкости и ограничения.

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

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

    А так выглядит биллинг по каждому счету:

    Для работы со счетом мы создали простые формы с большими кнопками и короткие информативные уведомления о совершенных действиях:

    Добавляем базу знаний и недостающие страницы

    База знаний — очень важный блок для новичков. Мы разделили вопросы на категории, а самые популярные показали прямо на первом экране:

    Также доработали главную страницу и страницу О проекте.

    Поскольку Fintarget работает в веб-версии, мы сделали визуализации не только под 1280 и 320, но и под 768, 1024, 1440. Обычно мы жертвовали промежуточными состояниями (особенно 768 и 1024) и отдавали это на откуп разработчиков. А здесь заказчик потребовал детальной прорисовки. В целом это очень круто, но мы этого не ждали 🙂 Теперь так стараемся всем нашим клиентам продавать: на это соглашаются не все, ведь ресайзы — это доп.время и доп.бюджет.

    Задача выполнена!

    Проект уже запущен, посмотреть результат нашей совместной работы можно тут — fintarget.ru.

    Менеджмент
    • Дмитрий Ларин
    Дизайн
    • Анастасия Мартьян