Как за месяц мы обновили фирстиль и сайт лондонскому финтеху и получили главную награду Behance
Мы, Embacy, пришли к Vauban и предложили им освежить стиль и сайт. Они посмотрели на наше портфолио и согласились. Звучит просто, как будто не было пары сотен безрезультатных офферов финтех-продуктам и десятков душных созвонов. В общем, в начале этого проекта было слово hi в холодном письме в Linkedin.
Это не кейс-стади, это кул-стори про наш первый проект из Лондона.
Не с начала: что получилось в итоге
Историю про создание стиля и сайта неинтересно читать, если не видишь результат. Читаешь и читаешь, а в конце непонятно что. Поэтому лучше сразу посмотрите:
О продукте и задаче
Vauban — виртуальный контейнер для денег. Когда ты создаешь фонд или поднимаешь раунд — собирать деньги себе на карту не лучшая практика. Vauban занимаются автоматизацией формирования юридических структур для организации фондов и проведения частных сделок. Ребята помогают это делать просто и удобно через свой продукт.
У них уже был неплохой сайт:
Это усложняло задачу, потому что, если результат не будет на голову выше, то непонятно, зачем были потрачены деньги.
Главные требования к конечному результату:
- Строгий — потому что продукт в первую очередь для инвесторов, а это серьезные ребята и лендингов стартапов-однодневок они уже навидались, нужно показать профессионализм;
- Технологичный — это финтех-продукт все-таки, а не юридическая фирма;
- Простой и понятный — они делают сложный процесс проще, не должно быть визуальных перегрузов;
- Стильный — сайт должен выделяться и запомниться, это дефолтный пункт всех наших проектов;
- ROMI 500%. Шутка.
Стилистики: журналы, типографика, чертежи
Мы не команда из Марин Абрамович и Марселей Дюшанов, но каждую работу начинаем с концепции. Vauban во всех коммуникациях описывал себя через контейнер, поэтому за метафорой далеко ходить было не нужно, и мы сосредоточились на стилистиках:
Финансовые журналы. Стилистика финансовых журналов сразу дает нам нужную солидность, выглядит стильно и подходит для аудитории. Шрифты с засечками слишком нетехнологичны, балансируем диджитальными иллюстрациями.
Швейцарская типографика. Выглядит стильно, и выглядит строго. И выглядит так уже лет сто, и продержится еще сто, не меньше.
Чертежи. Подошли с инженерным подходом. Переосмыслили оригинальный сайт и цветовую палитру.
Доработка стиля: смешиваем, и даже немного взбалтываем
Всем трем стилям чего-то не хватало. Поэтому мы смешали элементы из трех пробирок:
- Палитру первого стиля;
- Интересную типографику и сетку из второго;
- И иллюстрации из третьего.
Такая химическая реакция может вызвать взрыв сами-догадайтесь-чего у дизайнеров, либо у клиента, но у нас получился освежающий коктейль.
Логотип: историческая минутка
Его обновление не входило в план работ, но мы не смогли пройти мимо:
Старый логотип был не просто так: само название продукта, Vauban, отсылает к маркизу де Вобану, французскому военному инженеру семнадцатого века. А на логотипе — его фортификации. Решили, что осады сотен лет назад уже не очень актуальны, и привели логотип в этот год, сохранив общую форму.
Сайт: попали в свою же сетку
Только утвердив, что на сайте будет интересная сетка мы поняли, что среди нас нет гуру этого вопроса. Поэтому пришлось его призвать, чтобы все получилось если не по золотому сечению, то по золотому типографическому стандарту:
А для шрифтов отошли от вычурных засечек и перешли к геометрическому гротеску Euclid Circular, что добавило и технологичности, и подвязало все в стиль.
From Russia With Love: На Сенокосе, 1929
Мы любим нашу культуру, оказалось, что основатель Vauban, француз Реми, тоже. Онбординг в продукт он делал на примере пользователя Rodion Raskolnikov. А мы нарисовали косаря из картины Малевича в блоке про сделки по искусству:
Почему Малевич? Просто во время проекта, сидя на карантине, наш иллюстратор собирала пазл из Третьяковки:
А что в итоге-то?
Уже в середине проекта Реми проникся и спрашивал, как мы придумали наш процесс. А после релиза превратился в нашего амбассадора — к нам уже пришли несколько лидов по его рекомендации:
Кейс на Behance стал нашим первым проектом, получившим их главную награду «Best of Behance», а также Honorable Mention и Mobile Excellence на Awwwards.
А мы продолжили работу над полной пересборкой UX и UI интерфейса, которая идет уже больше 10 спринтов, превратив Vauban в одного из наших крупнейших клиентов.
А что сам маркиз де Вобан сказал бы о нашей работе? Наверное, что-нибудь по-французски. Мы не говорим по-французски, но вот что можем сказать: иногда чтобы произошло что-то хорошее, нужны сотни сообщений в Linkedin и десятки душных созвонов. В нашем случае, они того стоили.
«Его обновление не входило в план работ, но мы не смогли пройти мимо»
Зря мимо обновления лого не прошли.
В оригинальном лого заложены шарм, история, смысл.
В новом же — только симметрия. Я бы сравнил его с петлёй колючей проволоки.
Комментарий недоступен
Согласны, что была красивая история, не смогли её не рассказать))
да, жаль, что с обновлением лого потеряли историю. А могли бы бережно переработать. Эх
На мой взгляд прежний дизайн был лучше. Цветовая гамма была спокойней, и понятней. На новом какой-то перегруз с оранжево-черным от которого глаза начинают вытекать. Приходится вглядываться во все схемы чтобы понять что на них изображено.
Спасибо за мнение, прошлый дизайн был действительно неплохой)
Комментарий удален модератором
Господа специалисты, объясните непонимающему человеку, чем крут получившийся сайт?
Прочитал статью, зашел посмотрел сайт - ну ок, пасхалка с косарем. А за что все так высоко оценили его?
Непохож на типичные сайты подобных платформ.
Компании, в первую очередь, дали "лицо". Превратили обычный неплохой сайт в самобытный продукт, со своим позиционированием и настроением. Т.е. люди понимают задачу бизнеса и концентрируются на ней, а не делают просто красиво.
Старый дизайн был лучше - спокойные цвета, лёгкость чтения и восприятия. Графика тоже была лучше, был красивый восходящий тренд иконок на главной. Логотип тоже был приятнее.
Новый - очень спорный дизайн.
Спасибо за аргументрированную позицию. Она не так часто встречается в комментариях на виси))
Люблю чёрный и оранжевый, их сочетание прекрасно и выразительно. Отличный, оригинальный проект, награда заслужена, вы молодцы, так держать!
Спасибо, мы тоже, и были рады, когда из предложенных, клиент выбрал эту палитру)
Класс
Спасибо, мы старались :)
Можно поменять старый и новый местами и эмоции будут те же
Ужасная работа над логотипом. За такое надо сажать в дизайнерскую тюрьму. Было что то со смыслом, стало что то с г*вном.
В остальном прекрасно.
Отличная работа! По сравнению с предыдущим дизайном, новый выделяется и запоминается среди множества сайтов которые мы посещаем каждый день.
Комментарий недоступен
Написали основателю, ему зашло наше портфолио, мы созвонились и через пару дней запустили проект :)
хоть кто то делает не говно
Очень круто, ребят! Только рассматривал кейс на Бихейнсе для Sparbank швейцарского, захожу на вс и вижу вашу проделанную работу!
Сдержанно, строго и функционально! кайф!
Люди, которые негативно или нейтрально отзываются об этом проекте - или без вкуса, или просто никак не связаны с дизайном и разработкой ребрендингов, не берите близко к сердцу :)
Шрифт - 10/10
Браво!
откуда значек логотипа? что-то очень знакомое.
М?)
Отсюда, например))
Про новый лого? Рунический символ 8-конечной звезды у скандинавов и славян.
Нет слов! Отличный результат. Мне нравится все – цвета, типографика, сетки и умные иллюстрации. Ребята, продолжайте в том же духе!
Следует обратить внимание на поведение пользователей и посмотреть на каждый раздел внимательнее, к примеру https://vauban.io/category/hedge-funds здесь важно, чтобы пользователь перешел к изучению контента, так как наверняка пользователи будут заходить в него регулярно и следить за обновлениями, но в первом экране на ноутбуке ничего не видно – до контента скролить достаточно долго и скучно. Но если этот проект на поддержке, думаю, что вы сможете довести все до отличного результата!
Спасибо, Дмитрий :)
Пару дней назад заходил на этот сайт )) и даже не знал, что увижу статью про него )) Мне очень понравился сайт, типографика, сетка, размеры, иконки, все сделанно очень круто и со вкусом, со своим вкусом, а не просто украденным (такой стиль есть везде, но все же, сделать свое труднее) кто-то выше написал, что прошлый сайт был лучше? :D ну мне нравится прежний и он выглядит более строго и сочно (как микс) для 2020 это самое то что нужно!! Пацаны ваще ребята, молдоцы и красавцы, очень крутая и классная работа! Так держать !!
Это была первая ассоциация у нашего копирайтера))
"Простой и понятный — они делают сложный процесс проще, не должно быть визуальных перегрузов;"
.
Этот пункт мимо.
Ну кстати, да. Они сделали сложные иллюстрации для сложных процессов, как будто сложность это фича и ее надо подчеркнуть и приукрасить. Но кстати, если посмотреть на совет директоров этой компании, то понятно почему приняли — что то в духе "у нас сложный и технологичный продукт и мы гордимся этим". То есть чуваки в пиджаках, сильно за 30 хотели "статус" и они его получили. Это в общем не плохо и не хорошо, только не понятно зачем.
статью не дочитал (не моя тематика) и ничего не понял, но вы достучались до моего сердца!
Большие молодцы. Многим дизайн не зашёл, однако смотреть стоит не только на красоту и легкость восприятия, а в контексте самого продукта и его ЦА. Уверен, что люди в Behance ответственные за выбор победителя в номинации - подходили к процессу более детально, чем мы, простые прохожие. В общем - очень рад за ваш успех! Жду ещё успешных кейсов)
Не в обиду ребятам (все круто, если клиент доволен), но когда продукт отдаёт дизайн на аутсорс, то что-то сильно не в порядке с продуктом.
Изменения UI и тем более UX должны быть обусловлены решением проблем пользователей, а не желанием сделать «покрасивее», тем более что «покрасивее» сильно субъективный параметр.
Агентство выиграло звёздочек, а что выиграл продукт? В лучшем случае ничего.
Сам себя не похвалишь - никто не похвалит.
У вас крутые проекты обычно, но этот не зашел =( Этот тоже верстался на webflow?
Воу, вот это да(
Да, этот, конечно же, тоже на Webflow любимом:
https://webflow.com/website/VAUBAN
Комментарий недоступен
Контейнер для капитала как раз и есть форт, крепость, защита капитала. Основатель с аристократическим позывом создавал свой логотип, а новый дизайн сделал из него простолюдина, без геральдических смыслов.
Красиво
Смелый добротный кейс, только не сразу понял, что это про финтех, а не производство чего-либо.
«Нужно показать профессионализм»
Мда... показали.
Конверсия в лиды увеличилась?
Все круто, но иллюстрации нарисованы слишком тонкими линиями и оттого сложно считываемы и при прокрутке страницы бросается в глаза рябь.
Старый лого был гораздо лучше. Лучше бы прошли мимо
Мне понравилось, в целом напомнило IBM Design Language, строгие формы, аккуратные линии всегда будут в моде.
Комментарий недоступен
Понравилось, молодцы!🔥 Жаль только не описали самое интересное, этап поиска и продажи этому клиенту.
Молодцы👍
Типографика, композиция все класс.
Лучше чем было, а было не плохо.
P.S. Люблю Вебфлоу :))
Отличный кейс. Вырос контраст, сам сайт стал эмоциональнее. Лайк
И шо дает синий шильдик behance? Ну в сутки получите 1000 лайков, ну чуть больше будет лидов, ну почешите эго и все :)
Что может быть лучше, чем почесать свое эго? xD
main -> "Get Started" (https://structurer.vauban.io/) - скроллишь вниз и блок-схема справа сильно дергается. Не круто.
mac os mojave/catalina + chrome 84.0.4147.105
Черно-бело-оранжевая палитра портала...где-то я это видел, ах да, это же французский Orange :0)
В логотипе 10-конечная звезда превратилась в 8-конечную.
Нуууу хз ничего нового и интересного в дизайне не увидел