е—б эдженси
нетмонет, но есть сайт. как мы делали лендинг для проекта альфа-банка
е—б эдженси
#Сайт под ключ

нетмонет, но есть сайт. как мы делали лендинг для проекта альфа-банка

82 
е—б эдженси
е—б эдженси Россия, Санкт-Петербург
Поделиться:
нетмонет, но есть сайт. как мы делали лендинг для проекта альфа-банка
Клиент

нетмонет

Сфера

Программное обеспечение

Регион

Россия

Тип сайта

Лендинг пейдж

Сдано

Май 2023

Задача

К нам обратилась команда сервиса «нетмонет» — проекту нужна была промостраница для продвижения и рекламы.

У команды уже были наработки по проекту — изначально задача звучала как «нам нужен только дизайн и верстка по готовому прототипу». Но когда мы начали погружаться в прототип мы поняли, что его структура и тексты недостаточно хорошо отражают выгоды сервиса для будущего клиента. Чтобы сделать сайт не только визуально приятным, но и информативным + конверсионным, мы решили подключиться на все этапы разработки лендинга.

«нетмонет» — проект Альфа-Банка, сервис для безналичных чаевых. Сервис помогает бизнесу упростить получение чаевых: достаточно разместить QR-код на чеке или другом удобном носителе, а покупатель услуги сможет легко оставить нужную ему сумму чаевых. Мы делали лендинг для бизнеса — для компаний, которые потенциально могут подключить сервис в своем заведении.

Решение

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

Для этого мы:

— Изучили платформу и её выгоды для целевой аудитории

— Проанализировали конкурентов и их действия на рынке

— Написали новые тексты

— Разработали дизайн-концепцию

— Сверстали лендинг на Tilda Publishing

Некоторые из исходных материалов заказчика:

Небольшой кусочек Фигмы с процессом работы по проекту:

1Проблемы исходного прототипа

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

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

2Наша версия прототипа

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

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

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

3Стилевое решение

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

Чтобы понять, в каком направлении дизайна нам двигаться, мы подготовили две подборки референсов:

— более спокойные и интерфейсные сайты

— более смелые, креативные и нестандартные

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

4Дизайн-концепция

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

— Для интерфейсности: использовали элементы и экраны из приложения «нетмонет», нарисовали иконки в стиль платформы

— Для премиальности: ввели дополнительный цвет — насыщенный сине-фиолетовый, который отлично подчеркнул фирменный оранжевый и добавил лендингу глубины.

Акцентировать внимание пользователя мы решили при помощи поскролльных анимаций.

5Дизайн главного экрана

На первом же экране мы демонстрируем пользователю функционал сервиса — для этого в центр композиции мы разместили мокап с одним из экранов приложения «нетмонет». На фоне расположили фирменный элемент платформы и насыщенную подложку.

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

Так мы в прямом смысле погружаем пользователя в процесс исследования сервиса!

6Блок «Процесс работы»

Чтобы максимально понятно объяснить принцип работы приложения, мы подготовили анимированный блок и написали простые и понятные тексты. Этот раздел лендинга поэтапно выдаёт ключевую информацию: один экран = один шаг в использовании сервиса.

7Декоративные дизайн-элементы

У клиента были строгие требования к скорости загрузки сайта, поэтому мы старались сделать его максимально легким — для этого в дизайне использовали только «маловесные» решения, вроде svg-иконок и микро-иллюстраций.

8Давайте посчитаем

Рассказывать о выгоде для клиента — хорошо, а показывать эту выгоду — эффективно (и эффектно). Мы решили внедрить в лендинг калькулятор потенциальных чаевых — такой маленький инструмент лучше любых текстовых блоков демонстрирует, как важные для пользователя показатели успеха растут благодаря внедрению в бизнес правильного инструмента — приложения «нетмонет».

9Мобильная версия

Каждый блок лендинга был внимательно и аккуратно адаптирован под мобильные устройства.

Результат

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


Стек технологий


Над проектом работали:


Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

е—б эдженси с удовольствием обсудит вашу задачу

Оставить заявку