6 things I learned from designing a mobile wallet
When it comes to designing mobile wallets, significant number of stakeholders are included in the decision making process. Therefore, due to many opinions, preferences and business goals being involved, it might get difficult in time to decide what is best for the user since the focus becomes slightly adjusted with every design decision being made.
For example, the bank may argue that they would like to see the card taking up to 100% width of the UI. This doesn’t necessarily help the user in every situation.
While paying at the store, just the sufficient card size might help the user to easily recognise which card he is using for payment and therefore do the payment process quickly as the situation implies.
It is the perfect situation where many people might have input for, which doesn’t necessarily mean that is the right concept for the end user as well.
In order your wallet to be accepted and go “live” first of all it needs to be validated against Mastercard’s brand requirements in digital payment UI’s. This document is not more then a list of requirements of how the brand of Mastercard must be presented in your UI. Most probably their brand will appear in the bank card, in the documents acceptance flow as standalone symbol, during card digitalisation etc.
Here are the main pain points of those requirements:
How do you measure 15mm on a relative screen size? You don’t. Here is an online calculator that can help with that, especially for Android devices and dp’s.
Additionally, you need to display Mastercard’s brand mark when:
Mastercard is changing these requirements over time, so it is always a good idea to double check if something’s changed.
A recommendation is not to use greyed out style for visualising the different bank card statuses, e.g. activated, blocked or inactive card. Additionally, in order to clearly distinguish inactive and blocked state e.g., for which you might use transparency, a good recommendation would be not to rely only on the card artwork, but also use accompanying visual queues as text and iconography to reinforce the meaning of the card status itself.
In real life when you make a transaction of any kind, whether paying at the store or doing a money transfer, the assets are not instantly “gone” from your account and “settled” to the other side. That process can last up to 3 weeks. Therefore, in the UI, we need to indicate these states where the progress is ongoing since if we don’t provide this feedback to the user as a result of his action he would expect that there isn’t any additional ongoing process. Even though it might be more obvious for paying at the store at the terminal, when using wallet to split bills or send / receive money from friends, the expectations of immediate response from the ui are higher because of the nature of this type of transactions.
Creating a good design system in your design file is essential to keep up a neat workflow and ensure the file is flexible enough to easily apply branding or to globally change a text or a color style. With that kind of working flexibility you avoid the possibility of elements appearing differently on separate screens. In terms of Sketch, Figma, Adobe XD, that means constant work with symbols or components and text and layer styles applied to them.
In our solution we based the color and text styles system on Material design’s guidelines.
If your wallet is a potential product you need to distinguish from the start what is brandable and what not. That will help development to define everything that will act as a brandable component in the UI. Defining what is brandable and what not also gives you great insight whether your UI will work in different branding styles of multiple banks. Moreover, you will be able to set the theme of your wallet more easily and push towards that style by defining the constraints of the branding possibilities for the different banks and therefore keep a consistent experience of the wallet product no matter the bank brand.
More info about how we created our design system and organized the components and styles will be featured in a follow-up article. Thanks for reading! (:
6 things I learned from designing a mobile wallet
Research & References of 6 things I learned from designing a mobile wallet|A&C Accounting And Tax Services
Source
0 Comments