Как за месяц мы обновили фирстиль и сайт лондонскому финтеху и получили главную награду Behance

Мы, Embacy, пришли к Vauban и предложили им освежить стиль и сайт. Они посмотрели на наше портфолио и согласились. Звучит просто, как будто не было пары сотен безрезультатных офферов финтех-продуктам и десятков душных созвонов. В общем, в начале этого проекта было слово hi в холодном письме в Linkedin.

Как за месяц мы обновили фирстиль и сайт лондонскому финтеху и получили главную награду Behance

Это не кейс-стади, это кул-стори про наш первый проект из Лондона.

Не с начала: что получилось в итоге

Историю про создание стиля и сайта неинтересно читать, если не видишь результат. Читаешь и читаешь, а в конце непонятно что. Поэтому лучше сразу посмотрите:

Как за месяц мы обновили фирстиль и сайт лондонскому финтеху и получили главную награду Behance
Как за месяц мы обновили фирстиль и сайт лондонскому финтеху и получили главную награду Behance

О продукте и задаче

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

У них уже был неплохой сайт:

Как за месяц мы обновили фирстиль и сайт лондонскому финтеху и получили главную награду Behance

Это усложняло задачу, потому что, если результат не будет на голову выше, то непонятно, зачем были потрачены деньги.

Главные требования к конечному результату:

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

Стилистики: журналы, типографика, чертежи

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

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

Референсы для этой концепции
Референсы для этой концепции

Швейцарская типографика. Выглядит стильно, и выглядит строго. И выглядит так уже лет сто, и продержится еще сто, не меньше.

Как за месяц мы обновили фирстиль и сайт лондонскому финтеху и получили главную награду Behance

Чертежи. Подошли с инженерным подходом. Переосмыслили оригинальный сайт и цветовую палитру.

Как за месяц мы обновили фирстиль и сайт лондонскому финтеху и получили главную награду Behance

Доработка стиля: смешиваем, и даже немного взбалтываем

Всем трем стилям чего-то не хватало. Поэтому мы смешали элементы из трех пробирок:

  • Палитру первого стиля;
  • Интересную типографику и сетку из второго;
  • И иллюстрации из третьего.

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

Как за месяц мы обновили фирстиль и сайт лондонскому финтеху и получили главную награду Behance

Логотип: историческая минутка

Его обновление не входило в план работ, но мы не смогли пройти мимо:

Было => Стало
Было => Стало

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

Как за месяц мы обновили фирстиль и сайт лондонскому финтеху и получили главную награду Behance

Сайт: попали в свою же сетку

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

Как за месяц мы обновили фирстиль и сайт лондонскому финтеху и получили главную награду Behance

А для шрифтов отошли от вычурных засечек и перешли к геометрическому гротеску Euclid Circular, что добавило и технологичности, и подвязало все в стиль.

From Russia With Love: На Сенокосе, 1929

Мы любим нашу культуру, оказалось, что основатель Vauban, француз Реми, тоже. Онбординг в продукт он делал на примере пользователя Rodion Raskolnikov. А мы нарисовали косаря из картины Малевича в блоке про сделки по искусству:

Слева наш косарь, а справа косарь с чемоданом, которого они теперь используют в LinkedIn и своем блоге
Слева наш косарь, а справа косарь с чемоданом, которого они теперь используют в LinkedIn и своем блоге

Почему Малевич? Просто во время проекта, сидя на карантине, наш иллюстратор собирала пазл из Третьяковки:

Карантин закончился и пазл уже разобрали
Карантин закончился и пазл уже разобрали

А что в итоге-то?

Уже в середине проекта Реми проникся и спрашивал, как мы придумали наш процесс. А после релиза превратился в нашего амбассадора — к нам уже пришли несколько лидов по его рекомендации:

Как за месяц мы обновили фирстиль и сайт лондонскому финтеху и получили главную награду Behance

Кейс на Behance стал нашим первым проектом, получившим их главную награду «Best of Behance», а также Honorable Mention и Mobile Excellence на Awwwards.

А мы продолжили работу над полной пересборкой UX и UI интерфейса, которая идет уже больше 10 спринтов, превратив Vauban в одного из наших крупнейших клиентов.

А что сам маркиз де Вобан сказал бы о нашей работе? Наверное, что-нибудь по-французски. Мы не говорим по-французски, но вот что можем сказать: иногда чтобы произошло что-то хорошее, нужны сотни сообщений в Linkedin и десятки душных созвонов. В нашем случае, они того стоили.

136136
69 комментариев

«Его обновление не входило в план работ, но мы не смогли пройти мимо»

Зря мимо обновления лого не прошли.

В оригинальном лого заложены шарм, история, смысл.
В новом же — только симметрия. Я бы сравнил его с петлёй колючей проволоки.

31
Ответить

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

6
Ответить

Согласны, что была красивая история, не смогли её не рассказать))

1
Ответить

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

1
Ответить

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

29
Ответить

Спасибо за мнение, прошлый дизайн был действительно неплохой)

5
Ответить