UI/UX-дизайн сайта для интегратора «Лемма»: главная по брендбуку и адаптив

Кто такая «Лемма»

«Лемма» – интегратор IT-решений для ресторанного бизнеса и цифровая платформа для контроля и управления рестораном, кафе или баром. Компания помогает заведениям выбрать, запустить и поддерживать IT-сервисы: учёт, работу с гостями, доставку, техподдержку. «Лемма» – ведущий дилер iiko, соучредитель DocsInBox и партнёр Смартомато и Revvy.

В 2022 году у компании было 10 лет работы на рынке, место в топ-5 дилеров iiko и больше 4 000 клиентов.

Что нужно было сделать

Задач было две. Первая касалась дизайна: он должен отвечать требованиям UX/UI и при этом строго следовать брендбуку компании. Вторая касалась интерфейса: сделать сайт удобнее для посетителя и улучшить его конверсионные качества, то есть чтобы больше людей доходили до заявки.

Дизайн мы прорабатывали вместе с пользовательским сценарием. Человек приходит на сайт интегратора с конкретной задачей: наладить учёт, запустить доставку, настроить программу лояльности. Страницу мы строили так, чтобы она по ходу просмотра отвечала на эти вопросы и не давала повода уйти. Работали в Figma, Photoshop и Adobe XD.

Главная сверху вниз

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

Первый экран и задачи клиента

Первый экран начинается с обещания: «Помогаем выбрать, запустить и поддерживать IT-сервисы для ресторанного бизнеса». Под ним статусы компании: ведущий дилер iiko, соучредитель DocsInBox, партнёр Смартомато и Revvy. Сбоку закреплена панель с мессенджерами и соцсетями.

Дальше идёт блок «Какие задачи мы помогаем решить». В нём четыре карточки: учёт в ресторанах на iiko, работа с гостями через системы лояльности и Revvy, каналы заказов и доставка еды, техподдержка 24/7. У каждой карточки чёткий заголовок и одна строка описания. Посетитель сразу видит, что ему предлагают, и переходит к подробностям по своей теме.

Сразу после карточек стоит форма «Оставьте заявку» в одну строку: задача из списка, имя и телефон.

Цифры и клиенты

В блоке «Почему нас выбрали» мы сделали ставку на цифры, чтобы они бросались в глаза. Топ-5 дилеров iiko, 4 000+ клиентов, 300+ запусков доставки еды в месяц, работа по всей России, в Беларуси, Казахстане и Турции, свои IT-решения для сетевых проектов, поддержка 24/7, 20 000 заявок в месяц и 150 инженеров. Каждая цифра стоит на отдельной синей плитке.

Под цифрами логотипы клиентов. Чтобы по ним было легко ориентироваться, мы добавили фильтр по регионам: Москва, Санкт-Петербург, Поволжье, Урал, Юг, Сибирь, Восток, Крым, Турция, Казахстан. Так проще найти заведения из своего региона.

Отзывы и обратная связь

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

Для тех, кто уже работает с «Леммой», под отзывами есть своя форма: «Уже работаете с нами?». Клиент оставляет вопрос или отзыв о качестве работы, а рядом видит телефон, почту и ссылки на мессенджеры.

Полезные материалы

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

Руководство: прямые углы и тёмно-синий

Чтобы новые страницы собирались по тем же правилам, мы оформили руководство по стилю. Основа палитры – тёмно-синие фирменные цвета компании. Второстепенный цвет розовый, им выделены, например, кнопки отправки форм. Шрифт Graphik LC TT поддерживает технологичный характер бренда.

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

Внутренние страницы и адаптив

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

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

Итог

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

Если ваш сайт выглядит устаревшим или плохо приводит заявки, посмотрите, как мы делаем UI/UX-проектирование и UX/UI-оптимизацию сайта: разберём сценарии ваших клиентов и соберём страницы, которые на них отвечают. Для компаний, которые продают бизнесу, есть отдельная страница сайт для B2B.