SlideShare ist ein Scribd-Unternehmen logo
1 von 52
Downloaden Sie, um offline zu lesen
Smartphones & Mobile Money:
Principles for UI/UX Design (1.0)
Gregory Chen
Alexandra Fiorillo
Michel HanouchOctober 2016
CONTENTS
Smartphones Will Change Mobile Money........3
21 Principles for Mobile Money UI/UX............7
Good Ideas Worth Further Prototyping.........33
How to Improve the Smartphone Interface...43
Appendix.......................................................49
CGAP holds that Smartphone interfaces are likely to
become the main interface for mobile money use. A
well-designed interface will drive growth, profitability,
and a much improved user experience.
3
Smartphones Will
Change Mobile Money
The predominant USSD interface is clumsy, text heavy,
hierarchical, and a barrier to uptake. Smartphones
open a whole new range of interface options that
can leverage touchscreens, images, graphics, and
sound. A well- designed interface can affect millions
of customers in their day-to-day interactions with
finance. Many market signs point to rising smartphone
usage in the next 5-10 years.
Smartphone interfaces could be a key to unlock
value for low-literate consumers overcoming
communication barriers imposed by early-stage
featurephone-basedmodels.Thereisalsocompelling
evidence that more educated customers appreciate
quicker and more intuitive user experiences –
large and successful digital players such as Uber,
Facebook, and others make large investments in the
user interface and experience. Such investments will
also change mobile money.
GROWTH: transactions, use and revenue per
customer
CUSTOMER ACQUISITION: increased and
diversified customer base
CUSTOMER RETENTION: higher activation
and use, and lower dropouts
TRUST: easier to understand services and fees
CONSUMER PROTECTION: reduce errors and
enable easier access to assistance for customers
CONTROL: more control over their financial
transactions
CGAP holds that a well-designed smartphone
interface will enhance:
FOR PROVIDERS
FOR CUSTOMERS
4
Many Interfaces Make
Avoidable Mistakes
Copy USSD Menus
Overly Rely on Text
Resort to Careless or
Confusing Icons
5
Many Interfaces Make
Avoidable Mistakes
Overload with Information and Options. For example, this menu runs
onto two screens from M-Ledger app.
Copy Online Computer Interfaces not Suited to Smaller Smartphone Screens
6
Adopting UI/UX Principles Will Improve Mobile
Money for Providers and Users
This document presents a set of UI/UX principles for
mobile money smartphone interfaces. The principles are
for basic mobile money services delivered to the mass
market in low-income countries. However, the principles
are also valid for higher income consumers.
These UI/UX principles continue to be debated, vetted,
and improved with the help of an expert group that first
met in April 2016 (see Appendix for experts list). The
content relies heavily on inputs from CGAP partners,
including Wave Money Myanmar, Karandaaz Pakistan,
Small Surfaces, and GRID Impact.
This is the first version (V1.0) of this document. It is not
meant to be comprehensive, but is intended as a starting
set of principles that will improve smartphone interfaces
for basic mobile money functions. Further insights into
mobile money UI/UX are sure to follow as the experiences
grow richer and broader in the months ahead.
LEARNING ABOUT AND EXPLORING THE
SERVICE
REGISTERING ON AN APPLICATION AND
BEGINNING USE
DEPOSITING/WITHDRAWING
MAKING BASIC PAYMENTS
The principles apply to basic mobile
money functions, such as:
21 Principles for
Smartphone Mobile
Money UI/UX
7
8
Allowing new users to explore the service before registering for full use is an opportunity.
There can be video, images, or text that explain how the service can be useful to the user.
Apps that do not do this miss an opportunity to leverage the smartphone as a way to sell the
service and engage new customers.
01 Allow Users to Explore Before Using
The Karandaaz Pakistan design has an introductory set of images about the app people can explore that
then leads to the option to open the account.
This app requires users
to register for an account
before being allowed to
peruse the services within
the app.
9
Access to agents remains critical for mobile money. Providing in-app guidance by using the
GPS location feature on smartphones, and access to agents’ addresses and phone numbers to
find the most convenient or most reliable agent can be a critical aid.
Help Users Find Agents02
Pepele Mobile uses a visual
agent locator feature with a
map and distance filter.
This app identifies agents
that have float so users can
more easily transact.
10
Initial application sign-up is a barrier. Reducing the number of steps and making each step
simple and clear can ease app use. Finding the right balance of ease-of-use can greatly
speed customer acquisition.
Simplify Application Registration03
WAVE Money in Myanmar requires both the user’s mobile phone number as well as a unique code for initial sign in. The 5-step process is customized, simple, and easy to follow.
11
Navigation from hierarchical menus common in USSD are disliked by consumers. Users
like to go directly to the thing they need done. Some refer to this as “shallow” navigation,
allowing users to navigate directly to what they want.
Flatten Menu Hierarchy04
The Karandaaz Pakistan
home screen provides clear
transaction options with little
need for the customer to
search or dig.
This app from Pakistan requires users to first select a category of transactions and then visit a
separate menu.
12
Flatten Menu Hierarchy (cont.)04
The WAVE Money home
screen allows the menu to
pop-up to directly go to
desired function.
The WAVE Money home
screen prioritizes important
actions and keeps the home
menu simple and clear.
The WAVE Money app has a shallow architecture, which makes it easy for customers to go directly
to what they need to do.
Home
HOM
Send Money
SND
Help
HLP
Settings
SET
Buy Airtime
AIR
Transaction
History
HIS
13
Menus should avoid “navigating” and focus on “doing”. The options should be presented as a
limited list. Menus should not use technical jargon and instead offer direct links to action steps.
Focus Menu Choices on Actions05
This pop-up menu focuses
on specific actions users can
choose from.
This home menu focuses on
key actions users frequently
use in Pakistan.
This app from Pakistan lists
transaction options that are
not positioned as actions.
14
Users prefer quick visual cues over text. Visual cues should be selected carefully to link to
users’ experience –enough visual detail to communicate but not too much detail, which
overwhelms.
Reduce Text and Use Visual Cues06
ThisexampleofAndroMoney
uses dynamic, detailed icons
coupled with simple text
language.
The homescreen is
characterized by a menu of
large, detailed illustrations
that visually depict the core
features.
This African mobile money app
relies solely on text, rather than
incorporating icons and visuals. Lower-
literate users may find it difficult to
navigate the app, especially if French
is a secondary language.
15
Reduce Text and Use Visual Cues (cont.)06
The Wave Money app uses
color (green for success), text
(“Success”), and visual cues
(the tick mark and right arrow)
to explain the transaction and
its status to the user.
The Karandaaz Pakistan design uses colors, tick marks, and arrows
to indicate money being sent or received from a user’s wallet. In the
example on the right, green and left-facing arrows mean the user
has received money while red and right-facing arrows mean the user
has sent money.
16
Good icons communicate clear actions and are understandable to local users. Icons initially
expected to work often end up confusing customers. Prototype testing in local environments
is critical.
Design Icons Relevant to Local Users07
In Pakistan, icons that use
multiple colors and less abstract
symbols were easier to recognize.
For example: Help was better as
person with a headset, rather
than a question mark.
In Pakistan flat, single color icons were more difficult for users to
understand. Abstract syntax was also confusing. For example, most
research participants did not associate “?” with help.
Man
Woman
Help
Water Bill and Call Center icons by Kid A and parkjisun from the Noun Project
17
Lock Account (Sign Out) Pay Bill Record (Transaction History) Send Money My Account
Load Credit CNIC Create Account Contact / Help Find Shop (Agent)
Design Icons Relevant to Local Users (cont.)07
Karandaaz Pakistan prototyped illustrated icons – flat, black-and-white icons, multi-colored hand-drawn icons,– but ultimately decided on these computer-
illustrated multi-colored icons. Each icon focuses on an action that is understood in the Pakistani environment. Consumers preferred these because they
are clear and specific, but do not have excessive detail. These icons depict an action step that clearly communicates.
LOAD CREDIT
LOCK ACCOUNT
CNIC
BILL PAY
CREATE ACCOUNT
RECORD
CONTACT / HELP
SENDING MONEY
FIND SHOP
(AGENT)
WALLET
18
Use plain language and make it consistent with how people communicate locally. Choose
words that are locally used in everyday discussion.
Use Simple and Familiar Menu Terms08
The Saida app, which links
to your M-Pesa account,
uses colloquial and personal
language to offer assistance
to customers.
The Karandaaz Pakistan design uses “Find Shop” language
rather than the more common “Local Agent” because in
Pakistan, this is the colloquial, common phrase.
The Chillr app, while text-
heavy, uses simple language
in education messaging.
In this Pakistan app, the term
“nick setting” is probably
not familiar to users.
19
Leverage Android design practices that are familiar to users. Input fields, push notifications,
header bars, menus, and other patterns should be consistent with design and navigation
users may already be familiar with. For example, new apps in the Kenyan market have
adopted language, flows, and visual cues in-line with M-Pesa.
Build on Users’ Familiarity with Smartphones09
This app makes strong use
of patterns from the Android
UI Pattern Library, which may
be more familiar to Android
users.
The Android Pattern Library is a great resource for designers who want to follow industry-standard design.
https://developer.android.com/design/index.html
20
Present a few choices based on past usage or most popular actions. Where possible build in
pre-filled and prioritized choices based on each user’s prior use.
Customize Transaction Choices10
“Pay Bill” is an icon on the
home screen.
The Pay Bill menu is
organized by categories.
Each category shows an
alphabetical list of providers.
Providers that a user has
previously transacted with
appear at the top of the list.
21
Apps can speed up many transactions and key decisions by automatically pulling information
from a user’s contact list. Using information already saved to the phone can help quickly fill
in transactions and reduce key-punching errors.
Auto-fill from the Address Book + Transaction History11
The Wave Money app links
to the user’s contact list and
lists recent recipients first.
Those with the blue flower
icon indicate others who are
registered with Wave Money.
Karandaaz Pakistan also
allows the user to choose a
recipient from her contact
list, with recent contacts
listed first.
This app from Pakistan
requires the user to input the
recipient’s mobile account
number. This may lead to
input errors.
22
The sequence, use of feedback and ability to make corrections can minimize human error.
This will reduce customer frustration and improve complaints handling, while also building
user confidence and fluency.
Auto-Check to Minimize Human Error12
In this example from Karandaaz
Pakistan, a user is trying to
send more than his/her current
balance allows. The design
does not wait for the user to
press “Next” before alerting
the user to the error.
23
It is easy to overwhelm customers with too much information or too many choices. Keep
things simple, focused, and consistent, allowing users to make simple decisions.
Display Information in Digestible Chunks13
An early WAVE money
prototype for airtime purchases
allowed purchasing for oneself
and others on the same screen.
This overwhelmed customers
with too many choices.
In the WAVE Money interface, designers separated airtime
purchases (for the customer’s versus someone else’s wallet) into
two screens. They also broke the choice down into a two-screen
process: who, then how much.
24
Every decision or action is a potential misstep. Allow customers to confirm steps and assure
them along the way by reinforcing each action.
Reassure with Transaction Confirmations14
Easypaisa Telenor in Pakistan
offers a confirmation screen
after a successful transaction.
The WAVE Money app uses several different confirmation and
assurance design features. In addition to allowing customers to review
a step prior to confirmation, the app also provides a confirmation
“receipt” with several visual cues to convey a successful transaction.
25
Reassure with Transaction Confirmations (cont.)14
A brief “sending” animation let’s the user know that his/her transaction is being processed. Even if the
transaction is instant, this animation helps a user feel confident that his/her transaction was successful. The
Karandaaz Pakistan design shares a detailed transaction receipt and provides confirmation in the form of
the Virtual Assistant.
The Karandaaz Pakistan design provides an opportunity for the user
to confirm the transaction prior to sending money. It also provides
detailed transaction confirmations, which include the amount sent,
associated fee, date and time of transaction, and transaction ID
number.
26
Customers like to review past transactions as reminders, for evidence in the event of a
mistake, and for peace of mind. Allow them to do the same in the app, while also making
it interactive so they can easily repeat past transactions. Where possible, also create
opportunities for users to see the status of a transaction.
Leave a Clear Trail of Transaction Histories15
The design for Karandaaz in
Pakistan uses visual cues—
both icons and colors—to help
identify types of transactions.
Any transaction summary can
be expanded to show the full
detail of the transactions as well.
By pressing “Send Money”
on the transaction detail
screen, a user can initiate
a new transaction with this
contact.
The transaction detail screen
shows additional details
about the transaction. It also
shows recent transactions
with this particular contact.
The Jana Cash app also uses visual cues
to indicate transaction history, including
the interesting option to show certain
transactions as “in progress” or “pending”
or “failed”. Jana Cash is very transparent
about transactions and informs customers
how the service works.
27
Key instructions should appear at the moment it is needed. Seeking helpful information
should not require a user to exit a transaction in-progress but rather should appear within
the transaction flow. Advice can react to the customer’s interaction with the app, making the
support seem personalized and contextual.
Provide Instructions When Needed16
At any point in the transaction flow a user can receive contextual
help by opening the Assistant. The help throughout the transaction
flow was easy to discover and appreciated by customers. Even
customers who did not need help welcomed this feature because
they might share their phone with someone else who would benefit
from the help.
In this example from GCash, the user
is reminded of transaction processing
time as well as fee deductions during
the bill payment flow. Although the
reminder is included as a footnote, it
is helpful to the customer who may
be unaware of this information.
Support was integrated into transactions in
the WAVE Money app. Customers receive
clear guidance (using simple language) at the
moment they need it, as part of the transaction.
This gives customers the comfort that they will
be supported through transactions, and helps
reduce confusion.
In this example, helpful
information is stored in the
FAQs section of the app,
which requires users to
search for specific topics
rather than being offered the
advice in a transaction.
28
Handling errors is an opportunity to address frustrations for end users. Present users with
clear pathways to resolve problems. Don’t make users feel as if it is their fault.
Handle Errors by Providing Next Step Solutions17
In this example from the
Karandaaz Pakistan design, a
user has tried to press “Next”
without properly completing the
form. The design identifies the
error and also gives an instruction
about the mistake.
The Karandaaz Pakistan design provides feedback to the user
when an error has occurred without taking the user out of the
transaction flow. When possible, error feedback should happen
in real time. In the example, a user is trying to send more than
his/her current balance allows and receives an error as he/she
types the amount. The design does not wait for the user to press
“Next” before showing the error.
Key by Nadir Balcikli from the Noun Project
29
Customized simple keyboards ease user inputs and navigation.
Customize and Simplify Keyboards18
In the WAVE Money app, a
simplified key board appears
for input.
In this prototype from the Karandaaz
Pakistan work, research participants had
to tap on the field to open the native
keyboard. Many participants struggled
with this. Additionally, the keyboard
showed unnecessary characters that did
not correspond to the transaction at hand.
30
Inserting a fee calculator alongside transactions provides an immediate easy-to-use
feedback tool for users.
Auto-Calculate Fees During Transactions19
The WAVE Money app automatically calculates fees during the
transaction flow so users can immediately see the cost of the
transaction.
In the WAVE Money Myanmar
prototype testing, fee slab
tables were consistently hard
for customers to understand.
Customers were overwhelmed
by information about multiple
fee levels.
31
Transactions can take place over multiple screens. But by consolidating summary transaction
information onto one screen, users can build confidence because they have a sense they know
what they are doing and will likely experience fewer errors.
Provide Full Transaction Details on One Screen to
Finalize Transactions
20
This portion of the Karandaaz Pakistan send money flow shows how single screens are focused to one key decision; this prevents the user from being
overwhelmed.
Key by Nadir Balcikli from the Noun Project
32
Having the account balance easily accessible is reassuring for the client and also very useful.
Design should also leave room for users to easily hide their balance on the screen away from
the prying eyes of family or others. Users want both quick information on their balances and
also privacy.
Make Account Balance Easy to See and Hide21
A user can hide his/her balance by tapping on the balance on
the homepage. Once hidden, tapping his/her name will make the
balance appear again. This addresses privacy concerns some users
may have.
Good Ideas Worth
Further Prototyping
34
The most common reason to call a call center is to reset PIN codes. Apps may allow users to
undertake PIN reset directly.
Allow for PIN Resets in the App?
Users can change their PINs in the WAVE Money app. This wireframe shows a flow for users who remember their PIN but want to reset it for some
reason. In addition to users resetting their PIN in the app, providers may want to create flows that allow users to reset their own PINs if forgotten,
rather than having to call the call center.
35
Many users like the option to hear explanations, instructions, confirmations, or other content
in their local language. Providing easy, readily accessible, in-process audio is an added
enabler for many users.
Use Audio Instructions in Local Language?
The Karandaaz Pakistan design
includes an audio function for
users who prefer listening to
instructions or explanations. In this
case, pressing the speaker icon
will play an audio recording that
matches the text of the Assistant.
36
Using images of currency can help customers who have difficulty with numeracy. This may be
particularly important in countries with historical inflation and where denominations are very
large—thousands and millions. Visual representation of bills may help those who struggle
with periods, commas, and zeros.
Visually Represent Large Monetary Values?
The Karandaaz Pakistan design was
testedusingcurrencyrepresentations
of transaction amounts, particularly
for customers who might be less
literate. The Rupee denominations
match the amounts articulated in the
virtual assistant’s comment.
37
Sharing information about other customers’ usage encourages adoption. Be careful,
however, as users may not want to give out detailed information about themselves. Find the
balance between sharing and privacy.
Link Users with Their Social Networks?
The Saida interface
integrates WhatsApp
as a way to acquire new
customers and expand
the potential usage of its
services.
Karandaaz Pakistan
encourages users to share
transactions on social media.
Connecting with Facebook
makes it easy to find contacts
and share activity.
Customers who prototype tested the WAVE
Money app found it unacceptable to share
information about how many transactions they
had done with the service. On the other hand,
customers had no concerns about sharing
status levels (e.g., bronze, silver, gold), even if
these levels were linked to transaction volumes.
38
Begin with Simple Instructions, Add Complexity over Time?
Improve usability using only the minimum information required for the task. Allowing users
to learn through use (rather than by instruction) empowers users. Build in more sophisticated
features over time as users gain experience.
The WAVE Money design
helps customers understand
complex transaction
histories by teaching them
first how to read individual
transaction records.
Once they had experience
reading these individual
records, it was easy to
progress to reading a set of
records together in a history.
39
Depending on the context, apps can allow new users to register for an account remotely.
This might include taking a photo of an ID, taking a selfie, and entering some basic
registration information.
Enable Users to Self-Register?
The WAVE Money design shown here (and continued on the following page) shows an eight-step process that guides users through the process of
registering for an account remotely. This is one possible approach to self-registration that providers might want to test further.
40
Enable Users to Self-Register? (cont.)
41
Agents are an essential part of mobile money operations. Providing customers the
opportunity to rate agents or easily register complaints can be a powerful tool to improve
service and customer satisfaction.
Empower Customers to Rate Agents?
One possibility is to
allow users to rate agents
after completing certain
transactions like withdrawing
money. Users could search
for agents based on their
customer rating score.
42
Many customers have unsatisfactory experiences seeking help from customer support phone lines,
often giving up after long wait times. Testing accessible channels for customers to get immediate
help for problems, using text messaging, video, and audio could be an interesting alternative.
Make Customer Support Accessible Through Multiple
Channels?
IDEO.org prototyped a WhatsApp chat as an alternate, complementary customer-service channel with live
human responses from a telecom staff person.
How to Improve the
Smartphone Interface
44
Design improves with feedback from a range of representative customers – existing users, potential
users, and “extreme end users” (super-users and non-users). Insights can come from many different
kinds of potential users. Designing to be inclusive of diverse customer segments will broaden appeal
and improve scalability.
Test Design with Diverse Sample of Customers
Through participatory activities with mobile money
customers and agents, GRID Impact tested various design
concepts and features. These activities included card sorting
to select appropriate visual icons and transaction flows, icon
co-design to develop improved visual language, and task-
based transactions to test the logic of flows.
GRID Impact tested the two interaction model concepts
using low-fidelity prototypes. These paper-based prototypes
allowed the team to capture feedback from users and agents
on the style, design, icons, flows, and overall structure of the
smartphone app menu.
GRID Impact also used a high-fidelity clickable prototype to
generate feedback from users on how the app worked. The
team used task-based transactions to see how users engaged
with the app, where they encountered difficulties, and how
they interpreted transaction flows.
45
Strong design requires multiple versions. Begin with low-fidelity (paper) and shift to higher-fidelity
(electronic and clickable) prototypes. Designers should not be afraid to put paper prototypes or
incomplete electronic versions of their concepts in front of users. Multiple iterations testing and fixing
along the way produces superior results.
Adopt a Rapid Iterative Design Process
IDEATION
ELECTRONIC
PROTOTYPE
PAPER
PROTOTYPE
46
Be Willing to Discard
Many “great” ideas should be thrown away during the iterative design process. What concepts you
choose not to include are as important as those that you keep.
In the WAVE Money example, one design
approach considered for the application used
a “chat” model (following Viber, which is very
popular in Myanmar). Financial transactions
were grouped around individual people (like
a chat history). Customers felt that transaction
histories were not important enough to
always be visible. So this idea was discarded.
The WAVE Money team wanted to make transactions more personal and
meaningful. One idea was to allow the sender to include “stickers” with
a transaction. This idea failed, but resulted in a very popular “say thanks”
feature for recipients.
47
No detail is too small to test: colors, terms, placement, icons. Each detail is an opportunity to avoid
confusion and improve the customer experience. Multiple iterations of prototypes allow many
opportunities to fix and improve small details along the way.
Tweak Small Details to Make a Big Difference
During prototype testing with users in Pakistan, “X” was
received well for “cancel” because people associate “X”
with wrong or mistake. However, “X” was not good to use
for “close,” because people were not familiar with this UI
pattern.
Despite the “left-to-right” arrow being
counterintuitive when coupled with
“right-to-left” Urdu text in Pakistan, it was
the most widely understood symbol for
moving to the next step. This was both
surprising and an important finding that
might have been otherwise overlooked.
Call Center by parkjisun from the Noun Project
48
The integration of business operations, app development, and design from the beginning throughout
is critical. This builds in business needs, technical constraints/options, and design to find the most
practical solutions. This can add time to the iteration design, but will produce better results.
Involve Business Managers and App Developers in
UI / UX Design at Every Step
App
Development
(the coders)
UX / UI Design
(human-centered
specialists)
Business Strategy
and Operations
(managers)
Appendix:
Additional Resources
Acknowledgments
50
Additional Resources
There are many practical resources available to providers interested in developing smartphone
interfaces for mobile money using a user-centered design approach. This Appendix offers a series of
toolkits, guides, and practical applications of UX / UI design for smartphone interfaces.
CGAP Publications Understanding HCD + UX Design
Customer Experience Toolkit
https://www.dropbox.com/s/
mopjha4og1te0j1/CXT_VF.pdf?dl=0
Don’t Make Me Think, Revisited
https://www.amazon.com/Don’t-Make-Think-
Revisited-Usability/dp/0321965515
Designing Customer-Centric Branchless
Banking Offerings
http://www.cgap.org/publications/designing-
customer-centric-branchless-banking-offerings
Principles of Mobile App Design
https://www.dropbox.com/s/flg27yds269rl7w/
principles-of-mobile-app-design-engage-users-
and-drive-conversions.pdf?dl=0
What Human-Centered Design Means for
Financial Inclusion
http://www.cgap.org/sites/default/files/
CGAP_Insights_into_Action_final.pdf
Exploring Alternative Product Concepts
http://www.slideshare.net/CGAP/exploring-
alternative-api-product-concepts
51
Additional Resources
Smartphone User Interface and User Experience Design
Design for Mobile Money Toolkit by GRID Impact for Karandaaz Pakistan
Smartphone User Interface and User Experience
Design for Mobile Money in Pakistan Design Toolkit
http://karandaaz.com.pk/toolkit
Toolkit Overview Wireframes Icons & Illustrations Prototype
52
Acknowledgments
The research necessary for this learning and publication have been carried out together with
CGAP partners. In particular Wave Money and Small Surfaces have been key partners in
Myanmar. Karandaaz Pakistan and GRID Impact have been key partners in Pakistan.
Expert reference group on smartphone UI/UX
Alexandra Fiorillo		 GRID Impact
Antonique Koning		 CGAP
Brett Matthews		 My Oral Village
Camille Busette 		 CGAP
Carla Cathey dal Cais		 CGAP
Cathy Smith			Digitai
Dave Kim			BMGF
David Del Ser			 BFA
Emmanuel Crown		 CGAP
Eric Tyler			CGAP
Evans Munyuki		 Barclays Africa
Gabriel White			 Small Surfaces
Gayatri Murthy		 CGAP
Gerhard Coetzee		 CGAP
Greg Chen			CGAP
Gunnar Camner		 GSMA
Harry West			Frog
Indrani Medhi Thies		 Microsoft Research
Jesse Wild Sneller		 IDEO.org
The authors of this guide are Gregory Chen and Michel Hanouch, both from CGAP, and Alexandra Fiorillo, of
GRID Impact. The authors are grateful for the insights and experience of the participants of the April 2016 CGAP
event on Smartphone Applications & Financial Inclusion as well as colleagues who provided feedback on the
content in this guide.
John Won			IDEO.org
Jonathan Donner		 Caribou Digital
Kamal Quadir			bKash
Karel Leon			CGAP
Kwasi Donkor			 USAID
Maria Fernandez Vidal	 CGAP
Mark Wensley			 MasterCard Foundation
Marve Mullavu-Biggedi	 CGAP
Michel Hanouch		 CGAP
Muhammad Irfanul Huq	 bKash
Robert Fabricant		 Dalberg
Sophia Hasnain		 GSMA
Steve Rasmussen		 CGAP
Tilman Ehrbeck		 Omidyar Network
Valeria Betherol		 Orange (Labs)
Valerie Ledunois		 Orange (Labs)
Vered Konijnendijk		 Wave Money
Xavier Faz			CGAP
Yanina Seltzer			CGAP

