Дизайн
Embacy
12 462

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

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

В закладки
Слушать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Было => Стало

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Делаем фирменные стили и сайты для айти-продуктов. Работаем со Skyeng, «Яндексом», МТС, ВТБ. Портфолио: http://be.net/embacy
{ "author_name": "Embacy", "author_type": "editor", "tags": ["\u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b","\u0431\u0440\u0435\u043d\u0434\u0438\u043d\u0433"], "comments": 69, "likes": 122, "favorites": 244, "is_advertisement": false, "subsite_label": "design", "id": 147076, "is_wide": true, "is_ugc": false, "date": "Mon, 03 Aug 2020 10:36:26 +0300", "is_special": false }
Сервисы
Коротко: продукты, о которых мы рассказали на Сбер Конф
Салют! Это Сбер, и вчера мы провели большую конференцию Сбер Конф (которая, кажется, стала темой дня). Мы изменились…
Объявление на vc.ru
0
69 комментариев
Популярные
По порядку
Написать комментарий...
30

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

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

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

Ответить
4

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

Было пять концов звезды - стало 4+4
Был угол 72 градуса - теперь углы по 90

ИМХО, лого зря переделали. Зато постебались классно.
Ибо теперь очень уж джъеппу порванную на британский флаг напоминает. И это лого французской компании ))

А в остальном - ну хз, заказчику нравится - и хорошо.

Ответить
–1

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

Ответить
5

Стоит читать как: «У заказчика были лишние деньги, не смогли не продать» )))

Ответить
0

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

Ответить
26

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

Ответить
4

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

Ответить

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

13

Господа специалисты, объясните непонимающему человеку, чем крут получившийся сайт?
Прочитал статью, зашел посмотрел сайт - ну ок, пасхалка с косарем. А за что все так высоко оценили его?

Ответить
1

Непохож на типичные сайты подобных платформ.

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

Ответить
10

Старый дизайн был лучше - спокойные цвета, лёгкость чтения и восприятия. Графика тоже была лучше, был красивый восходящий тренд иконок на главной. Логотип тоже был приятнее.
Новый - очень спорный дизайн.

Ответить
2

Спасибо за аргументрированную позицию. Она не так часто встречается в комментариях на виси))

Ответить
5

Было бы здорово в статье почитать аргументы, чем ваш новый, лучше их старого. Это ведь так редко попадается в статьях на vc. Аналитику там какую-нить добавить, если есть.
Ярче видимо значит, что будет лучше запоминаться. По мне так оба норм, но логитип новый так себе получился.

Ответить
7

Люблю чёрный и оранжевый, их сочетание прекрасно и выразительно. Отличный, оригинальный проект, награда заслужена, вы молодцы, так держать!

Ответить
3

Спасибо, мы тоже, и были рады, когда из предложенных, клиент выбрал эту палитру)

Ответить
4

Время такое, минимализм, гротекс иллюстрации, я всё таки за дизайн который прекрасен и современен вне довлеющих и навязчивых трендов.

Сделать красиво и современно и при этом не впасть монотонный мейнстрим, это настоящий подвиг для дизайнера.

Ответить
7

Класс

Ответить
1

Спасибо, мы старались :)

Ответить
0

На вашем сайте https://embacy.io/ не работает кнопка вверх в подвале, заметил чет, не знаю говорил кто или нет)
macos catalina chrome

Ответить
4

Можно поменять старый и новый местами и эмоции будут те же

Ответить
4

Ужасная работа над логотипом. За такое надо сажать в дизайнерскую тюрьму. Было что то со смыслом, стало что то с  г*вном.
В остальном прекрасно. 

Ответить
4

Отличная работа! По сравнению с предыдущим дизайном, новый выделяется и запоминается среди множества сайтов которые мы посещаем каждый день.

Ответить
3

Тоесть просто взяли написали в LinkedIn и предложили им новый дизайн а они согласились?

Ответить
3

Написали основателю, ему зашло наше портфолио, мы созвонились и через пару дней запустили проект :)

Ответить
3

хоть кто то делает не говно

Ответить
3

Очень круто, ребят! Только рассматривал кейс на Бихейнсе для Sparbank швейцарского, захожу на вс и вижу вашу проделанную работу!

Сдержанно, строго и функционально! кайф!
Люди, которые негативно или нейтрально отзываются об этом проекте - или без вкуса, или просто никак не связаны с дизайном и разработкой ребрендингов, не берите близко к сердцу :)

Шрифт - 10/10

Браво!

Ответить
0

откуда значек логотипа? что-то очень знакомое.

Ответить
1

Отсюда, например))

Ответить
0

Про новый лого? Рунический символ 8-конечной звезды у скандинавов и славян.

Ответить
3

Нет слов! Отличный результат. Мне нравится все – цвета, типографика, сетки и умные иллюстрации. Ребята, продолжайте в том же духе!

