PayQR (payqr.ru) - сервис для оплаты покупок телефоном.
Необходимо сделать дизайн лендинг-пэйдж для одного из направлений PayQR - оплата квитанций ЖКХ, штрафов и других счетов (отдельная страница, не связанная с payqr.ru)
Обязательное согласование прототипа до начала дизайна
Цели лендинг-пэйдж:
Общие требования к лендингу |
|
Цветовая гамма |
В светлых тонах, вызывающих доверие у людей Предпочтительно сделать в зеленых цветах, напоминая стилистику сайта Сбербанка http://www.sberbank.ru/ |
Удачные примеры |
https://www.tcsbank.ru/debit/#intro https://www.tinkoff.ru/salary/ https://vmeste.yandex.ru/kassa/ |
Структура |
Страница состоит из последовательных контентных блоков. Структурно все блоки максимально простые, чтобы можно было легко перегруппировывать контент при изменении размеров браузера. |
Состояния | важно обеспечить все состояния лендинга (нажатия кнопоп, попапы, поповеры) |
Адаптивность |
Необходимо, что страница была сделана под адаптивную верстку:
|
Контент лендинга:
БЛОК 1 |
· Должен быть максимально привлекательным · На фоне красивая фотография, показывающая как человек сканирует приложением реальную квитанцию, по аналогии как на сайте PayQR http://prntscr.com/8e21wc · Содержит призыв к действию – установка мобильного приложения |
|
Основной месседж крупными буквами: «Теперь оплачивать счета и квитанции стало проще» |
|
Ссылка на видеоролик «Посмотрите как это работает» |
|
Блок с призывом установить приложение: «Установите приложение PayQR прямо сейчас» Кнопки (как на сайте PayQR.ru, но не обязательно их делать в нижней полосе): · App Store · Google Play · Windows Phone Store · и поле с вводом номера телефона и кнопка с текстом «Получить ссылку на приложение» |
БЛОК 2
Поинты с иконками: «Установите мобильное приложение PayQR вместо того, чтобы идти в банк и стоять в очередях» o «Вам больше не придется заполнять реквизиты платежа снова и снова. PayQR автоматически сделает все за Вас» o «100% без ошибочных платежей. Деньги поступят по нужным реквизитам» o «Моментально получите чек в приложении – полноценная замена устаревшей бумажной квитанции» |
БЛОК 3 |
Заголовок «PayQR – это бесплатное банковское приложение, позволяющее оплачивать любые счета и квитанции» |
|
Далее нужно показать интересным образом сферы оплаты PayQR: o Электроэнергию o Услуги ЖКХ o Газ o Домашний телефон o Штрафы ГИБДД o Налоги + Показать примеры (изображения) реальных квитанций с QR-кодами (убрав данные реальных плательщиков) |
Показать множество логотипов поставщиков услуг: o Москва (герб Москвы) o Санкт-Петербург (герб Санкт-Петербурга) o Мосэнергосбыт o Налоговая o МГТС o Ростелеком o Газпром o ГИБДД o Другие (всего около 50, будут предоставлены позже) |
БЛОК 4. КАК ОПЛАЧИВАТЬ СЧЕТА И КВИТАНЦИИ |
Заголовок «Оплатить квитанцию просто:», а ниже идет текст с сопровождение картинок: |
|
1. Найдите на квитанции черно-белый квадратный код (QR-код) http://prntscr.com/8kc9c1 (пример изображения) |
|
2. Откройте PayQR на своем телефоне и наведите камеру телефона на этот код. http://prntscr.com/8kc9eu (пример изображения)
|
|
3. В приложении моментально отобразятся реквизиты совершаемого платежа. http://prntscr.com/8kc9ik (пример изображения) |
|
4. Подтвердите данные о плательщике или измените их (вводится при первом платеже). http://prntscr.com/8kc9mu (пример изображения)
|
|
5. Выберите банковскую карту для оплаты или укажите новую. http://prntscr.com/8kc9py (пример изображения)
|
|
6. После подтверждения оплаты на электронную почту будет отправлен банковский документ о проведении платежа. http://prntscr.com/8kc9sd (пример изображения)
|
БЛОК 5. |
Текст: «Оплата через PayQR быстрее привычных способов» |
|
Ниже сравнительная схема по аналогии с этой: http://prntscr.com/8kc9w8 Рядом с каждым способом оплаты есть значок вопроса, при наведении курсором на который отображается текст, почему способ занимает столько времени: http://prntscr.com/8kc9z5
|
БЛОК 6 |
Заголовок «Почему люди оплачивают через PayQR» |
|
«Чтобы не собирать дома макулатуру и подолгу не искать нужные бумажки» «Чтобы не подсчитывать суммы на кассах и не перепроверять сдачу» «Чтобы не носить собой пластиковые банковские карты и не доставать кошелек» «Чтобы не разбираться в какие поля какие данные платежа вбивать и иметь гарантированную защиту от ошибок в реквизитах» «Чтобы не зависеть ни от какого конкретного банка и от организаций, в пользу которых совершаются платежи» Каждый поинт совпроводить иконками |
БЛОК 7. СОЦИАЛЬНОЕ ПОДТВЕРЖДЕНИЕ |
|
На заднем фоне карта России с отмеченными в крупных городах (с населением более 500 тыс. чел) значками PayQR |
|
На фоне карты месседж: «Вся страна оплачивает так. На сегодняшний день уже более 800 000 платежей было проведено через PayQR» |
|
БЛОК 8 |
|
Блок с призывом установить приложение: «Установите бесплатное приложение PayQR прямо сейчас» Кнопки: · App Store · Google Play · Windows Phone Store · и поле с вводом номера телефона и кнопка с текстом «Получить ссылку на приложение» Пример: http://prntscr.com/8kcb6x Ссылка «Как установить», по которой открывается инструкция по аналогии, что на сайте https://payqr.ru/#enjoy_link
|
|
ФУТТЕР |
Футтер по аналогии с футтером на сайте https://payqr.ru/#enjoy_link но убрать логотип «Сколково»
|
В футтере отображается ссылка, при нажатии на которую открывается попап окно |
Текст ссылки «Организациям, присылающим населению квитанции об оплате товаров/услуг», |
|
В попап окне форма с текстами: Зарегистрируйтесь в личном кабинете PayQR (гиперссылка на личный кабинет https://payqr.ru/biz) и осуществите доработки по документации PayQR для автоматического нанесения платежных QR-кодов на квитанции |
|
или создайте платежный QR-код прямо сейчас вручную. |
|
Ниже поля для заполнения: · Наименование получателя* · ИНН получателя* · БИК* · Номер расчетного счета получателя в банке* · Сумма · Назначение
Расширенные параметры (ссылка, которая раскрывает расширенные параметры): · УИН · КБК · ОКТМО (используется вместо ОКАТО с 2014 года) · КПП получателя денежных средств · Основание налогового платежа · Налоговый период · Номер документа · Дата документа · Тип платежа · Статус составителя платежного документа · Предлагаемая сумма увеличения основной суммы платежа · Назначение предлагаемой суммы увеличения основной суммы платежа · Тип документа, удостоверяющего личность физического лица, по платежу · Номер документа, удостоверяющего личность физического лица, по платежу · Идентификатор физического лица по платежу (например, СНИЛС) · Номер лицевого счета, по которому совершается платеж · Номер договора, по которому совершается платеж · Номер квартиры, по которой совершается платеж · Номер телефона, по которому совершается платеж · Дата рождения · ФИО ребенка/учащегося · ФИО специалиста, оказывающего услуги · Номер образовательного или медицинского учреждения · Номер группы детсада/класса школы · Номер исполнительного производства · Номер счета, извещения, начисления или др. · Номер постановления · ЧЗКЛ · Дата постановления, счета, извещения, начисления или др. · Индекс платежного документа · Лицевой счет бюджетного получателя · Крайний срок совершения платежа для информации · Период, по которому совершается платеж · Вид платежа · Код вида платежа |
|
Кнопка «Создать код», которая становится активна, когда заполнены обязательные поля, отмеченные звездочками После нажатия на кнопку появляется QR-код, который можно сохранить в виде изображения. |
ДОПОЛНИТЕЛЬНО |
На всех блоках, где нет отдельной формы с установкой приложения, во время скроллинга отображается кнопка-плашка «Установить приложение PayQR», при нажатии на которую отображается форма для установки: · поле с вводом номера телефона и кнопка с текстом «Получить ссылку на приложение»
Кнопки: · App Store · Google Play · Windows Phone Store
|
Подробнее читайте тут: http://godesigner.ru/answers/view/51