Разбор редизайна Банк Авангард

Как работать с премиальной аудиторией? Как подбирать соответствующие нише референсы? Как работать с брендом внутри интерфейса? Отвечаем на эти вопросы в нашем разборе.

Автор работы Евгения Самсонова, подписчик DL PRO

Ссылка на проект в Фигме

Какие ключевые вопросы по работе у тебя есть к менторам? Это мой первый лендинг, но хочется оформить его в портфолио.
Вопрос: что стоит добавить/изменить в дизайне чтобы сделать его чуточку лучше? Мне сейчас работа кажется аккуратной, но скучной. С другой стороны, это банк а не лендинг хардкор фестиваля, может быть здесь и не нужен неон, анимация и вот это все яркое и красивое)


Задача
Сделать редизайн страницы карты премиум для банка Авангард

Привет, Евгения!

Большое спасибо, что поделилась своей работой! Правильно, что выбрала этот банк. Мы согласны с тобой, банку Авангард мучительно нужен редизайн, он застрял далеко в прошлом.

Что понравилось в работе

Работа с цветом, чистота. Ты провела исследование банков, посмотрела конкурентов и аккуратно оформила решение.

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

Логика

Твой подход в работе правильный. Изучила страницу, сформировала гипотезы, протестировала их, получила новые сведения, проанализировала и сделала выводы. Давай немного углубимся в детали.

1. Как обычно клиенты приобретают премиальные продукты?

Ты изучила, где находится на сайте данная страница. Это хорошо. А теперь вопрос, будет ли клиент искать именно таким способом премиальную карту? И почему вообще он решает её приобрести? Это может быть не только поиск на сайте:

• Запрос в гугл "премиальная карта Авангард" с точным переходом на эту страницу;
• Если клиент уже имеет банковский продукт, а ему предложили его в мобильном приложении;
• Или вообще позвонили;
• ...

2. Кто приобретает премиальные продукты?

Не хватило анализа ЦА (целевой аудитории), по которой можно было формировать и визуальную концепцию, структуру самого сайта, контент. В следующий раз, удели время в исследовании изучению аудитории твоего продукта. Кто им пользуется? Почему они им пользуются? Какую проблему, потребность закрывают данным продуктом?

Про проблему и потребность в исследовании ни слова не было, хотя это самый важный аспект, с которого стоит начинать работу. Тебе нужно показать продукт с правильной стороны для клиента. А правильная сторона — это то, что важно для клиента.

Весомые преимущества от обладания картой категории премиум

Какие преимущества? Почему они весомые? Что приоритетно для клиента в продукте премиум? Почему они берут премиальный продукт, а не обычный? Как они его выбирают: импульсивно или планомерно, предварительно изучив данную область?

3. Респонденты. Насколько важно брать респондентов из ЦА?

Хорошо, что сделала опрос по текущему интерфейсу. Есть одно НО в этом. Целевой ли это клиент для премиального продукта? Насколько собранные данные помогут улучшить коммуникацию с твоим сегментом? Может сложиться ситуация, что это совсем противоположная аудитория относительно твоей ЦА. И тут исследование придется делать заново.

Пример-аналогия: если ты изучаешь продукт для старшего поколения и начинаешь опрашивать молодых людей (20-30 лет), то ты получишь лишь видение со стороны, а не точные данные по твоей аудитории.

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

4. Стилистика. Похоже НЕ на премиум продукт, а на хороший средний банковский продукт для массового сегмента.

Премиальные бренды не зря выбрали тёмную стилистику. Уже проведено тысячи исследований, тысячи брендов работали с аудиторией в премиум сегменте. Это всегда про минимализм, про эстетику, про эмоции «я хорош, могу себе позволить». В автомобильных брендах, премиальный класс — это реклама про одного человека в машине, никогда нет семьи, «подружки». Вдохновляйся окружением. Если ты понимаешь, чем пользуется твоя ЦА, какие бренды они любят, то поймёшь, какую визуальную концепцию им показать.

