mPOS

Личный кабинет

Завершено в 2015

Интерфейс мобильного приложения для телефона и планшета под iOS и Android.

Задача

Разработать интерфейс мобильного приложения для приема оплаты, с возможностью простой кастомизации под любой банк путем изменения цвета и логотипа банка.

Структура

Разработка такого большого интерфейса непременно должна начинаться с плана. В нашем случае, планом интерфейса выступает его структура.

Структура

Структура приложения не только помогает спроектировать интерфейс, но и облегчает работу разработчикам: еще не видя финальных экранов приложения, они уже могут начинать свою часть работы, что существенно экономит время всей разработки.

Схемы

Далее началась работа над схемами приложения. Схемы приложения представляют собой изображения экранов, которые дают понять о его содержании и расположении элементов интерфейса относительно друг друга, но ничего не говорят об оформлении.

Схемы
Invision

Все разрабатываемые в Flyphant интерфейсы приложения еще на этапе схем обязательно проходят проверку работоспособности в виде интерактивного прототипа в Invision.

Оформление

Оформление схем приложения было выполнено таким образом, что путем замены лишь одного цвета и логотипа приложение становится брендированным под тот или иной банк.

Выбор языка

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

Выбор языка

Активация

Далее пользователю предстоит пройти активацию. Указывается адрес электронной почты или номер телефона, на который отправляется код активации.

Активация

Подключение устройств

После активации пользователю предлагается подключить устройство сразу, чтобы избежать этого шага при оплате.

Подключение устройств

Авторизация

Последующий вход в приложение происходит с указанием пароля или PIN-кода. В одном приложении может быть активировано несколько пользователей.

Авторизация

Товары

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

Товары

Способ оплаты

К оплате можно перейти двумя способами: выбрав товары или просто указав сумму чека.

Способ оплаты

Оплата картой

Перед оплатой картой предлагается выбор как проводить карту: через кардридер или через PIN-пад.

Оплата картой

В зависимости от выбранного способа проведения карты, пользователю может потребоваться оставить свою подпись.

Подпись

После подписи, сверяются все данные, указываются номер телефона и адрес электронной почты, куда будет отправлен чек, и оплата принята.

Оплата прошла успешно

При желании и при наличии подключенного принтера, чек печатается тут же при покупателе.

Печать чека

Настройки

В настройках приложения можно привязать или отвязать устройства, изменить пароль или PIN-код для входа или поменять язык приложения.

Настройки

iPad

Ощутимая доля мобильных платежей производится с использованием планшета. Интерфейс, разработанный под iPhone был нами адаптирован под iPad.

iPad

Android

Помимо адаптации интерфейса приложения под iPad была произведена адаптация под смартфон и планшет под управлением операционной системы Android.

Android

Разработка интерфейса завершилась подготовкой и передачей разработчикам всех графических материалов и видео роликов, описывающих анимацию интерфейса.


Взгляните на другие мобильные приложения

Datsun
Datsun
Альфа-Капитал
Альфа-Капитал
Life Design
Life Design

Твитнуть Поделиться в Facebook

In english