Context
The Chrome extension builds on FINZ MONI's aim to make debit cards as rewarding as credit cards. Making earning cashback accessible and secure. Providing users with a notification when on a website with cashback via FINZ, while simplifying the payment process by reducing the number of clicks needed to make a purchase.
Test
​
Finally, to test my design, gather feedback, and make changes before the product is built by engineers.
​
​
Problem
There are three main concerns we wanted the Chrome extension to address. This included:
1
Security
​
Ensure user payment details are kept secure by providing single-use payment details for each purchase, ensure that they can’t be stolen and used again once the purchase has been completed.
2
Rewards
​
To ensure a user never misses out on a reward.
Speed
​
To make the payment process as quick as possible..
​
3
Design process
Creating a familiar look and feel to the FINZ Money app was key, while ensuring it was optimised for the Chrome extension. Utilisation of the FINZ Money ‘Design System’ was essential in maximising the power of familiarity.
​
Reducing the learning curve when swapping between app and extension. Allowing users to complete their task without fuss, increasing user retention. Improving the speed at which a task can be completed.
Not to mention the benefits to me as the designer!
Prototyping
Multiple versions of each screen were created, balancing usability and design.
Here is an example of the homepage. The first design focused on user clicking on the debit card image for find additional options.
​
The second played with the idea of multiple debit cards and how they would be displayed. On a mobile app you could easy scroll through a selection of cards, not so easy on a desktop.
The final option, and the selected route was to include buttons to click through active debit cards (indicated by the arrow and 1 of 3 text).
Security - part 1
To create a sense of familiarity and security, new users are taken through a similar verification process to what they would have experienced when setting up the app.
Security - part 2
To create a sense of security, important card detail information isn’t available on the homepage. Users can click to view this information, but first have to enter their 4-digital PIN
Rewards
To ensure the user is aware of any cashback deals when browsing websites, notification prompts launch to let the user know that cashback is available. This could be further improved in the future to include more details, such as the amount of cashback available.
The design echos the app, with a subtle hint of the goal loops to remind users of the benefits they are working towards.
Speed
Making a quick payment is key to making the extension a success. As such, all of the vital information is on the homepage, with any other information just one click away. The design is clean and simple, with minimal fuss, so to make the purchase process simple and easy to follow with no unnecessary distractions.
​
A simple click on the card, and the entry of the security PIN can populate the payment details at the checkout.
Screens
Prototypes of the login and homesceen.
Takeaway
My three takeaways for this design sprint.
The importance of familiarity​
​
Being so closely linked to the app highlighted the importance of following design systems to ensure users transition from one product to the next with ease while feeling secure.
Usability testing
​
Again, the importance of usability testing and getting the opinion of users and how the design works to them.
The importance of accessibility​
​
This is something I don’t think is addressed enough in the design system and is something I’d like to explore in the future. Looking at contrast for example.