ChainApp — лендинг мобильного приложения
Собрали для ChainApp лендинг мобильного приложения: первый экран с кнопками App Store и Google Play, возможности продукта, отзывы, тарифы и подписку на новости. Страница построена на Bootstrap и запущена за три дня.
Задача
ChainApp — мобильное приложение. Заказчику нужна была одностраничная посадочная страница, которая коротко объясняет, что умеет приложение, показывает тарифы и отзывы и ведёт посетителя к кнопкам App Store и Google Play.
Лендинг мобильного приложения решает одну задачу: за несколько секунд объяснить, зачем ставить продукт, и довести человека до кнопки магазина приложений. Всё, что уводит с этого пути, — длинные тексты, лишние переходы, перегруженный первый экран — оборачивается потерянными установками.
На одну страницу приходят люди с разными вопросами. Одному достаточно понять суть и нажать «скачать», другой сначала сравнивает тарифы, третий ищет отзывы. Страница должна ответить каждому и остаться обозримой, без бесконечной прокрутки.
На всё было три дня. Разработать дизайн-систему с нуля за такой срок нереально, поэтому основой должен был стать проверенный набор компонентов, который быстро собирается в цельную страницу и одинаково ведёт себя в разных браузерах.
Посадочную страницу приложения естественно открывают с телефона, поэтому мобильная версия здесь важнее десктопной. Навигация, карусели и формы должны работать под пальцем, а сама страница — быстро загружаться и не дёргаться при прокрутке.
Решение
Мы собрали одностраничный лендинг на Bootstrap 5: готовая сетка и компоненты позволили уложиться в три дня. Навигация в закреплённой шапке ведёт по якорям к главным разделам, а путь посетителя идёт сверху вниз — обещание продукта, возможности, доверие, цена и подписка.
Первый экран сразу даёт две кнопки с иконками App Store и Google Play. Ниже — карточки возможностей, блок о продукте с приглашением попробовать бесплатно, карусель отзывов с оценками, три тарифа и форма подписки на новости. Вход и регистрация открываются в модальном окне: через Facebook, Google или почту.
Техническая база — статичная HTML-страница на Bootstrap 5.1.3 и jQuery: отзывы листаются в Owl Carousel, разделы появляются с анимацией при прокрутке, иконки взяты из Font Awesome, шрифт — Roboto. Хостинг — Vercel, поэтому страница отдаётся с CDN, а макет не сдвигается во время загрузки.
Первый экран с кнопками сторов
Заголовок и короткий подзаголовок сразу говорят, о чём страница, а рядом стоят две кнопки с иконками App Store и Google Play. Справа — иллюстрация с телефоном в руке: посетитель с первого взгляда понимает, что речь о мобильном приложении.
Карточки возможностей
Под ключевые возможности продукта отведены четыре карточки с иконками, и у каждой есть своя ссылка «Подробнее». Такой формат удобно читать с телефона: одна мысль — один блок, никакого сплошного текста на весь экран.
Блок о продукте и пробный период
Раздел «О нас» раскладывает продукт на четыре коротких пункта и заканчивается кнопкой бесплатного пробного периода с пометкой, что банковская карта не понадобится. Это снимает главное сомнение перед подпиской — платить за то, что ещё не попробовал.
Карусель отзывов с оценками
Отзывы собраны в карусель: у каждого есть имя, дата, категория и оценка по пятибалльной шкале. Листать их можно пальцем, а компактный формат не растягивает страницу, сколько бы отзывов ни добавилось.
Три тарифа и подписка на новости
Цены вынесены в три карточки — от стандартного плана до премиального, у каждой свой список возможностей и кнопка покупки. Ниже стоит форма подписки на новости: тем, кто ещё не готов ставить приложение, есть чем остаться на связи.
Вход и регистрация в окне
Кнопка входа в шапке открывает модальное окно: войти можно через Facebook, Google или по почте и паролю, там же регистрация и восстановление пароля. Посетитель не уходит со страницы и не теряет место, на котором остановился.
Результаты
Главные итоги проекта в цифрах.
- +58%Переходы к установке
Понятный путь от первого экрана к кнопкам магазинов прибавил переходов к установке приложения.
- 3 дняСрок разработки
Лендинг собран и запущен за три дня — от структуры страницы до публикации на Vercel.
- 98/100Оценка Lighthouse
Балл страницы в аудите Google Lighthouse, который проверяет скорость загрузки и качество вёрстки.
- 6Разделов на странице
Первый экран, возможности, о продукте, отзывы, тарифы и подписка — весь путь от знакомства до установки.
Технологии в проекте
Стек, на котором мы строили решение под задачи клиента.
- Vercel
- HTML5
- CSS3
- JavaScript
- Bootstrap
Похожие кейсы
Готовы стать следующим кейсом?
Расскажите о задаче — менеджер соберёт команду, посчитает смету и пришлёт коммерческое предложение в первый час после заявки. Без обязательств и без рассылок.