mPOS

Account profile

Completed in 2015

An interface of mobile application for smartphones and tablets for iOS and Android.

Task

To develop an interface of mobile application for accepting of payments with a possibility of simple customization for any bank by changing the color and bank's logo.

Structure

The development of such a big interface must necessarily start with a plan. In our case its structure acts as the interface plan.

Structure

The application structure not only helps design the interface but also facilitates the work of developers: they can start their part of work without even seeing the application final screens, which significantly saves the development time.

Wireframes

Then the work on the application wireframes started. The application wireframes are images of screens which allow to understand the content and the layout of interface elements relative to each other, but say nothing about the appearance.

Wireframes
Invision

All the application interfaces developed in Flyphant necessarily pass operability check in form of an interactive prototype in Invision already at wireframes stage.

Design

Application screens are designed in such a way that by changing just color and logo the application becomes branded by this or that bank.

Language selection

At first start of the application the language sets automatically, but the selection is up to the user.

Language selection

Activation

Then the user has to pass activation. The email address or the phone number where the activation code is sent is specified.

Activation

Pairing devices

After activation the user is offered to pair the device at once to avoid this step when paying.

Linking devices

Authorization

For the subsequent login to the application it is necessary to enter the password or PIN-code. Several users can be activated in one application.

Authorization

Front store

Depending on the application presets, the user can have a possibility to choose goods from the presented catalogue.

Front store

Payment method

The are two ways of proceeding to the payment: by selecting the goods or by simply indicating the bill sum.

Payment method

Card payment

Before card payment there is a choice of how to pay: through a card reader or through a PIN-pad.

Card payment

Depending on the chosen card payment method, the user's signature might be required.

Signature

After signing, all the data is checked, the telephone number and the email address where the bill will be sent are specified, and the payment is accepted.

The payment is accepted

If the customer wants, and if the printer is connected, the bill is printed at once in his presence.

Printed bill

Settings

In the application settings it is possible to link or unlink the devices, change the password or PIN-code for login or change the application language.

Settings

iPad

A significant share of mobile payments is made using tablet. The interface developed for iPhone was adapted by us for iPad.

iPad

Android

Besides adaptation of application interface for iPad, adaptation for smartphone and tablet under Android operating system was carried out.

Android

The interface development finished with preparation and transfer of all the graphical materials and videos, describing the interface animation, to developers.


Look at other mobile apps

Datsun
Datsun
Alfa-Capital
Alfa-Capital
Life Design
Life Design

Tweet Share on Facebook

По-русски