user interface & best practices (indicative only) · user experience: let your customers know...

MERCHANT ONBOARDING

User Interface & best practices (Indicative Only)

V2.1 – December 2016

•  Flexepin information •  Where to display Flexepin on your site •  User experience •  Deposit Page •  Store Locator •  Deposit journey outcomes •  Propose Flexepin to relevant customers

December 2016 www.flexepin.com 2

Overview

We must ensure proper usage of our logo. è Below are the 3 different logo variations that can be used

Flexepin logos

Main logo – use on white background

Alternative logo – suitable for dark backgrounds

Alternative logo with red border – suitable for clear/

dark backgrounds


Allow for at least 10% additional white space

around the logo

Logo should never be stretched or distorted

Minimum sizes: Screen 20px height Print 4.5mm height

Flexepin logos should always be displayed clearly and properly :


Flexepin logos

Accepted Flexepin descriptions which can be used according to the space available on your site: 1) Long (recommended) “Flexepin is a fast, secure and private method of depositing funds into your account using a prepaid voucher. Vouchers can be purchased at thousands of locations around you. Once you have purchased your Flexepin voucher featuring a unique 16-digit code, you can deposit funds into your account. To do this, select Flexepin as a payment method, enter the 16-digit code printed on your voucher. “ 2) Medium “Flexepin allows you to top up your account with cash. Simply purchase a Flexepin voucher from a participating retail outlet and pay for it with cash. Redeem your Flexepin to instantly deposit the value of the voucher to your account.“ 3) Short “Make secure online purchases using a prepaid voucher, available at selected retail outlets. Simple, instant, secure & private. No need to use your banking details online anymore.”


Flexepin Descriptions

Flexepin vouchers come in different currencies and denominations:   AUD: $20, $30, $50, $100, $200, $300, $500

  CAD : $20, $50, $100, $150, $250, $300, $500

  GBP : £10, £20, £30, £50, £100, £150, £175

  EUR : €10, €20, €30, €50, €100, €200, €240

The user can purchase multiple vouchers to reach the amount desired.

www.flexepin.com 6

Flexepin denominations

December 2016


Where to display Flexepin branding on your site?

Footer Cashier page

Help users to identify quickly that Flexepin is available. Below are few examples:

The higher the Flexepin logo on your cashier page, the easier for our users to identify Flexepin.


Where to display Flexepin branding on your site?

Home page

If your business heavily depends on payment, we recommend to make Flexepin visible as early as possible. Below are few home pages examples:


Where to display Flexepin info on your site? FAQ / Description On the payment page

Flexepin is a fast, secure and private method of depositing funds into your account using a prepaid voucher. Vouchers can be purchased at thousands of locations around you.

Once you have purchased your Flexepin voucher featuring a unique 16-digit code, you can deposit funds into your account. To do this, select Flexepin as a payment method, enter the 16-digit code printed on your voucher.


User experience: let your customers know

The Flexepin customer experience is composed of 3 distinct steps: 1)  “Find a local shop around you selling Flexepin”. This steps always

always need to display a link redirecting to our store locator. 2)  “Buy Flexepin voucher(s) in the desired denomination(s)” 3)  “Pay online safely and instantly”

We recommend you to inform your customers about Flexepin by email or by displaying these info in the relevant section. Describing the correct user experience is critical in order to have successful redemptions.

User experience image examples

Introduction sentence to remind the basics: “Redeem your Flexepin voucher here. You will need your 16 digit voucher code”

Field to insert voucher code. To make it easy for your users to deposit we suggest to enable the following functions:

•  Limit the fireld to 16 digits •  Insert a separation every 4 digits so

that it is easier to read •  Should not accept characters

www.flexepin.com 11

Flexepin deposit page: desktop version

Store locator Either display our store located directly on your page, or add a URL linking to it

3 elements need to be displayed on the Flexepin cashier page:

December 2016

  An alternative to displaying Flexepin store locator directly on your site is to insert an hyperlink redirecting to our store locator:

https://www.flexepin.com/sales_outlet_finder/   Below are few examples from merchants’ websites:

www.flexepin.com 12

Flexepin deposit page: Store locator

December 2016

Integration Guide: UI/UX Journey – “FIND”

  Displays retail locations on

Google Map by displaying selectable dropped pins.

  Map must be zoomable and updates retailer locations on the fly (subject to API loads).

  User clicks on dropped pins or “Listings” to bring up details of nearby retailers.

  Application must allow device to access Location Services.

Flexepin Store Locator

December 2016

www.flexepin.com 14

Flexepin deposit page: mobile version Menu Store locator Pin validation

December 2016

www.flexepin.com 15

Different messages following Pin validation

  Successful deposits need to indicate: o  That the deposit/

redemption is successful

o  Currency and

amount redeemed

Successful deposits Unsuccessful deposits

  Unsuccessful deposits need to indicate: o  That the deposit is

unsuccessful o  the reason of the deposit

failure: “pin already used”, “Pin voucher could not be found” or “voucher has expired”

Mobile App

Pin already used

Mobile App

December 2016

www.flexepin.com 16

Unsuccesful deposits: error messages

  Used voucher:   Expired voucher:

  Voucher not found:

Your €100 voucher has been successfully redeemed

Voucher already used

Voucher pin not found

December 2016

www.flexepin.com 17

Improve your conversion with simple messages

We recommend Flexepin deposits

Use cash to transact online

  Instant   Easy   Secure

Cardless   Private

Find Flexepin shop near me

  Don’tloseyourcustomerswhofaceapaymentdecline

  Offeryourcustomersasecondchancetodepositusingcash

  UseFlexepinasaback-upforcustomersthatareunabletodepositorneverdeposited

  Easytoimplement.

  Improveconversionrate

Recommend Flexepin to your users

December 2016

user interface & best practices (indicative only) · user experience: let your customers know...

Documents