Weitere ähnliche Inhalte

Was ist angesagt?

UX STRAT Online 2021 Presentation by Sudha Jamthe
UX STRAT Online 2021 Presentation by Sudha JamtheUX STRAT Online 2021 Presentation by Sudha Jamthe
UX STRAT Online 2021 Presentation by Sudha JamtheUX STRAT
 
UX & Design Riyadh: Usability Guidelines for Websites & Mobile Apps
UX & Design Riyadh: Usability Guidelines for Websites & Mobile AppsUX & Design Riyadh: Usability Guidelines for Websites & Mobile Apps
UX & Design Riyadh: Usability Guidelines for Websites & Mobile AppsUXBERT
 
User Experience Audit by Gridle
User Experience Audit by GridleUser Experience Audit by Gridle
User Experience Audit by GridleClientjoy.io
 
UX Patterns & Design Systems
UX Patterns & Design SystemsUX Patterns & Design Systems
UX Patterns & Design SystemsRoshan Ravi
 
Intro To Mobile Analytics
Intro To Mobile AnalyticsIntro To Mobile Analytics
Intro To Mobile AnalyticsTapmint
 
Ux - Customer Journey Map
Ux - Customer Journey MapUx - Customer Journey Map
Ux - Customer Journey MapAshfan Ahamed
 