5. Конкурентный анализ и референсы. И тут исследование закончилось?

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

Разбор, в котором детально описано, как работать на этапе исследований.

Бизнес

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

• Зачем бизнесу премиум-доступ? Какова их выгода с этого?
• Как они его внедряют со стороны продукта? Через какие каналы?
• Какие компоненты входят в премиальный доступ?

6. Детальный разбор референсов

Конкурентный анализ был, но не хватило декомпозиции референсов: что именно нравится в примерах, какие приёмы, какие фичи добавили, что по текстам у конкурента, кто самый классный на рынке, найти общие мелочи в основных участниках рынка. Всегда есть тот, кто в сфере задаёт тренд. Сейчас в банках их трое: Альфа, Тинькофф и Райффайзен. Им стоит уделить больше внимания, так как остальные обычно под них равняются. В студию компании часто приходят с запросом: «Хотим как у них, сделайте, пожалуйста!»

Что же крутого в примере от Альфы?

• «Лучшее премиальное обслуживание в России». Они не боятся это сказать и дают возможность протестировать.
• Слова «эксклюзивные», «привелегии», «лучшее», «ваш человек», «личный», «персональный», «лучше, чем у держателей обычной карты» показывают персональный подход к клиенту, говорит о его важности, уникальности. «Ты не такой, как все»
• Чёрный стиль. Минимализм. И утончённые подсвечивания иллюстраций.
• С продуктовой составляющей — сервисы, которые подключили к премиальной карте. Бизнес-зал в аэропорту, такси бизнес-класса, личный консьерж, персональный менеджер.

Визуал

При работе над проектом всегда возвращаемся к задаче. Это наш компас и ориентир. Еще раз вспомним — мы делаем версию сайта премиум-карты банка Авангард. Подача должна выглядеть соответсвенно продукту.

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

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

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

Мудборд и референсы

Давай вернемся к твоему процессу. После исследования и конкурентов надо было поработать над смыслами нашей страницы. Сейчас они не читаются.

Эта карта для путешественников? Больше кешбэка и привилегий для премиальных клиентов и дебетовая карта Premium — это общие слова, которые не несут конкретного смысла. А время пользователя ценно, если мы не зацепили его в первые 8 секунд, он закроет нашу страницу.  Поэтому, прежде чем делать дизайн, нужно обязательно понять о чем он, для кого он, зачем он.

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

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

Типографика

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

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

Чтобы дизайн выглядел согласованно — используй один тип выравнивания в заголовках и тексте.  Если под одним заголовком появляется оранжевая линия, но ее нигде больше нет, то это выглядит как ошибка, а не как приём.

Композиция

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

В первом блоке композиция разваливается. Выравнивание по центру горизонтали не очень удачно. Сильно спорят за внимание карта и кнопка — обе активного оранжевого цвета.  Так как нам более важно, чтобы пользователь нажал на кнопку, акцент с карты лучше снять и сделать ее изумрудного цвета с оранжевым акцентом.  Таким образом, мы поддержим фирменные цвета и даем фокус правильным объектам.

Правому блоку тесно, а преимущества «200 дней кредита бесплатно» и прочие набраны слишком легким шрифтом и не обращают на себя внимания.

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

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

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

Хорошо, что не забыла указать тарифы и условия обслуживания — это важные вопросы, которые будут интересовать нашего клиента.

Шаги можно выполнить визуально как таймлайн — это еще больше свяжет нас с процессом получения карты.

Цвет

У Авангарда два фирменных цвета: изумрудный и оранжевый.  Ты взяла только один оранжевый. Хотим указать тебе на интересную вещь, насколько у нас цвет ассоциируется с каким-либо брендом. Если убрать логотип, то первый экран вполне мог бы принадлежать банку Киви)

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

Что посмотреть

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

Успехов в будущих проектах!

Работу разобрали Ольга Чухаленко и Алана Белоглазова.

Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров:

https://pro.dsgnline.ru/