---
publishYear: 2013
name: Jazzpay
title: Дизайн интерфейса платежного сервиса
excerpt: Разработали дизайн сервиса для оплаты любых товаров, услуг и счетов без обязательной регистрации.
context: В 2013 году удобных способов оплатить счет через интернет было не то чтобы много. Порой было проще отстоять очередь в «Сбербанк», чем разбираться в интерфейсе неуклюжего банк-клиента.
logo:
src: ~/assets/images/portfolio/jazzpay/logo.png
alt: Jazzpay logo
noCard: true
image: ~/assets/images/portfolio/jazzpay/basis.png
imageAlt: Дизайн интерфейса платежного сервиса
thumbnail:
src: ~/assets/images/portfolio/cards/jazzpay.svg
alt: Собака Павлова • Jazzpay • Дизайн платежного сервиса
tags:
- fin
- ux-design
- mass
tags2:
- Финансы
- Проектирование профессионального сервиса
- Платежный сервис
- Веб интерфейс
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-design), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим делать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: qiwi
- collection: portfolio
page: alfastrah-design
- collection: portfolio
page: monetory
- collection: portfolio
page: alfa-arm
- collection: portfolio
page: alfastrahhr
- collection: portfolio
page: opendesk
- collection: portfolio
page: sberbank
- collection: portfolio
page: tinkoff
- collection: portfolio
page: inbank
- collection: portfolio
page: alfabank
result:
- src: ~/assets/images/portfolio/pdf.png
text: Дизайн интерфейса
link: https://drive.google.com/drive/folders/1OdnO_CKYU5W8orjLd0YOu_awjtOjQW-c?usp=sharing
budget: ~ 400 000 ₽
review:
text: Польза принесена несомненно. По срокам также все нормально. Я сознательно начал работу по подготовке мокапов на спринт раньше реализации — и все сошлось. Тесное общение было очень продуктивным. Спасибо за терпение, потому что я вел себя как «плохой» заказчик (не специально). Затягивал, откладывал, переносил…
photo: ~/assets/images/portfolio/basis/person.png
person: Сергей Котов
position: Генеральный директор ПромИнфоСистемы
director: Оплачивать счета онлайн стало просто.
metadata:
canonical: https://sobakapav.ru/portfolio/jazzpay
title: Платежный интерфейс • Дизайн интерфейса платежного сервиса
description: "Разработали дизайн сервиса для оплаты любых товаров, услуг и счетов без обязательной регистрации."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/jazzpay/jazzpay.png'
width: 989
height: 706
type: website
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import PhoneMockup from '~/components/widgets/PhoneMockup.astro';
<TOC>
[Вводные](#anchor1) • [Плюсы и минусы](#anchor2) • [Процесс](#anchor3) • [Результат](#anchor4) • [Отзыв, цены, сроки](#anchor5)
</TOC>
## <a name="anchor1" />Вводные
«Промышленные информационные системы» — петербургская компания, которая разрабатывает всякие сложные программные решения для государственных и частных заказчиков. В частности, системы, связанные с оплатой чего-либо каким-нибудь способом.
К нам «Промышленные информационные системы» обращаются, когда нужно спроектировать интерфейс. Получается весьма продуктивное профессиональное сотрудничество с четким и понятным разделением ответственности. Особенно бодро идут проекты по созданию платежных сервисов. Тут у наших партнеров огромная экспертиза по «внутренностям» платежных систем, а у нас — [большой опыт](https://sobakapav.ru/portfolio) создания понятных простому пользователю интерфейсов. Похвалились, и хватит, давайте к делу.
JazzPay — cервис, позволяющий пользователю платить любой организации за любые товары и услуги. Этот проект стал логическим продолжением [проекта Check'n'Pay](https://sobakapav.ru/portfolio/checknpay) — системы выставления счетов.
## <a name="anchor1" />Плюсы и минусы
Плюсы и минусы нам были уже известны.
>+ **Полное взаимопонимание**
>Нам не пришлось рассказывать, зачем вообще нужно проектировать интерфейсы. Заказчику не приходилось жестко контролировать, чтобы фантазии проектировщика не выбивались из реальности.
>+ **Огромная экспертиза**
>Так исторически сложилось, что все, связанное с электронными деньгами, счетами, банковскими и околобанковскими услугами, нам не просто знакомо. Каждую ночь снится.
>- **Работа на субподряде**
>За конечный результат целиком и полностью отвечал наш заказчик. Он же общался с клиентом и приносил нам ценные указания и прочий фидбек.
На входе у нас были страшные (на самом деле — очень понятные для разработчиков) схемы. Например, такая.
_Реальная схема проведения платежа далека от интерфейса, понятного простому человеку_
Мы проработали ситуации, в которых оказывается конечный пользователь. Для примера приведем две.
>1. **Избавиться от денег**
>Пользователь ищет способ оплатить услуги связи без очередей. Он знает, кому и сколько должен. Он может использовать сервис, скажем, как каталог провайдеров.
>2. **Избавиться от бумажки**
>Более интересная ситуация. У пользователя есть документ с реквизитами организации: счет ЖКХ, штраф ГИБДД или, не дай бог, квитанция от интернет-магазина. Пользователь не хочет идти в ближайший Сбербанк и стоять в очереди. Он хочет куда-нибудь вбить эти реквизиты и быстренько разделаться с задачей.
## <a name="anchor2" />Процесс
Отталкиваясь от того, что инструмент должен получиться предельно простым и универсальным, мы выбрали решение, представляющее собой что-то вроде сервиса одного окна.
_Сразу дали пользователю тот инструмент, за которым он пришел на сайт_
Мы убрали промоблоки, завлекалки и рассказы о том, как платить в интернете. То есть вместо лендинга сразу дали пользователю тот инструмент, за которым он пришел. А описание шагов внедрили в процесс оплаты.
_Все шаги видны сразу, а подробности появляются по мере заполнения данных_
Вот как происходит процесс оплаты по произвольным реквизитам. По мере ввода реквизитов система обрабатывает данные и предполагает:
- каким компаниям из существующего каталога может соответствовать этот набор реквизитов;
- был ли пользователь на этом сервисе раньше.
_Сервис реагирует на каждое действие: дает советы и подсказки_
Мы стремились воспроизвести процесс оплаты в офлайне, поэтому регистрироваться в системе не обязательно. Но от регистрации все-таки есть польза — как минимум не придется заново вводить реквизиты, и можно просматривать историю платежей.
_В 2013 году платежная форма должна была быть именно такой, чтобы не вызывать вопросов у бухгалтерии_
Сделали и полный каталог услуг — посмотреть, за что вообще можно платить.
_Не стали навязывать единственный способ поиска получателя. Если удобней выбирать из каталога — вот он, каталог_
## <a name="anchor4" />Результат
Интерфейс получился в какой-то мере экспериментальным. И за эту смелость хочется похвалить и подрядчика, и конечного заказчика.
С тех пор мы всегда старались давать пользователю конкретно то, что ему нужно. Кстати, понять, как это сделать, очень и очень помогают портреты пользователей и сценарии взаимодействия.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
## <a name="anchor5" />