Helmet Care
Helmet Care — автоматы, которые за несколько минут очищают шлем от бактерий. Они стоят у магазинов и в других людных местах Бали, где мотоцикл и скутер — один из самых популярных способов передвижения.
Я спроектировала лендинг, который знакомит людей с новым сервисом: визуальную концепцию, интерфейс, два стикерпака и ИИ‑генерации шлемов и фонов.
Основной сайт у компании уже был. Нужна была отдельная посадочная, чтобы о новом продукте узнали и начали им пользоваться.
Объяснить
Простым языком: что такое Helmet Care, как работают автоматы и как ими пользоваться.
Показать точки
Где на острове стоят автоматы.
Запомниться
Яркий лендинг, который выделяется среди корпоративных сайтов и вызывает интерес к услуге.
Гигиена шлема — не скучная обязанность
Главная идея: сделать обработку шлема простой и привлекательной частью повседневной жизни. Поэтому вместо строгого технологичного интерфейса яркая, немного игровая подача: насыщенные цвета, стикеры, крупные акценты и интерактив.
Аудитория в основном местные жители. Говорю с ними легко и по-дружески, чтобы сервис был понятен без долгого изучения. А технологичность автомата видна в фото и в описании процесса.
Шесть вариантов первого экрана
До итогового экрана я собрала шесть вариантов с заголовком «Your helmet is dirtier than you think»: шлем на камне во мху, парень в шлеме на зелёном и голубом фоне, шлем в полёте. Итоговый экран — «Clean your helmet first»: салатовый шлем на бирюзовом фоне, листья монстеры и форма, где можно получить промокод.
Четыре блока — четыре вопроса
Упор на простоту восприятия: каждый блок отвечает на один вопрос, который появляется у человека при виде нового сервиса.
Интерфейс на английском: на острове живут и отдыхают люди из разных стран, и лендинг должен говорить и с ними.
Знакомство с продуктом
Сначала о том, зачем это нужно: в шлеме копятся пот и влага, быстро растут бактерии, появляются запах и раздражение кожи. Потом о том, как помогает автомат: обработка азотом убирает бактерии и запах и не портит материалы. Тут же форма: первую обработку можно попробовать бесплатно по промокоду.
Как это работает — четыре шага
Механику я разложила на шаги вокруг телефона: выбрать способ оплаты, положить шлем в автомат, запустить обработку и забрать чистый шлем. Человек видит весь путь сразу и понимает, что справится сам.
Точки на карте острова
Автоматы стоят там, где люди бывают каждый день: у магазинов и в других общественных местах. На лендинге это карта Бали с отметками и кнопка поиска ближайшей точки, а рядом фото автоматов и людей, которые ими пользуются.
Два стикерпака — часть коммуникации
Визуальную систему я делала сама, не только интерфейс. Стикеры здесь не украшение: котики и черепаха в шлемах, мотоциклист, пальмы стоят рядом с заголовками и задают лёгкий, дружеский тон.
ИИ‑генерации в одном стиле
Шлемы и фоны я сгенерировала нейросетями под задачу каждого блока: салатовый шлем на камне во мху, грязный шлем в лесу, рисовые террасы для карты. Цвета и свет везде одни, поэтому блоки складываются в одну историю.
сгенерировал шлемы и фоны для блоков лендинга
Фото автоматов — в той же системе
Фото оборудования я доработала, чтобы автоматы стали частью одной визуальной системы с генерациями и стикерами, а не выглядели вставкой из другого сайта.
Интерактив и анимации
Анимаций на сайте было много. Здесь переход от первого экрана ко второму блоку: проявляется заголовок, за ним текст, снизу выезжает телефон, вокруг появляются стикеры. Страница всё время чуть-чуть движется, и её интересно листать дальше.
Мобильная версия
На телефоне блоки выстроены в один столбец. Форма промокода стоит прямо на первом экране, шаги механики идут по два над телефоном и под ним, у карты своя карточка поиска ближайшей точки.
Свой инструмент для рассказа о продукте
Вместо ещё одной страницы с описанием услуги у Helmet Care появился самостоятельный инструмент, который знакомит людей с продуктом. Дизайн сделал новый сервис понятнее, заметнее и ближе к повседневной жизни.
- Лендинг на английском для жителей и гостей Бали
- Яркая игровая концепция вместо строгого технологичного интерфейса
- Два стикерпака как часть коммуникации
- ИИ‑генерации шлемов и фонов в одном стиле
- Шесть вариантов первого экрана до итогового
