От устаревшего интерфейса к продающему трендовому дизайну: обновление сайта Нетмонет за 2 месяца

Дизайн играет важную роль в продажах, но многие компании не уделяют ему достаточного внимания и упускают возможность повысить свою эффективность. 38% пользователей перестают смотреть на сайт, если оформление невзрачное, а 52% посетителей сайта считают привлекательный дизайн одной из главных причин для оставления заявки.

Клиент пришел к нам с запросом на обновление своего сайта https://netmonet.co/, потому что в нем устарел как дизайн, так и верстка. К тому же в компании расширили линейку продуктов и хотели показать ее пользователям.

Помните, на чеках в ресторанах есть QR-код? Такой автономный процесс оплаты работает через сервис Нетмонет, который принадлежит Альфа банку. С помощью него можно оставить чаевые официанту в разных заведениях или самому оплатить счет.

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

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

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

Мы работали над страницами:

«Главная»

«Чаевые и отзывы»

«Pay и Оплата»

«Меню»

«Предоплаты»

Разработали детализированные прототипы страниц «Предоплаты» и «Меню». Спроектировали интерфейс: кнопки, поля ввода, выпадающие меню, вкладки. Затем адаптировали страницы для разных устройств.

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

Страницы «Предоплаты» и «Меню» мы дизайнили с нуля, дизайн для остальных предоставил клиент.

Мы привели все блоки на сайте к единому стилю: убрали скриншоты, добавили яркие контрастные 3d-элементы.

Было

Стало

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

Наша команда дизайна начала работать в Figma на контейнерах. Это такой элемент, который содержит в себе что-то ещё, как в коробке. Контейнер представляет собой некий «бокс» — в нём дизайнер размещает объекты.

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

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

Такое решение мы выбрали, чтобы сэкономить клиенту деньги.

Форма одна, а текст слева меняется автоматически

Внедрили в свою работу отзывчивый дизайн в Тильде. Если раньше дизайнер отдельно делал макеты, а верстальщик переносил их на сайт, теперь мы настроили модульную сетку в Zero Block. Она создаёт единую схему расположения всех элементов сайта и помогает сохранить визуальный порядок.

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

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

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

Поработали с блоком «Остались вопросы», теперь им удобно пользоваться.

На главной поменяли цветовую гамму и сделали ее более минималистичной.

Чаще всего мы делаем в конструкторе простые анимации: прокрутка, исчезновение.

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

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

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