UserZoom Education Series - Tips & Tricks: Task Validation
UserZoom Education Series - Tips & Tricks: Task ValidationUserZoom Education Series - Tips & Tricks: Task Validation
UserZoom Education Series - Tips & Tricks: Task ValidationUserZoom
 
Demystify Salesforce Bulk API
Demystify Salesforce Bulk APIDemystify Salesforce Bulk API
Demystify Salesforce Bulk APIDhanik Sahni
 
Google UX Design Certificate - Sabonotes App Design Case Study Slide Deck
Google UX Design Certificate - Sabonotes App Design Case Study Slide DeckGoogle UX Design Certificate - Sabonotes App Design Case Study Slide Deck
Google UX Design Certificate - Sabonotes App Design Case Study Slide DeckSloane Kuo
 
Digital 2021 Yemen (January 2021) v01
Digital 2021 Yemen (January 2021) v01Digital 2021 Yemen (January 2021) v01
Digital 2021 Yemen (January 2021) v01DataReportal
 
ASO Guide 2020 - App Store Optimization Manual by PICKASO & thetool
ASO Guide 2020 - App Store Optimization Manual by PICKASO & thetoolASO Guide 2020 - App Store Optimization Manual by PICKASO & thetool
ASO Guide 2020 - App Store Optimization Manual by PICKASO & thetoolPICKASO App Marketing
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designMorgan McKeagney
 
The HEART framework for UX metrics
The HEART framework for UX metricsThe HEART framework for UX metrics
The HEART framework for UX metricsUX Nights
 
Digital 2022: Essential TikTok Stats for Q1 2022 v01
Digital 2022: Essential TikTok Stats for Q1 2022 v01Digital 2022: Essential TikTok Stats for Q1 2022 v01
Digital 2022: Essential TikTok Stats for Q1 2022 v01DataReportal
 
WeChat mini programs in China 2020 report by daxue consulting
WeChat mini programs in China 2020 report by daxue consultingWeChat mini programs in China 2020 report by daxue consulting
WeChat mini programs in China 2020 report by daxue consultingDaxue Consulting
 
Mini UX Workshop: Creating Persona & Scenario
Mini UX Workshop: Creating Persona & ScenarioMini UX Workshop: Creating Persona & Scenario
Mini UX Workshop: Creating Persona & ScenarioNatt Phenjati
 
Being a product manager - session 4 (metrics)
Being a product manager - session 4 (metrics)Being a product manager - session 4 (metrics)
Being a product manager - session 4 (metrics)Aakash Sotta
 

Was ist angesagt? (20)

UX STRAT Online 2021 Presentation by Sudha Jamthe
UX STRAT Online 2021 Presentation by Sudha JamtheUX STRAT Online 2021 Presentation by Sudha Jamthe
UX STRAT Online 2021 Presentation by Sudha Jamthe
 
UX & Design Riyadh: Usability Guidelines for Websites & Mobile Apps
UX & Design Riyadh: Usability Guidelines for Websites & Mobile AppsUX & Design Riyadh: Usability Guidelines for Websites & Mobile Apps
UX & Design Riyadh: Usability Guidelines for Websites & Mobile Apps
 
User Experience Audit by Gridle
User Experience Audit by GridleUser Experience Audit by Gridle
User Experience Audit by Gridle
 
UX Patterns & Design Systems
UX Patterns & Design SystemsUX Patterns & Design Systems
UX Patterns & Design Systems
 
Introduction to UX Research
Introduction to UX ResearchIntroduction to UX Research
Introduction to UX Research
 
Intro To Mobile Analytics
Intro To Mobile AnalyticsIntro To Mobile Analytics
Intro To Mobile Analytics
 
Ux - Customer Journey Map
Ux - Customer Journey MapUx - Customer Journey Map
Ux - Customer Journey Map
 
UserZoom Education Series - Tips & Tricks: Task Validation
UserZoom Education Series - Tips & Tricks: Task ValidationUserZoom Education Series - Tips & Tricks: Task Validation
UserZoom Education Series - Tips & Tricks: Task Validation
 
Demystify Salesforce Bulk API
Demystify Salesforce Bulk APIDemystify Salesforce Bulk API
Demystify Salesforce Bulk API
 
Google UX Design Certificate - Sabonotes App Design Case Study Slide Deck
Google UX Design Certificate - Sabonotes App Design Case Study Slide DeckGoogle UX Design Certificate - Sabonotes App Design Case Study Slide Deck
Google UX Design Certificate - Sabonotes App Design Case Study Slide Deck
 
Digital 2021 Yemen (January 2021) v01
Digital 2021 Yemen (January 2021) v01Digital 2021 Yemen (January 2021) v01
Digital 2021 Yemen (January 2021) v01
 
Ux & ui
Ux & uiUx & ui
Ux & ui
 
ASO Guide 2020 - App Store Optimization Manual by PICKASO & thetool
ASO Guide 2020 - App Store Optimization Manual by PICKASO & thetoolASO Guide 2020 - App Store Optimization Manual by PICKASO & thetool
ASO Guide 2020 - App Store Optimization Manual by PICKASO & thetool
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
 
The HEART framework for UX metrics
The HEART framework for UX metricsThe HEART framework for UX metrics
The HEART framework for UX metrics
 
Digital 2022: Essential TikTok Stats for Q1 2022 v01
Digital 2022: Essential TikTok Stats for Q1 2022 v01Digital 2022: Essential TikTok Stats for Q1 2022 v01
Digital 2022: Essential TikTok Stats for Q1 2022 v01
 
WeChat mini programs in China 2020 report by daxue consulting
WeChat mini programs in China 2020 report by daxue consultingWeChat mini programs in China 2020 report by daxue consulting
WeChat mini programs in China 2020 report by daxue consulting
 
Mini UX Workshop: Creating Persona & Scenario
Mini UX Workshop: Creating Persona & ScenarioMini UX Workshop: Creating Persona & Scenario
Mini UX Workshop: Creating Persona & Scenario
 
Being a product manager - session 4 (metrics)
Being a product manager - session 4 (metrics)Being a product manager - session 4 (metrics)
Being a product manager - session 4 (metrics)
 
Bill on the Hill
Bill on the HillBill on the Hill
Bill on the Hill
 

Andere mochten auch

An Introduction to Digital Credit: Resources to Plan a Deployment
An Introduction to Digital Credit: Resources to Plan a DeploymentAn Introduction to Digital Credit: Resources to Plan a Deployment
An Introduction to Digital Credit: Resources to Plan a DeploymentCGAP
 
