CGAP, profile picture
Uploaded byCGAP
20,454 views

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

The document outlines key UI/UX design principles for mobile money services on smartphones, emphasizing the need for well-designed interfaces that can significantly enhance user experience, growth, and profitability. It stresses that smartphones can overcome barriers associated with traditional USSD interfaces and leverages user-friendly features such as simplified navigation and visual cues to improve customer interaction. The principles presented are intended for basic mobile money functions, particularly in low-income countries, and serve as a foundation for further enhancements in mobile money applications.

Downloaded 811 times
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

More Related Content

PDF
Flowtab: $50K VC investment. Flowtab's initial pitch deck
byAA BB
 
PDF
FlexPay Pitch Deck Presentation
bySlibray Presentation
 
PDF
Overview of digital payments in india
byMathew Chacko
 
PDF
maliPay Pitch Deck.pdf
byBashirAhmedYusuf
 
PPTX
AdPushup Fundraising Deck - First Pitch
byadpushup
 
PDF
PropertyGuru - Lessons in Building a Leading Property Portal Group in Sth Eas...
byProperty Portal Watch
 
PPTX
Presentation on bkash for it or cse students
by616740
 
PDF
Effective customer retention techniques in group lending
byFaakor Agyekum
 
Flowtab: $50K VC investment. Flowtab's initial pitch deck
byAA BB
 
FlexPay Pitch Deck Presentation
bySlibray Presentation
 
Overview of digital payments in india
byMathew Chacko
 
maliPay Pitch Deck.pdf
byBashirAhmedYusuf
 
AdPushup Fundraising Deck - First Pitch
byadpushup
 
PropertyGuru - Lessons in Building a Leading Property Portal Group in Sth Eas...
byProperty Portal Watch
 
Presentation on bkash for it or cse students
by616740
 
Effective customer retention techniques in group lending
byFaakor Agyekum
 

What's hot

PDF
AirBnB Pitch Deck
byMalcolm Lewis
 
PPTX
Foursquare Pitch Deck
byTech in Asia ID
 
PDF
Ayekart pitch deck
byTech in Asia
 
PPTX
Top Trends in Payments 2022
byCapgemini
 
DOCX
E commerce project
byAvya Aravind
 
PDF
Backbase On-Demand Webinar: Banking 2025
byBackbase
 
PDF
WeTipp Pitch Deck
bystartuphome
 
PPSX
5. aeps
byDevi Thirupathi
 
PPTX
How to Conduct UX Benchmarking Studies Your Own Site Over Time + Competitors ...
byUserZoom
 
PDF
StairWear Pitch Deck
byMichael O'Sullivan
 
PPTX
BKash Marketing Plan 03.pptx
byssuser0cb2a5
 
PDF
Building the 10x better bank
byBackbase
 
PDF
Venmo Presentation_11.13
byFrancis Brown
 
PDF
Venmo Company Presentation
byMara Gordon
 
PDF
Ecommerce Service Model PowerPoint Presentation Slides
bySlideTeam
 
PDF
Klarna - NOAH12 London
byNOAH Advisors
 
PPTX
E-commerce for Fashion
byIB Screwed
 
PPTX
Case study competition ppt.
byJIMS Rohini Sector 5
 
PPTX
Future of Mobile Banking System
bySyed Shujat Ali
 
PPTX
Rentomojo SEM strategy
byMichelle Varghese
 
AirBnB Pitch Deck
byMalcolm Lewis
 
Foursquare Pitch Deck
byTech in Asia ID
 
Ayekart pitch deck
byTech in Asia
 
Top Trends in Payments 2022
byCapgemini
 
E commerce project
byAvya Aravind
 
Backbase On-Demand Webinar: Banking 2025
byBackbase
 
WeTipp Pitch Deck
bystartuphome
 
5. aeps
byDevi Thirupathi
 
How to Conduct UX Benchmarking Studies Your Own Site Over Time + Competitors ...
byUserZoom
 
StairWear Pitch Deck
byMichael O'Sullivan
 
BKash Marketing Plan 03.pptx
byssuser0cb2a5
 
Building the 10x better bank
byBackbase
 
Venmo Presentation_11.13
byFrancis Brown
 
Venmo Company Presentation
byMara Gordon
 
Ecommerce Service Model PowerPoint Presentation Slides
bySlideTeam
 
Klarna - NOAH12 London
byNOAH Advisors
 
