{"id":13466,"url":"\/distributions\/13466\/click?bit=1&hash=891d339b00b86120568ea8e4296ded112a42876a976e2fd335004400f35cbd30","title":"\u0427\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u044f\u0442, \u0447\u0438\u0442\u0430\u044e\u0442 \u0438 \u043a\u0443\u0434\u0430 \u0445\u043e\u0434\u044f\u0442 \u0432\u0430\u0448\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"24bb823c-c595-5fc8-be0f-fba9e89237c2","isPaidAndBannersEnabled":false}
Дизайн
Embacy

Как мы начали заниматься интерфейсами

Давным-давно, в далеком апреле 20го года, в нашей студии работало человек двенадцать. И было много холодных продаж через LinkedIn — почти все из которых оказались тратой времени. Не рекомендуем. Но тогда мы познакомились с Vauban.

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

Интерфейс растет из стиля.

Продукт

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

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

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

Задачи

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

В этом проекте нам нужно было сделать:

  • Новую архитектуру для платформы;
  • Основы UX паттернов дашборда;
  • Масштабируемый UI kit, с которым могла бы работать их внутренняя команда;
  • Возможность пользоваться главными фичами с телефона.

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

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

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

Наталья Стурза
UX Research & Product Design Expert

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

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

Наталья Стурза
UX Research & Product Design Expert

Прототипы

Для прототипов мы взяли самые частые пользовательские сценарии на платформе.

Для спонсоров:

  • Создание контейнера и приглашение инвесторов. Первая стадия для сделки или создания фонда;
  • Юридические процессы. Сфокусировались на том, как создаются документы — ключевая часть процесса;
  • Создание оффера. Использовали этот сценарий, чтобы посмотреть, как на практике заполняют большие формы (таких на платформе много).

Для инвесторов:

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

На этом этапе очень плотно работали с Реми, фаундером 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 экспертизу в этом направлении.

Дима Мороз
Head of UI+UX, Embacy
0
11 комментариев
Написать комментарий...
Сергей Сергеев

Наконец в такой статье представлен интерфейс сложнее чем "форма обратной связи". молодцы! :)

Ответить
Развернуть ветку
Embacy
Автор

Спасибо за приятный коммент :)

Ответить
Развернуть ветку
Igor Star

Мощно, как всегда 🎸

Ответить
Развернуть ветку
Александр Федоров

Это настолько всё сложно и не понятно, многие слова даже мне были не понятны) А кажется , что это так легко с первого впечатления.

Ответить
Развернуть ветку
Embacy
Автор

Стараемся держать планку ;)

Ответить
Развернуть ветку
Quiz

Если смотреть по предпоследней картинке видны мелкие 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 сложно сравнить на одной прямой, можно перевести проценты в длину подчеркивания каждой строки (тем же цветом), будет проще понять разницу
В остальном достаточно приятный дизайн

Ответить
Развернуть ветку
Sergey Bukharev

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

Ответить
Развернуть ветку
Serj Koss

Ануар расширил сферу интересов и делает контейнеры для денег?)

Ответить
Развернуть ветку
Embacy
Автор

М?)

Ответить
Развернуть ветку
Serj Koss
Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Михаил Хананашвили

Ничего про UX и паттерны не увидел, если вы проектирование называете UX-ом, то у меня для вас плохие новости

Ответить
Развернуть ветку
Читать все 11 комментариев
null