Business Models in Digital Financial Services
Business Models in Digital Financial ServicesBusiness Models in Digital Financial Services
Business Models in Digital Financial ServicesCGAP
 
Digital Rails: How Providers Can Unlock Innovation in DFS Ecosystems Through ...
Digital Rails: How Providers Can Unlock Innovation in DFS Ecosystems Through ...Digital Rails: How Providers Can Unlock Innovation in DFS Ecosystems Through ...
Digital Rails: How Providers Can Unlock Innovation in DFS Ecosystems Through ...CGAP
 
Global Landscape Study on P2G Payments: Summary of in-country consumer resear...
Global Landscape Study on P2G Payments: Summary of in-country consumer resear...Global Landscape Study on P2G Payments: Summary of in-country consumer resear...
Global Landscape Study on P2G Payments: Summary of in-country consumer resear...CGAP
 
Optimizing Apps for Technical Constraints in Emerging Markets
Optimizing Apps for Technical Constraints in Emerging MarketsOptimizing Apps for Technical Constraints in Emerging Markets
Optimizing Apps for Technical Constraints in Emerging MarketsCGAP
 
Services Financiers Numériques pour les Producteurs de Cacao en Côte d’Ivoire
Services Financiers Numériques pour les Producteurs de Cacao en Côte d’IvoireServices Financiers Numériques pour les Producteurs de Cacao en Côte d’Ivoire
Services Financiers Numériques pour les Producteurs de Cacao en Côte d’IvoireCGAP
 
Digital Finance Use Cases
Digital Finance Use CasesDigital Finance Use Cases
Digital Finance Use CasesCGAP
 
OXXO's Saldazo: Successes and Challenges
OXXO's Saldazo: Successes and ChallengesOXXO's Saldazo: Successes and Challenges
OXXO's Saldazo: Successes and ChallengesCGAP
 
Customer Segmentation: Design and Delivery (Webinar)
Customer Segmentation: Design and Delivery (Webinar)Customer Segmentation: Design and Delivery (Webinar)
Customer Segmentation: Design and Delivery (Webinar)CGAP
 
Digital Financial Services for Cocoa Farmers in Côte d'Ivoire
Digital Financial Services for Cocoa Farmers in Côte d'IvoireDigital Financial Services for Cocoa Farmers in Côte d'Ivoire
Digital Financial Services for Cocoa Farmers in Côte d'IvoireCGAP
 
Why Star Ratings Matter for Financial Inclusion
Why Star Ratings Matter for Financial InclusionWhy Star Ratings Matter for Financial Inclusion
Why Star Ratings Matter for Financial InclusionCGAP
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile SolutionsDMI
 
Financial inclusion Insights: Rwanda 2015
Financial inclusion Insights: Rwanda 2015Financial inclusion Insights: Rwanda 2015
Financial inclusion Insights: Rwanda 2015CGAP
 
Mobile Money in Indian Perspective
Mobile Money in Indian PerspectiveMobile Money in Indian Perspective
Mobile Money in Indian PerspectiveManish Saxena
 
Digital Finance and Innovations in Education: Workshop Report
Digital Finance and Innovations in Education: Workshop ReportDigital Finance and Innovations in Education: Workshop Report
Digital Finance and Innovations in Education: Workshop ReportCGAP
 
Financial Inclusion Insights: Ghana 2015
Financial Inclusion Insights: Ghana 2015Financial Inclusion Insights: Ghana 2015
Financial Inclusion Insights: Ghana 2015CGAP
 
Doing Digital Finance Right
Doing Digital Finance RightDoing Digital Finance Right
Doing Digital Finance RightCGAP
 
Introduction to Digital Financial Services
Introduction to Digital Financial ServicesIntroduction to Digital Financial Services
Introduction to Digital Financial ServicesCGAP
 
The Global Landscape of Digital Finance Innovations
The Global Landscape of Digital Finance InnovationsThe Global Landscape of Digital Finance Innovations
The Global Landscape of Digital Finance InnovationsCGAP
 
Operational innovations in AML/CFT compliance processes and financial inclus...
Operational innovations in AML/CFT  compliance processes and financial inclus...Operational innovations in AML/CFT  compliance processes and financial inclus...
Operational innovations in AML/CFT compliance processes and financial inclus...CGAP
 

Andere mochten auch (20)

An Introduction to Digital Credit: Resources to Plan a Deployment
An Introduction to Digital Credit: Resources to Plan a DeploymentAn Introduction to Digital Credit: Resources to Plan a Deployment
An Introduction to Digital Credit: Resources to Plan a Deployment
 
Business Models in Digital Financial Services
Business Models in Digital Financial ServicesBusiness Models in Digital Financial Services
Business Models in Digital Financial Services
 
Digital Rails: How Providers Can Unlock Innovation in DFS Ecosystems Through ...
Digital Rails: How Providers Can Unlock Innovation in DFS Ecosystems Through ...Digital Rails: How Providers Can Unlock Innovation in DFS Ecosystems Through ...
Digital Rails: How Providers Can Unlock Innovation in DFS Ecosystems Through ...
 
Global Landscape Study on P2G Payments: Summary of in-country consumer resear...
Global Landscape Study on P2G Payments: Summary of in-country consumer resear...Global Landscape Study on P2G Payments: Summary of in-country consumer resear...
Global Landscape Study on P2G Payments: Summary of in-country consumer resear...
 
Optimizing Apps for Technical Constraints in Emerging Markets
Optimizing Apps for Technical Constraints in Emerging MarketsOptimizing Apps for Technical Constraints in Emerging Markets
Optimizing Apps for Technical Constraints in Emerging Markets
 
Services Financiers Numériques pour les Producteurs de Cacao en Côte d’Ivoire
Services Financiers Numériques pour les Producteurs de Cacao en Côte d’IvoireServices Financiers Numériques pour les Producteurs de Cacao en Côte d’Ivoire
Services Financiers Numériques pour les Producteurs de Cacao en Côte d’Ivoire
 
Digital Finance Use Cases
Digital Finance Use CasesDigital Finance Use Cases
Digital Finance Use Cases
 
OXXO's Saldazo: Successes and Challenges
OXXO's Saldazo: Successes and ChallengesOXXO's Saldazo: Successes and Challenges
OXXO's Saldazo: Successes and Challenges
 
Customer Segmentation: Design and Delivery (Webinar)
Customer Segmentation: Design and Delivery (Webinar)Customer Segmentation: Design and Delivery (Webinar)
Customer Segmentation: Design and Delivery (Webinar)
 
Digital Financial Services for Cocoa Farmers in Côte d'Ivoire
Digital Financial Services for Cocoa Farmers in Côte d'IvoireDigital Financial Services for Cocoa Farmers in Côte d'Ivoire
Digital Financial Services for Cocoa Farmers in Côte d'Ivoire
 
Why Star Ratings Matter for Financial Inclusion
Why Star Ratings Matter for Financial InclusionWhy Star Ratings Matter for Financial Inclusion
Why Star Ratings Matter for Financial Inclusion
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
 
Financial inclusion Insights: Rwanda 2015
Financial inclusion Insights: Rwanda 2015Financial inclusion Insights: Rwanda 2015
Financial inclusion Insights: Rwanda 2015
 
Mobile Money in Indian Perspective
Mobile Money in Indian PerspectiveMobile Money in Indian Perspective
Mobile Money in Indian Perspective
 
Digital Finance and Innovations in Education: Workshop Report
Digital Finance and Innovations in Education: Workshop ReportDigital Finance and Innovations in Education: Workshop Report
Digital Finance and Innovations in Education: Workshop Report
 
Financial Inclusion Insights: Ghana 2015
Financial Inclusion Insights: Ghana 2015Financial Inclusion Insights: Ghana 2015
Financial Inclusion Insights: Ghana 2015
 
Doing Digital Finance Right
Doing Digital Finance RightDoing Digital Finance Right
Doing Digital Finance Right
 
Introduction to Digital Financial Services
Introduction to Digital Financial ServicesIntroduction to Digital Financial Services
Introduction to Digital Financial Services
 
The Global Landscape of Digital Finance Innovations
The Global Landscape of Digital Finance InnovationsThe Global Landscape of Digital Finance Innovations
The Global Landscape of Digital Finance Innovations
 
Operational innovations in AML/CFT compliance processes and financial inclus...
Operational innovations in AML/CFT  compliance processes and financial inclus...Operational innovations in AML/CFT  compliance processes and financial inclus...
Operational innovations in AML/CFT compliance processes and financial inclus...
 

Ähnlich wie Smartphones & Mobile Money: Principles for UI/UX Design (1.0)

13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design 13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design BugRaptors
 
Boost a Fintech Startup's Success Through UX Design
Boost a Fintech Startup's Success Through UX DesignBoost a Fintech Startup's Success Through UX Design
Boost a Fintech Startup's Success Through UX DesignFibonalabs
 
The 10 productive app development companies in 2019
The 10 productive app development companies in 2019The 10 productive app development companies in 2019
The 10 productive app development companies in 2019Merry D'souza
 
Learn the best practices for UIUX design in Banking applications
Learn the best practices for UIUX design in Banking applicationsLearn the best practices for UIUX design in Banking applications
Learn the best practices for UIUX design in Banking applicationsITIO Innovex
 
Pinky's Westside Grill Mobile Marketing Plan
Pinky's Westside Grill Mobile Marketing PlanPinky's Westside Grill Mobile Marketing Plan
Pinky's Westside Grill Mobile Marketing PlanJeffreyHutto
 
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdf
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdfMobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdf
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdfWebGuru Infosystems Pvt. Ltd.
 
How to build an online payment app development like pay pal
How to build an online payment app development like pay palHow to build an online payment app development like pay pal
How to build an online payment app development like pay palNoman Shaikh
 
Ezone creative pitch
Ezone creative pitchEzone creative pitch
Ezone creative pitchChaitrakps
 
What is the Cost of Building a Fintech App.docx.pdf
What is the Cost of Building a Fintech App.docx.pdfWhat is the Cost of Building a Fintech App.docx.pdf
What is the Cost of Building a Fintech App.docx.pdfTechugo
 
Super Apps in Banking: A Massive Revolution!
 Super Apps in Banking: A Massive Revolution! Super Apps in Banking: A Massive Revolution!
Super Apps in Banking: A Massive Revolution!Techugo
 
Mobile Banking App Development A Complete Guide.pdf
Mobile Banking App Development A Complete Guide.pdfMobile Banking App Development A Complete Guide.pdf
Mobile Banking App Development A Complete Guide.pdfSuccessiveDigital
 

Ähnlich wie Smartphones & Mobile Money: Principles for UI/UX Design (1.0) (20)

13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design 13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
 
Boost a Fintech Startup's Success Through UX Design
Boost a Fintech Startup's Success Through UX DesignBoost a Fintech Startup's Success Through UX Design
Boost a Fintech Startup's Success Through UX Design
 
Simple app ideas
Simple app ideasSimple app ideas
Simple app ideas
 
Simple app ideas
Simple app ideasSimple app ideas
Simple app ideas
 
Mapa research insightseries_highlights_2014
Mapa research insightseries_highlights_2014Mapa research insightseries_highlights_2014
Mapa research insightseries_highlights_2014
 
The 10 productive app development companies in 2019
The 10 productive app development companies in 2019The 10 productive app development companies in 2019
The 10 productive app development companies in 2019
 