E-commerce for Fashion
byIB Screwed
 
Case study competition ppt.
byJIMS Rohini Sector 5
 
Future of Mobile Banking System
bySyed Shujat Ali
 
Rentomojo SEM strategy
byMichelle Varghese
 

Viewers also liked

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

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

PDF
Mobile App UX Principles: Improving User Experience and Optimising Conversion
byMatthieu Tran-Van
 
PDF
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
byBugRaptors
 
PPTX
Mobile Banking Application Research Report
byaashishgyawali56
 
PDF
Mobile app ux_principles
byHalil Eren Çelik
 
PDF
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
byHarssh Trivedi
 
PPTX
bKash.pptx
byAhmedRahin1
 
PPTX
Making Money with Technology
byKasun Kodagoda
 
PDF
UX Design for Mobile Payment Experiences
bySkip Allums
 
PPTX
ADM: Mobile banking and trading website - Keytrade Bank
byHuman Interface Group
 
PDF
Prelaunch checklist game design
byTapjoy
 
PPTX
Boost a Fintech Startup's Success Through UX Design
byFibonalabs
 
PDF
Mobile app ux_principles
bysolomon kitumba
 
PPTX
UPA 2012 - Mobile user experience Southern Africa
byHelga Stegmann
 
PDF
Excellence in the Android User Experience
bymobilegui
 
PPTX
UX 101 by Ruthless UX
byTechved Consulting
 
PDF
Designing Rich Mobile Apps in a Fragmented World
byWorklight
 
PDF
Mis mon 0900 alan gellman
byMediaPost
 
KEY
Min Ahmed - Can help to build a successful mobile application
byJan Paul Roth
 
KEY
Best Mobile UI Practices - FITC Mobile 2010
byBoris Chan
 
PDF
Thinking mobile
bySoledad Dematteo
 
Mobile App UX Principles: Improving User Experience and Optimising Conversion
byMatthieu Tran-Van
 
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
byBugRaptors
 
Mobile Banking Application Research Report
byaashishgyawali56
 
Mobile app ux_principles
byHalil Eren Çelik
 
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
byHarssh Trivedi
 
bKash.pptx
byAhmedRahin1
 
Making Money with Technology
byKasun Kodagoda
 
UX Design for Mobile Payment Experiences
bySkip Allums
 
ADM: Mobile banking and trading website - Keytrade Bank
byHuman Interface Group
 
Prelaunch checklist game design
byTapjoy
 
Boost a Fintech Startup's Success Through UX Design
byFibonalabs
 
Mobile app ux_principles
bysolomon kitumba
 
UPA 2012 - Mobile user experience Southern Africa
byHelga Stegmann
 
Excellence in the Android User Experience
bymobilegui
 
UX 101 by Ruthless UX
byTechved Consulting
 
Designing Rich Mobile Apps in a Fragmented World
byWorklight
 
Mis mon 0900 alan gellman
byMediaPost
 
Min Ahmed - Can help to build a successful mobile application
byJan Paul Roth
 
Best Mobile UI Practices - FITC Mobile 2010
byBoris Chan
 
Thinking mobile
bySoledad Dematteo
 

More from CGAP

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

Recently uploaded

PDF
Smart Tax Planning Tips for Corporate Employees by Ankush Mukundan.pdf
byAnkush Mukundan
 
DOCX
Best Top // Bank Of America Accounts.docx
bymarketing
 
DOCX
Buy Verified Wise Account- 100% Secure- Instant Delivery.docx
bymarketing
 
PPTX
The End of Cash: China’s CBDC & The New Global Power Play
byTHE ARCAELITH
 
DOCX
Best/ Top9.99 Self Bank Account (1).docx
bymarketing
 
DOCX
Send Money Fast — Trusted Worldwide with Western Union.docx
bymarketng
 
PPTX
REALTIONSHIP OF ECONOMICS AND ENGINEERING.pptx
byshubham15jee
 
PDF
Recovering From Crypto Scams: A Complete Guide to Safe and Reliable Recovery ...
byCrypto Recovery Expert Agency
 
PDF
Function of government institutions: economy
byrebeccamunozruiz
 
PDF
Understanding the Role of a Superannuation Tax Advisor.pdf
byaxispartnersbusiness
 
PPT
Policy in an Open Economy (Economics).ppt
byWinsomeG
 
PPTX
Presentation 12.pptxuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
byEndangPrabandari1
 
