Разбор баннера Ozon: как улучшить дизайн через работу со смыслами

Всем привет, с вами дизайнер UXART, где мы ежедневно делаем интернет удобнее.

Недавно я забирал заказ в пункте выдачи Ozon и, пока стоял в очереди, взгляд зацепился за баннер. Что-то в нём явно не так — решил сфотографировать и разобраться, что можно улучшить.

Начинаем со смыслов

Прежде чем разбирать дизайн, важно смотреть на него с двух сторон: визуальной и смысловой.

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

Если разобрать задачу и посыл, картина такая:

1. Задача: мотивировать человека зарегистрироваться в Ozon Банке.

2. Ключевой посыл: бесплатная карта с бонусами — кэшбэк 25% рублями и миллионы товаров за 1 рубль.

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

Основные проблемы:

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

1. УТП, которое теряется среди аналогов.

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

2. Сильные преимущества остаются на втором плане.

В реальных сценариях — в очереди, на улице, при беглом взгляде — человек тратит на баннер одну-две секунды. За это время он успевает увидеть только самое яркое. У конкурентов часто используют крупные цифры или визуальные акценты на выгоде — это помогает не потерять смысл в потоке информации. В нашем случае крупный «25%» или «1₽» могли бы стать тем самым «якорем», который удержит взгляд и сразу объяснит, в чём выгода. Например, можно посмотреть на баннер Т-Мобайл. На нем ключевые смыслы сразу бросаются в глаза:

3. Визуал не поддерживает сообщение.

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

А как же быть:

У нас есть два реально сильных оффера — кэшбэк 25% и миллионы товаров за 1₽.По сути, этого уже достаточно, чтобы мотивировать человека оформить карту.

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

Что же нам это дает:

1. Получаем два сильных УТП. Они сразу дают понятную ценность, выделяют предложение среди конкурентов, а крупные цифры привлекают внимание быстрее и понятнее.

2. Пространство для осмысленного визуала — можно построить композицию вокруг конкретной выгоды.

Делаем черновой скетч:

Я понимаю, что у Ozon есть свои правила, и именно они часто определяют, каким может быть баннер: какие размеры, стили, уровни акцентов, какая графика «разрешена». Из-за этого многие элементы могут выглядеть именно так — не потому что дизайнер «плохо сделал», а потому что существуют рамки, которые задают определенные ограничения.

Но если чуть отойти от этих жёстких правил и смотреть на процесс в первую очередь как на задачу коммуникации, баннер можно сделать заметно сильнее. Ниже — как и почему.

1. Уменьшаем логотип.

Делаем фокус на предложении, логотип остаётся заметным, но не перетягивает внимание.

2. Крупные и информативные заголовки.

Они подчеркивают выгоды и сразу цепляют взгляд.

3. Понятный визуал, ближе к интерфейсу.

Делаем визуал, который помогает считать смысл, и побуждает изучить весь баннер

4. Заметный QR.

Чтобы путь от интереса до действия был очевидным  

Переходим к дизайну:

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

Вывод

Хороший дизайн — это не про «красиво». Это про ясность, структуру и акценты, которые помогают донести смысл без лишних слов. Когда человек с первого взгляда понимает, что ему предлагают и зачем это нужно — вот тогда дизайн действительно работает… 

Спасибо каждому за чтение этой статьи. Надеюсь, что вам понравился этот формат. И если это так, обязательно поставьте лайк и напишите комментарий.

P.s. а если вам хочется такой же крутой баннер  — пишите Артему Конакову в личку.Подписывайтесь на нашу телегу, там больше контента про студию и внутреннюю кухню)