Learn the best practices for UIUX design in Banking applications
Learn the best practices for UIUX design in Banking applicationsLearn the best practices for UIUX design in Banking applications
Learn the best practices for UIUX design in Banking applications
 
Pinky's Westside Grill Mobile Marketing Plan
Pinky's Westside Grill Mobile Marketing PlanPinky's Westside Grill Mobile Marketing Plan
Pinky's Westside Grill Mobile Marketing Plan
 
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdf
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdfMobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdf
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdf
 
Mobile Banking
Mobile BankingMobile Banking
Mobile Banking
 
Mobile Application Development - Guide 2020
Mobile Application Development - Guide 2020Mobile Application Development - Guide 2020
Mobile Application Development - Guide 2020
 
7 secrets to app success
7 secrets to app success 7 secrets to app success
7 secrets to app success
 
Mobile Apps for Business
Mobile Apps for BusinessMobile Apps for Business
Mobile Apps for Business
 
How to build an online payment app development like pay pal
How to build an online payment app development like pay palHow to build an online payment app development like pay pal
How to build an online payment app development like pay pal
 
Ezone creative pitch
Ezone creative pitchEzone creative pitch
Ezone creative pitch
 
What is the Cost of Building a Fintech App.docx.pdf
What is the Cost of Building a Fintech App.docx.pdfWhat is the Cost of Building a Fintech App.docx.pdf
What is the Cost of Building a Fintech App.docx.pdf
 
Top 10 Mobile App UI/UX Design Trends in 2022
Top 10 Mobile App UI/UX Design Trends in 2022Top 10 Mobile App UI/UX Design Trends in 2022
Top 10 Mobile App UI/UX Design Trends in 2022
 
Super Apps in Banking: A Massive Revolution!
 Super Apps in Banking: A Massive Revolution! Super Apps in Banking: A Massive Revolution!
Super Apps in Banking: A Massive Revolution!
 
Mobile Banking App Development A Complete Guide.pdf
Mobile Banking App Development A Complete Guide.pdfMobile Banking App Development A Complete Guide.pdf
Mobile Banking App Development A Complete Guide.pdf
 
Why develop an app?
Why develop an app?Why develop an app?
Why develop an app?
 

Mehr von CGAP

Digital Credit Market Monitoring in Tanzania
Digital Credit Market Monitoring in TanzaniaDigital Credit Market Monitoring in Tanzania
Digital Credit Market Monitoring in TanzaniaCGAP
 
Digitizing Retail Payments: Building a Successful Loyalty Model
Digitizing Retail Payments: Building a Successful Loyalty ModelDigitizing Retail Payments: Building a Successful Loyalty Model
Digitizing Retail Payments: Building a Successful Loyalty ModelCGAP
 
Merchant Payments: Loyalty Playbook
Merchant Payments: Loyalty PlaybookMerchant Payments: Loyalty Playbook
Merchant Payments: Loyalty PlaybookCGAP
 
Merchant Payments: VAS Playbook
Merchant Payments: VAS PlaybookMerchant Payments: VAS Playbook
Merchant Payments: VAS PlaybookCGAP
 
Digitizing Merchant Payments: What Will It Take?
Digitizing Merchant Payments: What Will It Take?Digitizing Merchant Payments: What Will It Take?
Digitizing Merchant Payments: What Will It Take?CGAP
 
Wallet and Over-the-Counter Transactions: Understanding Financial Incentives
Wallet and Over-the-Counter Transactions: Understanding Financial IncentivesWallet and Over-the-Counter Transactions: Understanding Financial Incentives
Wallet and Over-the-Counter Transactions: Understanding Financial IncentivesCGAP
 
Real-Time Customer Interactions via SMS (Juntos and Mynt)
Real-Time Customer Interactions via SMS (Juntos and Mynt)Real-Time Customer Interactions via SMS (Juntos and Mynt)
Real-Time Customer Interactions via SMS (Juntos and Mynt)CGAP
 
Real-Time Customer Interactions via SMS (Juntos and Tigo Money)
Real-Time Customer Interactions via SMS (Juntos and Tigo Money)Real-Time Customer Interactions via SMS (Juntos and Tigo Money)
Real-Time Customer Interactions via SMS (Juntos and Tigo Money)CGAP
 
The Emerging Landscape of Digital Credit
The Emerging Landscape of Digital CreditThe Emerging Landscape of Digital Credit
The Emerging Landscape of Digital CreditCGAP
 
Global Landscape Study on P2G Payments (India)
Global Landscape Study on P2G Payments (India)Global Landscape Study on P2G Payments (India)
Global Landscape Study on P2G Payments (India)CGAP
 
Corresponsales bancarios en Colombia: Expansión rural y su frontera
Corresponsales bancarios en Colombia: Expansión rural y su fronteraCorresponsales bancarios en Colombia: Expansión rural y su frontera
Corresponsales bancarios en Colombia: Expansión rural y su fronteraCGAP
 
Banking Agents in Colombia: Rural Expansion and Its Frontier
Banking Agents in Colombia: Rural Expansion and Its FrontierBanking Agents in Colombia: Rural Expansion and Its Frontier
Banking Agents in Colombia: Rural Expansion and Its FrontierCGAP
 
The Enabling Environment for Digital Financial Services
The Enabling Environment for Digital Financial ServicesThe Enabling Environment for Digital Financial Services
The Enabling Environment for Digital Financial ServicesCGAP
 
What does Digital Finance mean for MFIs?
What does Digital Finance mean for MFIs?What does Digital Finance mean for MFIs?
What does Digital Finance mean for MFIs?CGAP
 
Digital Financial Services: Key Concepts
Digital Financial Services: Key ConceptsDigital Financial Services: Key Concepts
Digital Financial Services: Key ConceptsCGAP
 
Understanding the East African Aggregator Landscape
Understanding the East African Aggregator LandscapeUnderstanding the East African Aggregator Landscape
Understanding the East African Aggregator LandscapeCGAP
 

Mehr von CGAP (16)

Digital Credit Market Monitoring in Tanzania
Digital Credit Market Monitoring in TanzaniaDigital Credit Market Monitoring in Tanzania
Digital Credit Market Monitoring in Tanzania
 
Digitizing Retail Payments: Building a Successful Loyalty Model
Digitizing Retail Payments: Building a Successful Loyalty ModelDigitizing Retail Payments: Building a Successful Loyalty Model
Digitizing Retail Payments: Building a Successful Loyalty Model
 
Merchant Payments: Loyalty Playbook
Merchant Payments: Loyalty PlaybookMerchant Payments: Loyalty Playbook
Merchant Payments: Loyalty Playbook
 
Merchant Payments: VAS Playbook
Merchant Payments: VAS PlaybookMerchant Payments: VAS Playbook
Merchant Payments: VAS Playbook
 
Digitizing Merchant Payments: What Will It Take?
Digitizing Merchant Payments: What Will It Take?Digitizing Merchant Payments: What Will It Take?
Digitizing Merchant Payments: What Will It Take?
 
Wallet and Over-the-Counter Transactions: Understanding Financial Incentives
Wallet and Over-the-Counter Transactions: Understanding Financial IncentivesWallet and Over-the-Counter Transactions: Understanding Financial Incentives
Wallet and Over-the-Counter Transactions: Understanding Financial Incentives
 
Real-Time Customer Interactions via SMS (Juntos and Mynt)
Real-Time Customer Interactions via SMS (Juntos and Mynt)Real-Time Customer Interactions via SMS (Juntos and Mynt)
Real-Time Customer Interactions via SMS (Juntos and Mynt)
 
Real-Time Customer Interactions via SMS (Juntos and Tigo Money)
Real-Time Customer Interactions via SMS (Juntos and Tigo Money)Real-Time Customer Interactions via SMS (Juntos and Tigo Money)
Real-Time Customer Interactions via SMS (Juntos and Tigo Money)
 
The Emerging Landscape of Digital Credit
The Emerging Landscape of Digital CreditThe Emerging Landscape of Digital Credit
The Emerging Landscape of Digital Credit
 
Global Landscape Study on P2G Payments (India)
Global Landscape Study on P2G Payments (India)Global Landscape Study on P2G Payments (India)
Global Landscape Study on P2G Payments (India)
 
Corresponsales bancarios en Colombia: Expansión rural y su frontera
Corresponsales bancarios en Colombia: Expansión rural y su fronteraCorresponsales bancarios en Colombia: Expansión rural y su frontera
Corresponsales bancarios en Colombia: Expansión rural y su frontera
 
Banking Agents in Colombia: Rural Expansion and Its Frontier
Banking Agents in Colombia: Rural Expansion and Its FrontierBanking Agents in Colombia: Rural Expansion and Its Frontier
Banking Agents in Colombia: Rural Expansion and Its Frontier
 
The Enabling Environment for Digital Financial Services
The Enabling Environment for Digital Financial ServicesThe Enabling Environment for Digital Financial Services
The Enabling Environment for Digital Financial Services
 
What does Digital Finance mean for MFIs?
What does Digital Finance mean for MFIs?What does Digital Finance mean for MFIs?
What does Digital Finance mean for MFIs?
 
Digital Financial Services: Key Concepts
Digital Financial Services: Key ConceptsDigital Financial Services: Key Concepts
Digital Financial Services: Key Concepts
 
Understanding the East African Aggregator Landscape
Understanding the East African Aggregator LandscapeUnderstanding the East African Aggregator Landscape
Understanding the East African Aggregator Landscape
 

Kürzlich hochgeladen

Financial analysis on Risk and Return.ppt
Financial analysis on Risk and Return.pptFinancial analysis on Risk and Return.ppt
Financial analysis on Risk and Return.ppttadegebreyesus
 
(办理原版一样)QUT毕业证昆士兰科技大学毕业证学位证留信学历认证成绩单补办
(办理原版一样)QUT毕业证昆士兰科技大学毕业证学位证留信学历认证成绩单补办(办理原版一样)QUT毕业证昆士兰科技大学毕业证学位证留信学历认证成绩单补办
(办理原版一样)QUT毕业证昆士兰科技大学毕业证学位证留信学历认证成绩单补办fqiuho152
 
The Triple Threat | Article on Global Resession | Harsh Kumar
The Triple Threat | Article on Global Resession | Harsh KumarThe Triple Threat | Article on Global Resession | Harsh Kumar
The Triple Threat | Article on Global Resession | Harsh KumarHarsh Kumar
 
Unveiling Business Expansion Trends in 2024
Unveiling Business Expansion Trends in 2024Unveiling Business Expansion Trends in 2024
Unveiling Business Expansion Trends in 2024Champak Jhagmag
 
Overview of Inkel Unlisted Shares Price.
Overview of Inkel Unlisted Shares Price.Overview of Inkel Unlisted Shares Price.
Overview of Inkel Unlisted Shares Price.Precize Formely Leadoff
 
Economics, Commerce and Trade Management: An International Journal (ECTIJ)
Economics, Commerce and Trade Management: An International Journal (ECTIJ)Economics, Commerce and Trade Management: An International Journal (ECTIJ)
Economics, Commerce and Trade Management: An International Journal (ECTIJ)ECTIJ
 
BPPG response - Options for Defined Benefit schemes - 19Apr24.pdf
BPPG response - Options for Defined Benefit schemes - 19Apr24.pdfBPPG response - Options for Defined Benefit schemes - 19Apr24.pdf
BPPG response - Options for Defined Benefit schemes - 19Apr24.pdfHenry Tapper
 
