Лендинг для бренда Shock Bubbles

Сегодня хочу рассказать, как создавала проект промо-лендинга в рамках обучения в онлайн-школе «Логомашина».

Первым этапом я получила бриф.

Длинный текстовый документ с основными тезисами и видением заказчика какой нужен сайт и для чего.

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

И вот, я приступила к самому трудоёмкому — исследованиям. UX исследования включают в себя разные методы анализа.

Я остановилась на этих:

Начнём с конкурентного анализа. С помощью него оценивают визуальную (UI) и функциональную (UX) составляющую сайтов-конкурентов.

Я проанализировала 5 прямых и 8 косвенных конкурентов. В итоге у меня получилось две сравнительные таблицы:

Я выделила для себя блоки, которые мне показались наиболее важными и интересными, а именно, ассортимент товаров, блок «где купить» и блок с рецептами коктейлей.

А также сделала анализ достоинств и недостатков сайтов:

Вторым этапом исследований стал метод персон.

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

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

Итогом исследования методом персон стали 3 гипотезы (по одной на каждую персону).

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

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

Ассоциации, которые я определила для бренда — технологичный, энергичный, сочный, яркий.

Вывод:

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

Структура моего лендинга состояла из следующих блоков:

Затем был поиск настроения проекта в фотографиях и образах. Они должны отражать «tone of voice» бренда — энергия, сочность и насыщенность газировки. А также передавать весёлое, игривое настроение, так как ЦА — это молодые люди, стремящиеся весело провести время.

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

Вот такие референсы подобрала я. По несколько на каждый блок лендинга и несколько вариантов сайта целиком.

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

Сначала я смотрела в сторону Cunia, но он показался слишком уж мягким и не соответствовал параметрам современности и молодёжности. Затем моё внимание привлёк Ampero — в центре букв прослеживался силуэт бутылки, мне показалось это интересной «пасхалкой» для самых внимательных. Но у него оказалась плохая поддержка кириллицы и буква «Ц» вела себя странно, превращаясь в «П» с хвостиком внизу.

Я продолжила поиски, и тут на сцену вышел Songer Grotesque.

Вот он — тот самый, что мне нужен: абсолютно круглая буква «О», напоминающая пузырьки газировки; и все буквы разной ширины, поэтому визуально создаётся ощущение, что смотришь сквозь бутылку с газировкой.

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

Я определила для себя, что на главном экране должна быть банка с газировкой, так как цель лендинга — познакомить потенциальных потребителей с новым продуктом. Далее располагается блок с информацией о промо-акции с возможностью ввести код и посмотреть список победителей. Третьим блоком выступает каталог всех вкусов газировки с возможностью посмотреть состав. На следующем блоке есть варианты коктейлей, которые можно сделать с Shock Bubbles. Затем идёт информация о том, у каких партнёров можно купить газировку. И, наконец, футер, в котором отражена вся контактная информация и призыв подписаться на соц. сети бренда.

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

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

Поэтому мой первый экран стал таким:

Куратор одобрила и я подумала, что сейчас будет самое простое — просто в той же стилистике доделать остальной лендинг, что может быть проще и интереснее?

И вот тут началось веселье на 9 итераций.

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

И, вот, сколько вариантов этого блока я перепробовала:

Когда руки уже опустились, новая идея сама пришла в голову.

Я всё–таки оставила акцент на газировке, а не на самих коктейлях.

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

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

У меня получилось 4 макета: 1920рх и 1440рх — для десктопных устройств, 760рх — для планшетов и 360рх — для смартфонов.

После адаптивов дело дошло до Ui-Kit. Это очень полезная вещь не только для дизайнера, но и для верстальщика, который в последующем будет собирать дизайн-макет. Он облегчает и ускоряет работу и первого, и второго.

Ui-Kit постаралась сделать ёмким и полноценным: продумать все состояния полей и кнопок, отобразить все размеры всех элементов на макете.

Когда макет готов, приходит время его презентации заказчику.

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

Вот таким получился мой учебный проект в Логомашине.

Благодарю за прочтение!