Will standardised icon design increase the adoption of Digital Payments?
In this article, we talk about Project Pratima, an initiative by the Payments Council of India (PCI) and the importance of standardising the icons used by payment apps in India.
Designing interfaces for India can be challenging due to the country's diverse demographics and cultural differences. Historically, Indians have always been exposed to illustrative and descriptive signages, as opposed to the western style of simplified and minimal iconography. For instance, when you drive across towns in India, the gender markings on the public restrooms are done with an elaborate sketch of a Man and a Woman. This is intended to help individuals with varying educational backgrounds navigate with ease.
Graphic Icons are considered to be the signages of the digital world - helping users navigate through app screens. Arguably the real estate space available on a public restroom wall allows for such artistic expressions. But in the limited space offered on app screens, such elaborate illustrative communication of ideas is difficult. Hence it is recommended to choose a minimal approach that, employs a standardised visual representation that an Indian user resonates with.
UPI (Unified Payments Interface)1 has changed the way Indians transact. Let’s consider some of India’s popular UPI-based payment apps to dive deeper into the problem space. Consider Swapna, a 34-year-old software engineer working in a multi-national corporation in Hyderabad, who uses an Android smartphone since 2013. She wakes up, goes to sleep, and does everything in between using her phone. She explores new apps, seeking the best shopping deals and UPI is her preferred mode of payment. She’s what we’d call a tech-savvy user. The apartment complex where Swapna lives employs a stay-in dhobi (washerwoman) Hema, who is a single mother to a 12-year-old daughter and is relatively new to using smartphones. She hails from a village off Bhimavaram in coastal Andhra Pradesh. Initially, she only used her phone to make calls back home to her parents and sister Jaya, send voice messages on WhatsApp or watch videos on Youtube.
Hema has a bank account where she deposits money to send home, but most of her daily transactions were in cash. Post demonetisation, most of her customers in the apartment complex, did not have the cash to pay her on time and urged her to sign up for a digital payment platform like Google Pay or PayTM. Swapna helped Hema onboard on Tez (now Google Pay), set up a business account, explained how to transfer funds to her family and also make payments using UPI for her everyday expenses.
Demonetisation changed the way people transacted in cities and towns. But, even after six years, a vast majority of the underserved population is hesitant to adopt digital payments. Although Hema accepts payments via UPI, she still relies on muscle memory and on her daughter to perform advanced payment actions like bill payments.
Jaya, Hema’s sister, who continues to live in the village, still prefers cash. Though she owns a smartphone, her knowledge of finance and technology is very limited and she fears that one misstep can cause her to lose all her money like some of her relatives who have been subjected to phishing scams.
Even the ‘tech-savvy’ Swapna needs a good couple of minutes when she switches from her trusted Google Pay to PhonePe or PayTM when the servers are down.
This led us to the question —
How can we rethink design elements like icons in existing digital finance interfaces to align with the mental model of every Indian, regardless of their educational background?
Significance of Project Pratima
The number of banks that are live on UPI has grown from a mere 30 in November 2016, to 376 banks in November 20222. It is crucial, now more than ever to standardise the user experience of digital payments across different payment providers and standalone third-party apps.
Project Pratima, is an initiative by the Payments Council of India (PCI) in partnership with the Reserve Bank of India (RBI) to standardise payment icons across apps and platforms. Standardising will improve the recognition of apps for savvy users like Swapna, smoothen the learning curve for amateur users like Hema and Jaya and also help reduce fraud, making it easier for users to carry out financial activities agnostic of the platform they use.
Pratima in Sanskrit means ‘Image or resemblance’ and true to its name, this project is an icon (symbol) library designed for the use of financial service providers in the country. The intention is to create a set of icons that would be easily recognisable by every Indian, irrespective of their demographic and literacy levels.
The process of creating an icon library for payment apps:
As the first step, PCI chose a working group of decision-makers3 from India’s popular financial platforms and formed a smaller team of designers4 from these organisations.
When the design team sat down to devise a project plan, the logical approach was a research-first methodology that started with research to assess the needs of the cohort, synthesise the findings and then move to design. However, on careful consideration of the problem and the scale of the cohort, the team realised that it is impossible to arrive at a unified solution for each icon that will align with the mental models of 1.4 billion people.
To put things into perspective, consider the icons on your phone. Take the Hamburger icon for example. If we were to ask you what is the ideal symbol for a menu icon, there’s not a chance in the world you would have ever suggested three horizontal lines, yet over the years it has almost become a standard icon to depict ‘menu’. You would have probably said a book or a rectangle with lines indicating a list. Now, none of these options are wrong but if we were to ask the same question in your neighbourhood, the responses would have been as diverse as the individuals that inhabit it.
Therefore, a new non-linear approach was sought where the team employs certain assumptions - using available data and past experience, to create a draft set of icons. These icons would then be evaluated and refined for usage. The four phases of the project are
Based on an audit conducted across popular payment apps, 9 icons were identified to address about 80% of users’ interactions with digital payment applications. These 9 icons along with 3 payment status markers were chosen for standardising.
Interface Designers often use templates for icons and elements. These icons might seem intuitive on apps that are designed for tech-savvy individuals like Swapna. However, designing for rural and new-to-technology users like Hema or Jaya, demands the designer to rethink every element on the screen from the perspective of the user’s mental model. Hence, it is important to use simplified versions of artefacts that the users of India are familiar with rather than force-fitting a western interpretation.
For instance, let’s understand the icon design for an insurance product. Some apps use an umbrella to show protection while Indian users are more likely to associate protection with a symbolic, two hands guarding a lamp, or a shield that indicates defence. So, to show insurance and invoke a sense of protection, one might choose a shield alongside the insured (bike/ car/ human etc.,) rather than an umbrella.
To ensure alignment among a diverse set of stakeholders, ground rules are a must. Therefore, the working group of designers defined a set of key principles to be followed while designing the new icons. Each of the icons proposed should adhere to these 4 principles in terms of both
Metaphors: visual representation A metaphor is a representation associating one well-established object or meaning with another for ease of communication.
Nomenclature: The language that accompanies Nomenclatures are Icon naming conventions that aid in deepening the users’ understanding of the icon.
2A: Metaphors - Standardising the Visuals
“A rose by any other name would smell as sweet” - William Shakespeare
In this exercise, the visual representation of the chosen icons, which were simplified to the primary actions associated with them. For example, Sending money is an action where the user transfers money from their account to another. By combining the metaphor for money (rupee symbol) with another metaphor for sending (outward arrow), the visual icon for sending money was created.
These metaphors were then sketched into icons of various combinations and styles. Like in the case of sending money, multiple options with the arrow pointing in any of the outward directions like top, sides or in diagonal were created. A dot-voting5 exercise among the designers helped to eliminate ambiguous or confusing representations. In this case, when an arrow pointing to either side is used for both receiving and sending money, it can lead to confusion. Therefore, an upward arrow for sending and a downward one for receiving were chosen.
2B. Nomenclatures - Standardising the language
“Calling a spade a spade”
Language acts as an accessibility fail-safe when designing inclusive interfaces. In a country where only 3% of the rural population speaks English6, it is advisable to use simple and consistent language across the entire icon system.
Using an unaided survey, multiple icon options for each of the use cases were put to test. Users were presented with an image of the icons and were asked to enter the first word or phrase that crosses their mind when they look at the icon. The aim was to assess if the icons conveyed the intended action without its supporting text. This served as a starting point to gauge which of the icons are recognizable and which needed refinement.
On analysing the responses, the icon options that seemed to not be in line with the users’ perception were eliminated. The icons that ranked the highest were then refined, incorporating the users’ feedback. Thus creating the first version of the shareable icon library.
4: Sharing & leveraging social capital for further refinement
A designer-friendly framework called Fictoan was used to build a website that enables sharing and personalising the icons — by changing the stroke size, corner radii and terminals. These modified versions of icons can then be downloaded individually or as a complete set of SVG (Scalable Vector Graphic)7 files.
Detailed documentation about the construction of icons was also provided along with usage guidelines like
Recommendations on the usage of colours
Accessibility guardrails while allowing brands to customise the icons as per their brand guidelines
Minimum and maximum allowed sizes.
Further, the FAQs highlighted the do’s and don’ts with clear examples to avoid ambiguity.
The project is open to further research. Our goal is to utilise these learnings to initiate social collaborations amongst the FinTech community as well as regulators. By adopting an iterative approach of evaluation and refinement, we can aim to eventually arrive at a set of icons that can be recognised by every Indian.
Conclusion & Future steps:
Digital Payments are moving to tier 3 and beyond, and UPI is no longer just for smartphone users. With many features and innovations like UPI lite, Voice payments and eRupi vouchers being introduced, Project Pratima’s scope expands to the whole payments ecosystem. This will ultimately drive better adoption of new technology in India, paving way for other financial instruments such as insurance and investments.
Hence it is important to keep the ball rolling for future developments by means of
Training the users to build confidence with digital payment methods,
Constant reiteration of the designs by means of usability testing,
Marketing and awareness-driven campaigns to improve adoption and
Employing inclusive design principles to overcome accessibility barriers.
We will cover more on these steps and driving the adoption of new technology for the non-native cohorts in our next blog.
The Authors of this article were a part of the core team of designers who worked on Project Pratima.
Header artwork designed by Himanshi Parmar.
If you enjoyed reading this blog and would like to receive more such articles from D91 Labs, please subscribe to our blogs here.
Unified Payment Interface (UPI) is a popular payment system in India that enables individuals to transfer money between bank accounts instantly and securely using a smartphone. Owing to the speed, convenience, and ubiquity of the platform, UPI has seen significant growth in India in recent years with one of the highest market penetration rates.
Dot voting is an exercise where participants vote for their preferred options using dot-shaped stickers. Finally, the option with the most dots is chosen.
SVG stands for Scalable Vector Graphics. This file format is used popularly for displaying icons, charts, and illustrations as it lends well to scaling, tweaking and customization across design tools. It is also the preferred choice for seamless usage in the front-end development process as the vector file can be scaled up or down without losing its resolution.