Financial Preparation for Millennia.pptx
Financial Preparation for Millennia.pptxFinancial Preparation for Millennia.pptx
Financial Preparation for Millennia.pptxsimon978302
 
The Inspirational Story of Julio Herrera Velutini - Global Finance Leader
The Inspirational Story of Julio Herrera Velutini - Global Finance LeaderThe Inspirational Story of Julio Herrera Velutini - Global Finance Leader
The Inspirational Story of Julio Herrera Velutini - Global Finance LeaderArianna Varetto
 
Call Girls Near Me WhatsApp:+91-9833363713
Call Girls Near Me WhatsApp:+91-9833363713Call Girls Near Me WhatsApp:+91-9833363713
Call Girls Near Me WhatsApp:+91-9833363713Sonam Pathan
 
2024 Q1 Crypto Industry Report | CoinGecko
2024 Q1 Crypto Industry Report | CoinGecko2024 Q1 Crypto Industry Report | CoinGecko
2024 Q1 Crypto Industry Report | CoinGeckoCoinGecko
 
『澳洲文凭』买科廷大学毕业证书成绩单办理澳洲Curtin文凭学位证书
『澳洲文凭』买科廷大学毕业证书成绩单办理澳洲Curtin文凭学位证书『澳洲文凭』买科廷大学毕业证书成绩单办理澳洲Curtin文凭学位证书
『澳洲文凭』买科廷大学毕业证书成绩单办理澳洲Curtin文凭学位证书rnrncn29
 
212MTAMount Durham University Bachelor's Diploma in Technology
212MTAMount Durham University Bachelor's Diploma in Technology212MTAMount Durham University Bachelor's Diploma in Technology
212MTAMount Durham University Bachelor's Diploma in Technologyz xss
 
Stock Market Brief Deck FOR 4/17 video.pdf
Stock Market Brief Deck FOR 4/17 video.pdfStock Market Brief Deck FOR 4/17 video.pdf
Stock Market Brief Deck FOR 4/17 video.pdfMichael Silva
 
Uae-NO1 Kala Jadu specialist Expert in Pakistan kala ilam specialist Expert i...
Uae-NO1 Kala Jadu specialist Expert in Pakistan kala ilam specialist Expert i...Uae-NO1 Kala Jadu specialist Expert in Pakistan kala ilam specialist Expert i...
Uae-NO1 Kala Jadu specialist Expert in Pakistan kala ilam specialist Expert i...Amil baba
 
Vp Girls near me Delhi Call Now or WhatsApp
Vp Girls near me Delhi Call Now or WhatsAppVp Girls near me Delhi Call Now or WhatsApp
Vp Girls near me Delhi Call Now or WhatsAppmiss dipika
 
AnyConv.com__FSS Advance Retail & Distribution - 15.06.17.ppt
AnyConv.com__FSS Advance Retail & Distribution - 15.06.17.pptAnyConv.com__FSS Advance Retail & Distribution - 15.06.17.ppt
AnyConv.com__FSS Advance Retail & Distribution - 15.06.17.pptPriyankaSharma89719
 
Role of Information and technology in banking and finance .pptx
Role of Information and technology in banking and finance .pptxRole of Information and technology in banking and finance .pptx
Role of Information and technology in banking and finance .pptxNarayaniTripathi2
 
Market Morning Updates for 16th April 2024
Market Morning Updates for 16th April 2024Market Morning Updates for 16th April 2024
Market Morning Updates for 16th April 2024Devarsh Vakil
 

Kürzlich hochgeladen (20)

Financial analysis on Risk and Return.ppt
Financial analysis on Risk and Return.pptFinancial analysis on Risk and Return.ppt
Financial analysis on Risk and Return.ppt
 
(办理原版一样)QUT毕业证昆士兰科技大学毕业证学位证留信学历认证成绩单补办
(办理原版一样)QUT毕业证昆士兰科技大学毕业证学位证留信学历认证成绩单补办(办理原版一样)QUT毕业证昆士兰科技大学毕业证学位证留信学历认证成绩单补办
(办理原版一样)QUT毕业证昆士兰科技大学毕业证学位证留信学历认证成绩单补办
 
The Triple Threat | Article on Global Resession | Harsh Kumar
The Triple Threat | Article on Global Resession | Harsh KumarThe Triple Threat | Article on Global Resession | Harsh Kumar
The Triple Threat | Article on Global Resession | Harsh Kumar
 
Unveiling Business Expansion Trends in 2024
Unveiling Business Expansion Trends in 2024Unveiling Business Expansion Trends in 2024
Unveiling Business Expansion Trends in 2024
 
Overview of Inkel Unlisted Shares Price.
Overview of Inkel Unlisted Shares Price.Overview of Inkel Unlisted Shares Price.
Overview of Inkel Unlisted Shares Price.
 
Economics, Commerce and Trade Management: An International Journal (ECTIJ)
Economics, Commerce and Trade Management: An International Journal (ECTIJ)Economics, Commerce and Trade Management: An International Journal (ECTIJ)
Economics, Commerce and Trade Management: An International Journal (ECTIJ)
 
BPPG response - Options for Defined Benefit schemes - 19Apr24.pdf
BPPG response - Options for Defined Benefit schemes - 19Apr24.pdfBPPG response - Options for Defined Benefit schemes - 19Apr24.pdf
BPPG response - Options for Defined Benefit schemes - 19Apr24.pdf
 
Financial Preparation for Millennia.pptx
Financial Preparation for Millennia.pptxFinancial Preparation for Millennia.pptx
Financial Preparation for Millennia.pptx
 
The Inspirational Story of Julio Herrera Velutini - Global Finance Leader
The Inspirational Story of Julio Herrera Velutini - Global Finance LeaderThe Inspirational Story of Julio Herrera Velutini - Global Finance Leader
The Inspirational Story of Julio Herrera Velutini - Global Finance Leader
 
Call Girls Near Me WhatsApp:+91-9833363713
Call Girls Near Me WhatsApp:+91-9833363713Call Girls Near Me WhatsApp:+91-9833363713
Call Girls Near Me WhatsApp:+91-9833363713
 
2024 Q1 Crypto Industry Report | CoinGecko
2024 Q1 Crypto Industry Report | CoinGecko2024 Q1 Crypto Industry Report | CoinGecko
2024 Q1 Crypto Industry Report | CoinGecko
 
『澳洲文凭』买科廷大学毕业证书成绩单办理澳洲Curtin文凭学位证书
『澳洲文凭』买科廷大学毕业证书成绩单办理澳洲Curtin文凭学位证书『澳洲文凭』买科廷大学毕业证书成绩单办理澳洲Curtin文凭学位证书
『澳洲文凭』买科廷大学毕业证书成绩单办理澳洲Curtin文凭学位证书
 
212MTAMount Durham University Bachelor's Diploma in Technology
212MTAMount Durham University Bachelor's Diploma in Technology212MTAMount Durham University Bachelor's Diploma in Technology
212MTAMount Durham University Bachelor's Diploma in Technology
 
Stock Market Brief Deck FOR 4/17 video.pdf
Stock Market Brief Deck FOR 4/17 video.pdfStock Market Brief Deck FOR 4/17 video.pdf
Stock Market Brief Deck FOR 4/17 video.pdf
 
Uae-NO1 Kala Jadu specialist Expert in Pakistan kala ilam specialist Expert i...
Uae-NO1 Kala Jadu specialist Expert in Pakistan kala ilam specialist Expert i...Uae-NO1 Kala Jadu specialist Expert in Pakistan kala ilam specialist Expert i...
Uae-NO1 Kala Jadu specialist Expert in Pakistan kala ilam specialist Expert i...
 
Q1 2024 Newsletter | Financial Synergies Wealth Advisors
Q1 2024 Newsletter | Financial Synergies Wealth AdvisorsQ1 2024 Newsletter | Financial Synergies Wealth Advisors
Q1 2024 Newsletter | Financial Synergies Wealth Advisors
 
Vp Girls near me Delhi Call Now or WhatsApp
Vp Girls near me Delhi Call Now or WhatsAppVp Girls near me Delhi Call Now or WhatsApp
Vp Girls near me Delhi Call Now or WhatsApp
 
AnyConv.com__FSS Advance Retail & Distribution - 15.06.17.ppt
AnyConv.com__FSS Advance Retail & Distribution - 15.06.17.pptAnyConv.com__FSS Advance Retail & Distribution - 15.06.17.ppt
AnyConv.com__FSS Advance Retail & Distribution - 15.06.17.ppt
 
Role of Information and technology in banking and finance .pptx
Role of Information and technology in banking and finance .pptxRole of Information and technology in banking and finance .pptx
Role of Information and technology in banking and finance .pptx
 
Market Morning Updates for 16th April 2024
Market Morning Updates for 16th April 2024Market Morning Updates for 16th April 2024
Market Morning Updates for 16th April 2024
 