DOCX
NJTRX Traders Monitor Diverging ETF Flows as Solana Defies Bitcoin-Ether Exodus
byNJTRX
 
PDF
USDT RECOVERY EXPERT WITH CRANIX ETHICAL SOLUTIONS HAVEN
byblakeaugust722
 
PDF
Navigating Your Financial Journey: Practical Strategies for Life Stage Success
byMatt Dixon
 
DOCX
_Scale Your U.S. Audience on Twitter — Strategy + Execution.docx
bymarketing
 
PDF
New world order according to Forbs Contact Us
bygeraldsabinus
 
PDF
Lundin Gold Q3 2025 Conference Call Presentation
byAdnet Communications
 
PDF
ADFIMI-Legal-Documentations-Rusni-22Feb2014.pdf
bydoctorfarrukhhabib
 
PPTX
Economic Chapter 4 Lecture Presentation.pptx
byYunusEmreKkl
 
Smart Tax Planning Tips for Corporate Employees by Ankush Mukundan.pdf
byAnkush Mukundan
 
Best Top // Bank Of America Accounts.docx
bymarketing
 
Buy Verified Wise Account- 100% Secure- Instant Delivery.docx
bymarketing
 
The End of Cash: China’s CBDC & The New Global Power Play
byTHE ARCAELITH
 
Best/ Top9.99 Self Bank Account (1).docx
bymarketing
 
Send Money Fast — Trusted Worldwide with Western Union.docx
bymarketng
 
REALTIONSHIP OF ECONOMICS AND ENGINEERING.pptx
byshubham15jee
 
Recovering From Crypto Scams: A Complete Guide to Safe and Reliable Recovery ...
byCrypto Recovery Expert Agency
 
Function of government institutions: economy
byrebeccamunozruiz
 
Understanding the Role of a Superannuation Tax Advisor.pdf
byaxispartnersbusiness
 
Policy in an Open Economy (Economics).ppt
byWinsomeG
 
Presentation 12.pptxuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
byEndangPrabandari1
 
NJTRX Traders Monitor Diverging ETF Flows as Solana Defies Bitcoin-Ether Exodus
byNJTRX
 
USDT RECOVERY EXPERT WITH CRANIX ETHICAL SOLUTIONS HAVEN
byblakeaugust722
 
Navigating Your Financial Journey: Practical Strategies for Life Stage Success
byMatt Dixon
 
_Scale Your U.S. Audience on Twitter — Strategy + Execution.docx
bymarketing
 
New world order according to Forbs Contact Us
bygeraldsabinus
 
Lundin Gold Q3 2025 Conference Call Presentation
byAdnet Communications
 
ADFIMI-Legal-Documentations-Rusni-22Feb2014.pdf
bydoctorfarrukhhabib
 
Economic Chapter 4 Lecture Presentation.pptx
byYunusEmreKkl
 

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

  • 1.
    Smartphones & MobileMoney: Principles for UI/UX Design (1.0) Gregory Chen Alexandra Fiorillo Michel HanouchOctober 2016
  • 2.
    CONTENTS Smartphones Will ChangeMobile 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 MobileMoney 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 AvoidableMistakes Copy USSD Menus Overly Rely on Text Resort to Careless or Confusing Icons
  • 5.
    5 Many Interfaces Make AvoidableMistakes 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 PrinciplesWill 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 SmartphoneMobile Money UI/UX 7
  • 8.
    8 Allowing new usersto 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 agentsremains 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-upis 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 hierarchicalmenus 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 quickvisual 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 andUse 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 communicateclear 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 (SignOut) 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 languageand 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 designpractices 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 fewchoices 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 speedup 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, useof 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 easyto 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 oraction 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 TransactionConfirmations (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 toreview 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 shouldappear 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 isan 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 keyboardsease 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 feecalculator 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 takeplace 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 accountbalance 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.
  • 33.
  • 34.
    34 The most commonreason 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 likethe 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 ofcurrency 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 aboutother 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 SimpleInstructions, 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 thecontext, 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 toSelf-Register? (cont.)
  • 41.
    41 Agents are anessential 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 haveunsatisfactory 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 Improvethe Smartphone Interface
  • 44.
    44 Design improves withfeedback 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 requiresmultiple 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 toDiscard 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 istoo 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 ofbusiness 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)
  • 49.
  • 50.
    50 Additional Resources There aremany 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 UserInterface 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 necessaryfor 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