Как мы начали заниматься интерфейсами
Давным-давно, в далеком апреле 20го года, в нашей студии работало человек двенадцать. И было много холодных продаж через LinkedIn — почти все из которых оказались тратой времени. Не рекомендуем. Но тогда мы познакомились с Vauban.
Раньше, мы занимались исключительно двумя вещами — брендингом и сайтами. И все. Именно их мы и сделали для Vauban. А затем они нас попросили сделать интерфейс.
Интерфейс растет из стиля.
Продукт
Vauban создают виртуальные контейнеры для денег — автоматизацией всех проволочек при организации фондов и проведении частных сделок. Проще инвестировать, или собрать средства чтобы купить какую-нибудь Мадонну Боттичелли, и ретурн всем высчитывается автоматически. Одна платформа заменяет шесть отдельных и очень дорогих специалистов.
Про наш опыт по созданию брендинга и сайта для Vauban мы уже рассказывали, можно прочитать здесь. То, что у нас уже были готовы сайт и брендинг очень помогло с интерфейсом — были заданы константы стиля и тона, и даже легкие UI наработки. Сложно представить, можно ли начать с интерфейса, а потом делать бренд. Технически можно, стартапам приходится выкатывать продукт который хоть как-то должен выглядеть. Но после раунда перекапывать все заново.
Задачи
Старый интерфейс был совсем не интуитивный — настолько, что клиенты просили менеджеров заходить в их аккаунты и проводить операции. Менеджеры тратили на это время вместо выполнения своих задач. Запутанная навигация, все фичи перемешаны в произвольном порядке, все это нужно было переделать. Нужно было создать общую и логичную архитектуру с разными уровнями доступа.
В этом проекте нам нужно было сделать:
- Новую архитектуру для платформы;
- Основы UX паттернов дашборда;
- Масштабируемый UI kit, с которым могла бы работать их внутренняя команда;
- Возможность пользоваться главными фичами с телефона.
Чтобы сделать проект на должном уровне, у нас были приглашенные звезды. Помимо прочих, Наталья Стурза, которая консультировала с архитектуры до первых версий дизайна. Для этой статьи попросили комментарий о работе с интерфейсами финтехов:
Прототипы
Для прототипов мы взяли самые частые пользовательские сценарии на платформе.
Для спонсоров:
- Создание контейнера и приглашение инвесторов. Первая стадия для сделки или создания фонда;
- Юридические процессы. Сфокусировались на том, как создаются документы — ключевая часть процесса;
- Создание оффера. Использовали этот сценарий, чтобы посмотреть, как на практике заполняют большие формы (таких на платформе много).
Для инвесторов:
- Заявка на онбординг. Все инвесторы начинают с нее, и старый процесс был сложным и путанным;
- Сбор капитала, оплата;
- Выплата — когда инвесторы хотят свалить.
На этом этапе очень плотно работали с Реми, фаундером Vauban. На что он почти жаловался в ревью на Clutch:
Мы все еще часто работаем с Vauban, и теперь у них есть продакт менеджер, с которым мы и контактируем (а это продакт раньше был в Amazon UK).
Концепция и дашборд SPV
При создании сайтов мы сперва добиваем главную до 100% и на ее основе делаем все остальные страницы. Главная страница это, как правило, самая сложная часть сайта, и когда она закончена, можно масштабировать все стилистические и функциональные решения. А не возвращаться и переделывать раз за разом все страницы.
С этой же логикой подошли к интерфейсам — начали с самого сложного дашборда. За основу работы над всеми остальными интерфейсами взяли дашборд для владельцев SPV (special purpose vehicle). Концепция далее ложилась в основу масштабирования дизайна, и важная задача заключалась в том, чтобы проработать общую визуальную стилистику и максимум элементов на этом этапе. SPV дашборд идеально подходил для этой задачи.
SPV для сделок — это ключевой продукт Vauban. Важно было показать на одном экране как продвигается сбор средств и прочую критичную для спонсора информацию на одном экране, а не разбивать на множество страниц.
Для дашборда инвесторов нам нужно было сделать все как можно проще и дать понятные инструкции на каждом шагу. Все возможные задачи доступны в закладках.
От UX к UI
Для мобильной версии выделили самые главные функции и все остальное лихо срубили.
Основным шрифтом является надежный Inter, перекликающийся со стилем сайта.
Фирстиль Vauban яркий и броский, особенно по меркам финтехов.
Мы взяли основные акценты той же самой палитры в немного смягченном варианте, чтобы пользоваться платформой было удобнее.
А дальше что?
Комментарий от Софии Нарбут, которая тогда была у нас пиэмом и вела этот проект:
В ходе этого проекта поняли, что работа с интерфейсами — прямое продолжение работы с фирстилями и сайтами. Брендинг задает стиль, сайт тестирует рамки этого стиля в цифровом и интерактивном пространстве. Из этого прямо вытекает UI+UX продукта, поддерживающий образ бренда.
С тех пор нас в студии стало полтинник, а Vauban подняли 6.3$ млн. Теперь у нас есть 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-ом, то у меня для вас плохие новости