Промо-страница сервиса PayQR по оплате квитанций ЖКХ, штрафов и других счетов

PayQR (payqr.ru) - сервис для оплаты покупок телефоном.

Необходимо сделать дизайн лендинг-пэйдж для одного из направлений PayQR - оплата квитанций ЖКХ, штрафов и других счетов (отдельная страница, не связанная с payqr.ru)

Обязательное согласование прототипа до начала дизайна

Цели лендинг-пэйдж:

1. Замотивировать пользователя установить приложение PayQR и оплатить платежный документ (квитанцию ЖКХ, штраф ГИБДД, налоговую квитанцию и т.д.)
2. Обучить пользователей оплачивать платежные документы через приложение PayQR

Общие требования к лендингу

Цветовая гамма

В светлых тонах, вызывающих доверие у людей

Предпочтительно сделать в зеленых цветах, напоминая стилистику сайта Сбербанка http://www.sberbank.ru/
https://www.dropbox.com/s/u3q1znen1jyrqhf/sber_index_prew.png?dl=0

Удачные примеры

https://www.tcsbank.ru/debit/#intro

https://www.tinkoff.ru/salary/  

https://pgu.mos.ru/ru/

https://vmeste.yandex.ru/kassa/

http://www.apple.com/iphone-6/

https://ribbon.co/

Структура

Страница состоит из последовательных контентных блоков.

Структурно все блоки максимально простые, чтобы можно было легко перегруппировывать контент при изменении размеров браузера.

Адаптивность

Необходимо, что страница была сделана под адаптивную верстку:

• Мобильная версия: 320 – 767px (резиновая верстка).
• Планшетная версия: 768 - 1023px (резиновая верстка).
• Десктопная малая версия: 1024 – 1279px (резиновая верстка).
• Десктопная большая версия: 1280px и более (фиксированная верстка).
• На экранах с шириной разрешения более 1280px рабочая область страницы имеет фиксированную ширину, по горизонтали выравнивается по центру экрана

Контент лендинга:

БЛОК 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

(пример изображения)

Если на квитанции еще нет QR кода, попробуйте навести камеру на обычный штрих-код.

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