Smartphones & Mobile Money: Principles for UI/UX Design (1.0)

  • 1. Smartphones & Mobile Money: Principles for UI/UX Design (1.0) Gregory Chen Alexandra Fiorillo Michel HanouchOctober 2016
  • 2. CONTENTS Smartphones Will Change Mobile Money........3 21 Principles for Mobile Money UI/UX............7 Good Ideas Worth Further Prototyping.........33 How to Improve the Smartphone Interface...43 Appendix.......................................................49 CGAP holds that Smartphone interfaces are likely to become the main interface for mobile money use. A well-designed interface will drive growth, profitability, and a much improved user experience.
  • 3. 3 Smartphones Will Change Mobile Money The predominant USSD interface is clumsy, text heavy, hierarchical, and a barrier to uptake. Smartphones open a whole new range of interface options that can leverage touchscreens, images, graphics, and sound. A well- designed interface can affect millions of customers in their day-to-day interactions with finance. Many market signs point to rising smartphone usage in the next 5-10 years. Smartphone interfaces could be a key to unlock value for low-literate consumers overcoming communication barriers imposed by early-stage featurephone-basedmodels.Thereisalsocompelling evidence that more educated customers appreciate quicker and more intuitive user experiences – large and successful digital players such as Uber, Facebook, and others make large investments in the user interface and experience. Such investments will also change mobile money. GROWTH: transactions, use and revenue per customer CUSTOMER ACQUISITION: increased and diversified customer base CUSTOMER RETENTION: higher activation and use, and lower dropouts TRUST: easier to understand services and fees CONSUMER PROTECTION: reduce errors and enable easier access to assistance for customers CONTROL: more control over their financial transactions CGAP holds that a well-designed smartphone interface will enhance: FOR PROVIDERS FOR CUSTOMERS
  • 4. 4 Many Interfaces Make Avoidable Mistakes Copy USSD Menus Overly Rely on Text Resort to Careless or Confusing Icons
  • 5. 5 Many Interfaces Make Avoidable Mistakes Overload with Information and Options. For example, this menu runs onto two screens from M-Ledger app. Copy Online Computer Interfaces not Suited to Smaller Smartphone Screens
  • 6. 6 Adopting UI/UX Principles Will Improve Mobile Money for Providers and Users This document presents a set of UI/UX principles for mobile money smartphone interfaces. The principles are for basic mobile money services delivered to the mass market in low-income countries. However, the principles are also valid for higher income consumers. These UI/UX principles continue to be debated, vetted, and improved with the help of an expert group that first met in April 2016 (see Appendix for experts list). The content relies heavily on inputs from CGAP partners, including Wave Money Myanmar, Karandaaz Pakistan, Small Surfaces, and GRID Impact. This is the first version (V1.0) of this document. It is not meant to be comprehensive, but is intended as a starting set of principles that will improve smartphone interfaces for basic mobile money functions. Further insights into mobile money UI/UX are sure to follow as the experiences grow richer and broader in the months ahead. LEARNING ABOUT AND EXPLORING THE SERVICE REGISTERING ON AN APPLICATION AND BEGINNING USE DEPOSITING/WITHDRAWING MAKING BASIC PAYMENTS The principles apply to basic mobile money functions, such as:
  • 7. 21 Principles for Smartphone Mobile Money UI/UX 7
  • 8. 8 Allowing new users to explore the service before registering for full use is an opportunity. There can be video, images, or text that explain how the service can be useful to the user. Apps that do not do this miss an opportunity to leverage the smartphone as a way to sell the service and engage new customers. 01 Allow Users to Explore Before Using The Karandaaz Pakistan design has an introductory set of images about the app people can explore that then leads to the option to open the account. This app requires users to register for an account before being allowed to peruse the services within the app.
  • 9. 9 Access to agents remains critical for mobile money. Providing in-app guidance by using the GPS location feature on smartphones, and access to agents’ addresses and phone numbers to find the most convenient or most reliable agent can be a critical aid. Help Users Find Agents02 Pepele Mobile uses a visual agent locator feature with a map and distance filter. This app identifies agents that have float so users can more easily transact.
  • 10. 10 Initial application sign-up is a barrier. Reducing the number of steps and making each step simple and clear can ease app use. Finding the right balance of ease-of-use can greatly speed customer acquisition. Simplify Application Registration03 WAVE Money in Myanmar requires both the user’s mobile phone number as well as a unique code for initial sign in. The 5-step process is customized, simple, and easy to follow.
  • 11. 11 Navigation from hierarchical menus common in USSD are disliked by consumers. Users like to go directly to the thing they need done. Some refer to this as “shallow” navigation, allowing users to navigate directly to what they want. Flatten Menu Hierarchy04 The Karandaaz Pakistan home screen provides clear transaction options with little need for the customer to search or dig. This app from Pakistan requires users to first select a category of transactions and then visit a separate menu.
  • 12. 12 Flatten Menu Hierarchy (cont.)04 The WAVE Money home screen allows the menu to pop-up to directly go to desired function. The WAVE Money home screen prioritizes important actions and keeps the home menu simple and clear. The WAVE Money app has a shallow architecture, which makes it easy for customers to go directly to what they need to do. Home HOM Send Money SND Help HLP Settings SET Buy Airtime AIR Transaction History HIS
  • 13. 13 Menus should avoid “navigating” and focus on “doing”. The options should be presented as a limited list. Menus should not use technical jargon and instead offer direct links to action steps. Focus Menu Choices on Actions05 This pop-up menu focuses on specific actions users can choose from. This home menu focuses on key actions users frequently use in Pakistan. This app from Pakistan lists transaction options that are not positioned as actions.
  • 14. 14 Users prefer quick visual cues over text. Visual cues should be selected carefully to link to users’ experience –enough visual detail to communicate but not too much detail, which overwhelms. Reduce Text and Use Visual Cues06 ThisexampleofAndroMoney uses dynamic, detailed icons coupled with simple text language. The homescreen is characterized by a menu of large, detailed illustrations that visually depict the core features. This African mobile money app relies solely on text, rather than incorporating icons and visuals. Lower- literate users may find it difficult to navigate the app, especially if French is a secondary language.
  • 15. 15 Reduce Text and Use Visual Cues (cont.)06 The Wave Money app uses color (green for success), text (“Success”), and visual cues (the tick mark and right arrow) to explain the transaction and its status to the user. The Karandaaz Pakistan design uses colors, tick marks, and arrows to indicate money being sent or received from a user’s wallet. In the example on the right, green and left-facing arrows mean the user has received money while red and right-facing arrows mean the user has sent money.
  • 16. 16 Good icons communicate clear actions and are understandable to local users. Icons initially expected to work often end up confusing customers. Prototype testing in local environments is critical. Design Icons Relevant to Local Users07 In Pakistan, icons that use multiple colors and less abstract symbols were easier to recognize. For example: Help was better as person with a headset, rather than a question mark. In Pakistan flat, single color icons were more difficult for users to understand. Abstract syntax was also confusing. For example, most research participants did not associate “?” with help. Man Woman Help Water Bill and Call Center icons by Kid A and parkjisun from the Noun Project
  • 17. 17 Lock Account (Sign Out) Pay Bill Record (Transaction History) Send Money My Account Load Credit CNIC Create Account Contact / Help Find Shop (Agent) Design Icons Relevant to Local Users (cont.)07 Karandaaz Pakistan prototyped illustrated icons – flat, black-and-white icons, multi-colored hand-drawn icons,– but ultimately decided on these computer- illustrated multi-colored icons. Each icon focuses on an action that is understood in the Pakistani environment. Consumers preferred these because they are clear and specific, but do not have excessive detail. These icons depict an action step that clearly communicates. LOAD CREDIT LOCK ACCOUNT CNIC BILL PAY CREATE ACCOUNT RECORD CONTACT / HELP SENDING MONEY FIND SHOP (AGENT) WALLET
  • 18. 18 Use plain language and make it consistent with how people communicate locally. Choose words that are locally used in everyday discussion. Use Simple and Familiar Menu Terms08 The Saida app, which links to your M-Pesa account, uses colloquial and personal language to offer assistance to customers. The Karandaaz Pakistan design uses “Find Shop” language rather than the more common “Local Agent” because in Pakistan, this is the colloquial, common phrase. The Chillr app, while text- heavy, uses simple language in education messaging. In this Pakistan app, the term “nick setting” is probably not familiar to users.
  • 19. 19 Leverage Android design practices that are familiar to users. Input fields, push notifications, header bars, menus, and other patterns should be consistent with design and navigation users may already be familiar with. For example, new apps in the Kenyan market have adopted language, flows, and visual cues in-line with M-Pesa. Build on Users’ Familiarity with Smartphones09 This app makes strong use of patterns from the Android UI Pattern Library, which may be more familiar to Android users. The Android Pattern Library is a great resource for designers who want to follow industry-standard design. https://developer.android.com/design/index.html
  • 20. 20 Present a few choices based on past usage or most popular actions. Where possible build in pre-filled and prioritized choices based on each user’s prior use. Customize Transaction Choices10 “Pay Bill” is an icon on the home screen. The Pay Bill menu is organized by categories. Each category shows an alphabetical list of providers. Providers that a user has previously transacted with appear at the top of the list.
  • 21. 21 Apps can speed up many transactions and key decisions by automatically pulling information from a user’s contact list. Using information already saved to the phone can help quickly fill in transactions and reduce key-punching errors. Auto-fill from the Address Book + Transaction History11 The Wave Money app links to the user’s contact list and lists recent recipients first. Those with the blue flower icon indicate others who are registered with Wave Money. Karandaaz Pakistan also allows the user to choose a recipient from her contact list, with recent contacts listed first. This app from Pakistan requires the user to input the recipient’s mobile account number. This may lead to input errors.
  • 22. 22 The sequence, use of feedback and ability to make corrections can minimize human error. This will reduce customer frustration and improve complaints handling, while also building user confidence and fluency. Auto-Check to Minimize Human Error12 In this example from Karandaaz Pakistan, a user is trying to send more than his/her current balance allows. The design does not wait for the user to press “Next” before alerting the user to the error.
  • 23. 23 It is easy to overwhelm customers with too much information or too many choices. Keep things simple, focused, and consistent, allowing users to make simple decisions. Display Information in Digestible Chunks13 An early WAVE money prototype for airtime purchases allowed purchasing for oneself and others on the same screen. This overwhelmed customers with too many choices. In the WAVE Money interface, designers separated airtime purchases (for the customer’s versus someone else’s wallet) into two screens. They also broke the choice down into a two-screen process: who, then how much.
  • 24. 24 Every decision or action is a potential misstep. Allow customers to confirm steps and assure them along the way by reinforcing each action. Reassure with Transaction Confirmations14 Easypaisa Telenor in Pakistan offers a confirmation screen after a successful transaction. The WAVE Money app uses several different confirmation and assurance design features. In addition to allowing customers to review a step prior to confirmation, the app also provides a confirmation “receipt” with several visual cues to convey a successful transaction.
  • 25. 25 Reassure with Transaction Confirmations (cont.)14 A brief “sending” animation let’s the user know that his/her transaction is being processed. Even if the transaction is instant, this animation helps a user feel confident that his/her transaction was successful. The Karandaaz Pakistan design shares a detailed transaction receipt and provides confirmation in the form of the Virtual Assistant. The Karandaaz Pakistan design provides an opportunity for the user to confirm the transaction prior to sending money. It also provides detailed transaction confirmations, which include the amount sent, associated fee, date and time of transaction, and transaction ID number.
  • 26. 26 Customers like to review past transactions as reminders, for evidence in the event of a mistake, and for peace of mind. Allow them to do the same in the app, while also making it interactive so they can easily repeat past transactions. Where possible, also create opportunities for users to see the status of a transaction. Leave a Clear Trail of Transaction Histories15 The design for Karandaaz in Pakistan uses visual cues— both icons and colors—to help identify types of transactions. Any transaction summary can be expanded to show the full detail of the transactions as well. By pressing “Send Money” on the transaction detail screen, a user can initiate a new transaction with this contact. The transaction detail screen shows additional details about the transaction. It also shows recent transactions with this particular contact. The Jana Cash app also uses visual cues to indicate transaction history, including the interesting option to show certain transactions as “in progress” or “pending” or “failed”. Jana Cash is very transparent about transactions and informs customers how the service works.
  • 27. 27 Key instructions should appear at the moment it is needed. Seeking helpful information should not require a user to exit a transaction in-progress but rather should appear within the transaction flow. Advice can react to the customer’s interaction with the app, making the support seem personalized and contextual. Provide Instructions When Needed16 At any point in the transaction flow a user can receive contextual help by opening the Assistant. The help throughout the transaction flow was easy to discover and appreciated by customers. Even customers who did not need help welcomed this feature because they might share their phone with someone else who would benefit from the help. In this example from GCash, the user is reminded of transaction processing time as well as fee deductions during the bill payment flow. Although the reminder is included as a footnote, it is helpful to the customer who may be unaware of this information. Support was integrated into transactions in the WAVE Money app. Customers receive clear guidance (using simple language) at the moment they need it, as part of the transaction. This gives customers the comfort that they will be supported through transactions, and helps reduce confusion. In this example, helpful information is stored in the FAQs section of the app, which requires users to search for specific topics rather than being offered the advice in a transaction.
  • 28. 28 Handling errors is an opportunity to address frustrations for end users. Present users with clear pathways to resolve problems. Don’t make users feel as if it is their fault. Handle Errors by Providing Next Step Solutions17 In this example from the Karandaaz Pakistan design, a user has tried to press “Next” without properly completing the form. The design identifies the error and also gives an instruction about the mistake. The Karandaaz Pakistan design provides feedback to the user when an error has occurred without taking the user out of the transaction flow. When possible, error feedback should happen in real time. In the example, a user is trying to send more than his/her current balance allows and receives an error as he/she types the amount. The design does not wait for the user to press “Next” before showing the error. Key by Nadir Balcikli from the Noun Project
  • 29. 29 Customized simple keyboards ease user inputs and navigation. Customize and Simplify Keyboards18 In the WAVE Money app, a simplified key board appears for input. In this prototype from the Karandaaz Pakistan work, research participants had to tap on the field to open the native keyboard. Many participants struggled with this. Additionally, the keyboard showed unnecessary characters that did not correspond to the transaction at hand.
  • 30. 30 Inserting a fee calculator alongside transactions provides an immediate easy-to-use feedback tool for users. Auto-Calculate Fees During Transactions19 The WAVE Money app automatically calculates fees during the transaction flow so users can immediately see the cost of the transaction. In the WAVE Money Myanmar prototype testing, fee slab tables were consistently hard for customers to understand. Customers were overwhelmed by information about multiple fee levels.
  • 31. 31 Transactions can take place over multiple screens. But by consolidating summary transaction information onto one screen, users can build confidence because they have a sense they know what they are doing and will likely experience fewer errors. Provide Full Transaction Details on One Screen to Finalize Transactions 20 This portion of the Karandaaz Pakistan send money flow shows how single screens are focused to one key decision; this prevents the user from being overwhelmed. Key by Nadir Balcikli from the Noun Project
  • 32. 32 Having the account balance easily accessible is reassuring for the client and also very useful. Design should also leave room for users to easily hide their balance on the screen away from the prying eyes of family or others. Users want both quick information on their balances and also privacy. Make Account Balance Easy to See and Hide21 A user can hide his/her balance by tapping on the balance on the homepage. Once hidden, tapping his/her name will make the balance appear again. This addresses privacy concerns some users may have.
  • 34. 34 The most common reason to call a call center is to reset PIN codes. Apps may allow users to undertake PIN reset directly. Allow for PIN Resets in the App? Users can change their PINs in the WAVE Money app. This wireframe shows a flow for users who remember their PIN but want to reset it for some reason. In addition to users resetting their PIN in the app, providers may want to create flows that allow users to reset their own PINs if forgotten, rather than having to call the call center.
  • 35. 35 Many users like the option to hear explanations, instructions, confirmations, or other content in their local language. Providing easy, readily accessible, in-process audio is an added enabler for many users. Use Audio Instructions in Local Language? The Karandaaz Pakistan design includes an audio function for users who prefer listening to instructions or explanations. In this case, pressing the speaker icon will play an audio recording that matches the text of the Assistant.
  • 36. 36 Using images of currency can help customers who have difficulty with numeracy. This may be particularly important in countries with historical inflation and where denominations are very large—thousands and millions. Visual representation of bills may help those who struggle with periods, commas, and zeros. Visually Represent Large Monetary Values? The Karandaaz Pakistan design was testedusingcurrencyrepresentations of transaction amounts, particularly for customers who might be less literate. The Rupee denominations match the amounts articulated in the virtual assistant’s comment.
  • 37. 37 Sharing information about other customers’ usage encourages adoption. Be careful, however, as users may not want to give out detailed information about themselves. Find the balance between sharing and privacy. Link Users with Their Social Networks? The Saida interface integrates WhatsApp as a way to acquire new customers and expand the potential usage of its services. Karandaaz Pakistan encourages users to share transactions on social media. Connecting with Facebook makes it easy to find contacts and share activity. Customers who prototype tested the WAVE Money app found it unacceptable to share information about how many transactions they had done with the service. On the other hand, customers had no concerns about sharing status levels (e.g., bronze, silver, gold), even if these levels were linked to transaction volumes.
  • 38. 38 Begin with Simple Instructions, Add Complexity over Time? Improve usability using only the minimum information required for the task. Allowing users to learn through use (rather than by instruction) empowers users. Build in more sophisticated features over time as users gain experience. The WAVE Money design helps customers understand complex transaction histories by teaching them first how to read individual transaction records. Once they had experience reading these individual records, it was easy to progress to reading a set of records together in a history.
  • 39. 39 Depending on the context, apps can allow new users to register for an account remotely. This might include taking a photo of an ID, taking a selfie, and entering some basic registration information. Enable Users to Self-Register? The WAVE Money design shown here (and continued on the following page) shows an eight-step process that guides users through the process of registering for an account remotely. This is one possible approach to self-registration that providers might want to test further.
  • 40. 40 Enable Users to Self-Register? (cont.)
  • 41. 41 Agents are an essential part of mobile money operations. Providing customers the opportunity to rate agents or easily register complaints can be a powerful tool to improve service and customer satisfaction. Empower Customers to Rate Agents? One possibility is to allow users to rate agents after completing certain transactions like withdrawing money. Users could search for agents based on their customer rating score.
  • 42. 42 Many customers have unsatisfactory experiences seeking help from customer support phone lines, often giving up after long wait times. Testing accessible channels for customers to get immediate help for problems, using text messaging, video, and audio could be an interesting alternative. Make Customer Support Accessible Through Multiple Channels? IDEO.org prototyped a WhatsApp chat as an alternate, complementary customer-service channel with live human responses from a telecom staff person.
  • 43. How to Improve the Smartphone Interface
  • 44. 44 Design improves with feedback from a range of representative customers – existing users, potential users, and “extreme end users” (super-users and non-users). Insights can come from many different kinds of potential users. Designing to be inclusive of diverse customer segments will broaden appeal and improve scalability. Test Design with Diverse Sample of Customers Through participatory activities with mobile money customers and agents, GRID Impact tested various design concepts and features. These activities included card sorting to select appropriate visual icons and transaction flows, icon co-design to develop improved visual language, and task- based transactions to test the logic of flows. GRID Impact tested the two interaction model concepts using low-fidelity prototypes. These paper-based prototypes allowed the team to capture feedback from users and agents on the style, design, icons, flows, and overall structure of the smartphone app menu. GRID Impact also used a high-fidelity clickable prototype to generate feedback from users on how the app worked. The team used task-based transactions to see how users engaged with the app, where they encountered difficulties, and how they interpreted transaction flows.
  • 45. 45 Strong design requires multiple versions. Begin with low-fidelity (paper) and shift to higher-fidelity (electronic and clickable) prototypes. Designers should not be afraid to put paper prototypes or incomplete electronic versions of their concepts in front of users. Multiple iterations testing and fixing along the way produces superior results. Adopt a Rapid Iterative Design Process IDEATION ELECTRONIC PROTOTYPE PAPER PROTOTYPE
  • 46. 46 Be Willing to Discard Many “great” ideas should be thrown away during the iterative design process. What concepts you choose not to include are as important as those that you keep. In the WAVE Money example, one design approach considered for the application used a “chat” model (following Viber, which is very popular in Myanmar). Financial transactions were grouped around individual people (like a chat history). Customers felt that transaction histories were not important enough to always be visible. So this idea was discarded. The WAVE Money team wanted to make transactions more personal and meaningful. One idea was to allow the sender to include “stickers” with a transaction. This idea failed, but resulted in a very popular “say thanks” feature for recipients.
  • 47. 47 No detail is too small to test: colors, terms, placement, icons. Each detail is an opportunity to avoid confusion and improve the customer experience. Multiple iterations of prototypes allow many opportunities to fix and improve small details along the way. Tweak Small Details to Make a Big Difference During prototype testing with users in Pakistan, “X” was received well for “cancel” because people associate “X” with wrong or mistake. However, “X” was not good to use for “close,” because people were not familiar with this UI pattern. Despite the “left-to-right” arrow being counterintuitive when coupled with “right-to-left” Urdu text in Pakistan, it was the most widely understood symbol for moving to the next step. This was both surprising and an important finding that might have been otherwise overlooked. Call Center by parkjisun from the Noun Project
  • 48. 48 The integration of business operations, app development, and design from the beginning throughout is critical. This builds in business needs, technical constraints/options, and design to find the most practical solutions. This can add time to the iteration design, but will produce better results. Involve Business Managers and App Developers in UI / UX Design at Every Step App Development (the coders) UX / UI Design (human-centered specialists) Business Strategy and Operations (managers)
  • 50. 50 Additional Resources There are many practical resources available to providers interested in developing smartphone interfaces for mobile money using a user-centered design approach. This Appendix offers a series of toolkits, guides, and practical applications of UX / UI design for smartphone interfaces. CGAP Publications Understanding HCD + UX Design Customer Experience Toolkit https://www.dropbox.com/s/ mopjha4og1te0j1/CXT_VF.pdf?dl=0 Don’t Make Me Think, Revisited https://www.amazon.com/Don’t-Make-Think- Revisited-Usability/dp/0321965515 Designing Customer-Centric Branchless Banking Offerings http://www.cgap.org/publications/designing- customer-centric-branchless-banking-offerings Principles of Mobile App Design https://www.dropbox.com/s/flg27yds269rl7w/ principles-of-mobile-app-design-engage-users- and-drive-conversions.pdf?dl=0 What Human-Centered Design Means for Financial Inclusion http://www.cgap.org/sites/default/files/ CGAP_Insights_into_Action_final.pdf Exploring Alternative Product Concepts http://www.slideshare.net/CGAP/exploring- alternative-api-product-concepts
  • 51. 51 Additional Resources Smartphone User Interface and User Experience Design Design for Mobile Money Toolkit by GRID Impact for Karandaaz Pakistan Smartphone User Interface and User Experience Design for Mobile Money in Pakistan Design Toolkit http://karandaaz.com.pk/toolkit Toolkit Overview Wireframes Icons & Illustrations Prototype
  • 52. 52 Acknowledgments The research necessary for this learning and publication have been carried out together with CGAP partners. In particular Wave Money and Small Surfaces have been key partners in Myanmar. Karandaaz Pakistan and GRID Impact have been key partners in Pakistan. Expert reference group on smartphone UI/UX Alexandra Fiorillo GRID Impact Antonique Koning CGAP Brett Matthews My Oral Village Camille Busette CGAP Carla Cathey dal Cais CGAP Cathy Smith Digitai Dave Kim BMGF David Del Ser BFA Emmanuel Crown CGAP Eric Tyler CGAP Evans Munyuki Barclays Africa Gabriel White Small Surfaces Gayatri Murthy CGAP Gerhard Coetzee CGAP Greg Chen CGAP Gunnar Camner GSMA Harry West Frog Indrani Medhi Thies Microsoft Research Jesse Wild Sneller IDEO.org The authors of this guide are Gregory Chen and Michel Hanouch, both from CGAP, and Alexandra Fiorillo, of GRID Impact. The authors are grateful for the insights and experience of the participants of the April 2016 CGAP event on Smartphone Applications & Financial Inclusion as well as colleagues who provided feedback on the content in this guide. John Won IDEO.org Jonathan Donner Caribou Digital Kamal Quadir bKash Karel Leon CGAP Kwasi Donkor USAID Maria Fernandez Vidal CGAP Mark Wensley MasterCard Foundation Marve Mullavu-Biggedi CGAP Michel Hanouch CGAP Muhammad Irfanul Huq bKash Robert Fabricant Dalberg Sophia Hasnain GSMA Steve Rasmussen CGAP Tilman Ehrbeck Omidyar Network Valeria Betherol Orange (Labs) Valerie Ledunois Orange (Labs) Vered Konijnendijk Wave Money Xavier Faz CGAP Yanina Seltzer CGAP