Следует обратить внимание на поведение пользователей и посмотреть на каждый раздел внимательнее, к примеру https://vauban.io/category/hedge-funds здесь важно, чтобы пользователь перешел к изучению контента, так как наверняка пользователи будут заходить в него регулярно и следить за обновлениями, но в первом экране на ноутбуке ничего не видно – до контента скролить достаточно долго и скучно. Но если этот проект на поддержке, думаю, что вы сможете довести все до отличного результата!

Ответить
0

Спасибо, Дмитрий :)

Ответить
3

Пару дней назад заходил на этот сайт )) и даже не знал, что увижу статью про него )) Мне очень понравился сайт, типографика, сетка, размеры, иконки, все сделанно очень круто и со вкусом, со своим вкусом, а не просто украденным (такой стиль есть везде, но все же, сделать свое труднее) кто-то выше написал, что прошлый сайт был лучше? :D ну мне нравится прежний и он выглядит более строго и сочно (как микс) для 2020 это самое то что нужно!! Пацаны ваще ребята, молдоцы и красавцы, очень крутая и классная работа! Так держать !!

Ответить
1

Это была первая ассоциация у нашего копирайтера))

Ответить
0

Ребята, без обид, просто напомнило) Про дизайн судить не могу, но с проектом и призом поздравляю)

Ответить
1

Спасибо! Community - топ сериал)

Ответить
1

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

Ответить
4

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

Ответить
2

статью не дочитал (не моя тематика) и ничего не понял, но вы достучались до моего сердца!

Ответить
2

Большие молодцы. Многим дизайн не зашёл, однако смотреть стоит не только на красоту и легкость восприятия, а в контексте самого продукта и его ЦА. Уверен, что люди в Behance ответственные за выбор победителя в номинации - подходили к процессу более детально, чем мы, простые прохожие. В общем - очень рад за ваш успех! Жду ещё успешных кейсов)

Ответить
2

Не в обиду ребятам (все круто, если клиент доволен), но когда продукт отдаёт дизайн на аутсорс, то что-то сильно не в порядке с продуктом.

Изменения UI и тем более UX должны быть обусловлены решением проблем пользователей, а не желанием сделать «покрасивее», тем более что «покрасивее» сильно субъективный параметр.

Агентство выиграло звёздочек, а что выиграл продукт? В лучшем случае ничего.

Ответить
1

Сам себя не похвалишь - никто не похвалит.

Ответить
1

У вас крутые проекты обычно, но этот не зашел =( Этот тоже верстался на webflow?

Ответить
1

Воу, вот это да(
Да, этот, конечно же, тоже на Webflow любимом:
https://webflow.com/website/VAUBAN

Ответить
–1

Раз уж такое дело, еще технических вопросов накидаю =) Клиент остается на хостинге у webflow или прикручивается кастомная cms и передается клиенту? И как себя чувствует сайт вне экосистемы, или же удобней все оставлять внутри сервиса?

p/s Ну все, теперь точно ушел учиться верстать в вебфлоу )

Ответить
1

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

Ответить
0

У них онлайн-сервис на лету или просто контентный сайт?

Ответить
0

Мда, оригинальное лого было с историей, а стало неинтересным ежом :-(

Ответить
0

Контейнер для капитала как раз и есть форт, крепость, защита капитала. Основатель с аристократическим позывом создавал свой логотип, а новый дизайн сделал из него простолюдина, без геральдических смыслов.

Ответить
1

Красиво

Ответить
1

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

Ответить
1

«Нужно показать профессионализм»
Мда... показали.

Ответить
1

Конверсия в лиды увеличилась? 

Ответить
1

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

Ответить
1

Старый лого был гораздо лучше. Лучше бы прошли мимо

Ответить
1

Мне понравилось, в целом напомнило IBM Design Language, строгие формы, аккуратные линии всегда будут в моде.

Ответить
1

Крутые ребята и отличная работа! 👍

Ответить
1

Понравилось, молодцы!🔥 Жаль только не описали самое интересное, этап поиска и продажи этому клиенту. 

Ответить
1

Молодцы👍
Типографика, композиция все класс.
Лучше чем было, а было не плохо.
P.S. Люблю Вебфлоу :))

Ответить
0

Отличный кейс. Вырос контраст, сам сайт стал эмоциональнее. Лайк

Ответить
0

И шо дает синий шильдик behance? Ну в сутки получите 1000 лайков, ну чуть больше будет лидов, ну почешите эго и все :)

Ответить
1

Что может быть лучше, чем почесать свое эго? xD

Ответить
0

main -> "Get Started" (https://structurer.vauban.io/) - скроллишь вниз и блок-схема справа сильно дергается. Не круто. 

Ответить
0

mac os mojave/catalina + chrome 84.0.4147.105

Ответить
0

Кстати неплохой калькулятор

Ответить
0

@Max Okhrimenko почему минусанул? Ну-ка аерни + обратно в карму.

Ответить
0

Черно-бело-оранжевая палитра портала...где-то я это видел, ах да, это же французский Orange :0)

Ответить
0

В логотипе 10-конечная звезда превратилась в 8-конечную.

Ответить
0

Нуууу хз ничего нового и интересного в дизайне не увидел

Ответить

Комментарии

null