Давным-давно, в далеком апреле 20го года, в нашей студии работало человек двенадцать. И было много холодных продаж через LinkedIn — почти все из которых оказались тратой времени. Не рекомендуем. Но тогда мы познакомились с Vauban.
Раньше, мы занимались исключительно двумя вещами — брендингом и сайтами. И все. Именно их мы и сделали для Vauban. А затем они нас попросили сделать интерфейс.
Интерфейс растет из стиля.
Продукт
Vauban создают виртуальные контейнеры для денег — автоматизацией всех проволочек при организации фондов и проведении частных сделок. Проще инвестировать, или собрать средства чтобы купить какую-нибудь Мадонну Боттичелли, и ретурн всем высчитывается автоматически. Одна платформа заменяет шесть отдельных и очень дорогих специалистов.
Про наш опыт по созданию брендинга и сайта для Vauban мы уже рассказывали, можно прочитать здесь. То, что у нас уже были готовы сайт и брендинг очень помогло с интерфейсом — были заданы константы стиля и тона, и даже легкие UI наработки. Сложно представить, можно ли начать с интерфейса, а потом делать бренд. Технически можно, стартапам приходится выкатывать продукт который хоть как-то должен выглядеть. Но после раунда перекапывать все заново.
Задачи
Старый интерфейс был совсем не интуитивный — настолько, что клиенты просили менеджеров заходить в их аккаунты и проводить операции. Менеджеры тратили на это время вместо выполнения своих задач. Запутанная навигация, все фичи перемешаны в произвольном порядке, все это нужно было переделать. Нужно было создать общую и логичную архитектуру с разными уровнями доступа.
В этом проекте нам нужно было сделать:
- Новую архитектуру для платформы;
- Основы UX паттернов дашборда;
- Масштабируемый UI kit, с которым могла бы работать их внутренняя команда;
- Возможность пользоваться главными фичами с телефона.
Чтобы сделать проект на должном уровне, у нас были приглашенные звезды. Помимо прочих, Наталья Стурза, которая консультировала с архитектуры до первых версий дизайна. Для этой статьи попросили комментарий о работе с интерфейсами финтехов:
Специфика интерфейсов для финтех-проектов более сложная, потому что пользователи относятся к интерфейсу более аккуратно и внимательно — это их деньги, страшно что-то потерять, куда-то не туда перевести, нажать. И это первая сторона — нужно сделать максимально прозрачно с точки зрения комиссий, тарифов, юрисдикции и других вещей, которые пользователь может не понимать.
Вторая сторона – финансовые организации, которые часто проектируют из своего видения и понимания. Поэтому пользовательские сценарии в интерфейсах либо намеренно, либо по незнанию не содержат важных деталей, интерактивности, которая работает с ожиданиями. “На каком я сейчас шаге, что я получу в результате этого шага, из скольки шагов состоит процесс”.
Финтех сложная область — много функциональности, деталей, разветвлений, сценариев. Множество участников, команд, систем, регуляторов внутренних и внешних соединены в одних сценариях. Много данных — персональных, платежных, с которыми нужно аккуратно и правильно обращаться. Все это придает бóльшую сложность этой сфере и интерфейсам. Тем, кто проектирует, нужно найти лучшее решение между тем, что хочет клиент, как сделать для него прозрачный процесс и между тем, на что способен бизнес.
Когда приступаешь к проектированию интерфейса для английского финтеха, или любого зарубежного, нужно понимать, что там своя юрисдикция, своя отчетность, свои регуляторы и системы. Если ты тру-дизайнер и строишь именно сценарии, а не просто делаешь красиво, во всем этом нужно разобраться. Сложность проектирования в том, что для каждой новой страны нужно изучить всю матчасть.
Прототипы
Для прототипов мы взяли самые частые пользовательские сценарии на платформе.
Для спонсоров:
- Создание контейнера и приглашение инвесторов. Первая стадия для сделки или создания фонда;
- Юридические процессы. Сфокусировались на том, как создаются документы — ключевая часть процесса;
- Создание оффера. Использовали этот сценарий, чтобы посмотреть, как на практике заполняют большие формы (таких на платформе много).
Для инвесторов:
- Заявка на онбординг. Все инвесторы начинают с нее, и старый процесс был сложным и путанным;
- Сбор капитала, оплата;
- Выплата — когда инвесторы хотят свалить.
На этом этапе очень плотно работали с Реми, фаундером Vauban. На что он почти жаловался в ревью на Clutch:
How effective was the workflow between your team and theirs?
It was great. There was friction sometimes, but mostly because I wasn't super available and I would turn up late sometimes for the status calls. As a CEO, I have quite a few things to do.
Мы все еще часто работаем с Vauban, и теперь у них есть продакт менеджер, с которым мы и контактируем (а это продакт раньше был в Amazon UK).
Концепция и дашборд SPV
При создании сайтов мы сперва добиваем главную до 100% и на ее основе делаем все остальные страницы. Главная страница это, как правило, самая сложная часть сайта, и когда она закончена, можно масштабировать все стилистические и функциональные решения. А не возвращаться и переделывать раз за разом все страницы.
С этой же логикой подошли к интерфейсам — начали с самого сложного дашборда. За основу работы над всеми остальными интерфейсами взяли дашборд для владельцев SPV (special purpose vehicle). Концепция далее ложилась в основу масштабирования дизайна, и важная задача заключалась в том, чтобы проработать общую визуальную стилистику и максимум элементов на этом этапе. SPV дашборд идеально подходил для этой задачи.
SPV для сделок — это ключевой продукт Vauban. Важно было показать на одном экране как продвигается сбор средств и прочую критичную для спонсора информацию на одном экране, а не разбивать на множество страниц.
Для дашборда инвесторов нам нужно было сделать все как можно проще и дать понятные инструкции на каждом шагу. Все возможные задачи доступны в закладках.
От UX к UI
Для мобильной версии выделили самые главные функции и все остальное лихо срубили.
Основным шрифтом является надежный Inter, перекликающийся со стилем сайта.
Фирстиль Vauban яркий и броский, особенно по меркам финтехов.
A great design needs to be the sort that people love or hate. Well, I shouldn't speak of hate, stakeholders are very measured people. We are a very professional service and we have a website on a black background that looks very futuristic, and some people are just, "that's a little bit too much for me".
Мы взяли основные акценты той же самой палитры в немного смягченном варианте, чтобы пользоваться платформой было удобнее.
А дальше что?
Комментарий от Софии Нарбут, которая тогда была у нас пиэмом и вела этот проект:
Это был классный челлендж для нас. Это был первый раз, когда мы делали большой и сложный интерфейс с клиентом. В добавок к этому, индустрия крайне специфична.Мы очень плотно работали с CEO и у нас был саппорт внутренней экспертизы со стороны нашего ко-фаундера (Антона), который в том числе занимается Venture Capital. К нам также подключились внешние UX консультант и арт-директор с опытом в сложных финансовых сервисах. Это помогло нам выложиться по максимуму, да и ещё начать практику привлечения внешних экспертов на проекты.
В ходе этого проекта поняли, что работа с интерфейсами — прямое продолжение работы с фирстилями и сайтами. Брендинг задает стиль, сайт тестирует рамки этого стиля в цифровом и интерактивном пространстве. Из этого прямо вытекает UI+UX продукта, поддерживающий образ бренда.
С тех пор нас в студии стало полтинник, а Vauban подняли 6.3$ млн. Теперь у нас есть UI+UX юнит (да, через плюс), и мы делаем целых три вещи. Фирстили, сайты, интерфейсы.
В портфеле клиентов Embacy много ребят как из классических финтехов, так и крипто, defi и других нью-скульных финансов. Мы планируем активно наращивать уже имеющуюся UI+UX экспертизу в этом направлении.
Наконец в такой статье представлен интерфейс сложнее чем "форма обратной связи". молодцы! :)
Спасибо за приятный коммент :)
Комментарий недоступен
Это настолько всё сложно и не понятно, многие слова даже мне были не понятны) А кажется , что это так легко с первого впечатления.
Стараемся держать планку ;)
Если смотреть по предпоследней картинке видны мелкие UX недочеты:
- setup cost $1000, min target $7000, max target $10000
цифры лучше выровнять по правому краю, чтобы их можно было сравнить
- shareholding "35.9%", "35.9 %", "14%" и "4.91%"
разное форматирование дробной части, можно заполнить 0 ("35.90%", "14.00%") или пробелами ("35.9 %" , "14 %") с выравниванием вправо
- разноцветные доли shareholding сложно сравнить на одной прямой, можно перевести проценты в длину подчеркивания каждой строки (тем же цветом), будет проще понять разницу
В остальном достаточно приятный дизайн
Кстать, да цифры в таблицах мне б лично лучше зашли с выравниванием по правому краю относительно экрану. Так полегче будет сопоставлять цены.
Комментарий недоступен
М?)
Комментарий недоступен
Комментарий удален модератором
Ничего про UX и паттерны не увидел, если вы проектирование называете UX-ом, то у меня для вас плохие новости