FinTech
8 min read

UX Case Study: Virtual Banking reward system for Web 3.0 Adpotion

Using an engaging reward system to increase user interaction and using blockchain features to prepare users and businesses for future Web 3.0 opportunities. We need a new approach to finance in the Web 3 era for the young generation for mass adoption of personal finance with interaction to the blockchain technologies.
Written by
Mikael Li
Published on
30 March 2023
Client
Virtual Bank
Role
Product Design, UX Research, UX/UI Design, Interaction Design
Project Year
2020
Industry
FinTech
Tools
Figma, Miro, Maze
Case study content
This is some text inside of a div block.
Read about our privacy policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Introduction

Web 3.0 technologies can be unstoppable, although the crypto market is facing difficulties in recent years, banks and financial institutions are actively adopting Web 3.0 technologies to make the business in a better position for a more dynamic future.

The project is about removing obstacles between young users and virtual banking products, further, the Web 3.0 technology, with an engaging reward system and using the point conversion feature to allow the user to experience their first blockchain interaction.

The product in this case study is not an actual product, it's a combination of several real projects I worked on. But the user experience research and the design process are worthy of sharing, so I wrote this case study to show the possibilities of different approaches for businesses to a wide Web 3.0 Adoption.

This case study is focusing on the key features of this FinTech application for a virtual bank, it represents a real client I worked for. Under NDA, I could not reveal too many details of the project, in fact, the real projects behind are paused due to the uncertainty of the cryptocurrency regulation framework at that time, but the research and product roadmap is still valid and very applicable since Hong Kong is having a more clear crypto regulation and setting its position to become a cryptocurrency hub in Asia.

Vision

Attracting young capital and cash flow is always the core business goal of the banking sector, in the era of web 3.0 and digital adoption, it opens opportunities for the young generation to apply their capital and cash flow on personal finance, micro-insurance, and blockchain assets. The business wants to increase the engagement of the user and prepare them to use the Web 3.0 service in the future.

Reality

Users easily get stuck in the onboarding process, not adopting virtual banking and web 3 blockchain interactions, virtual banking businesses have obstacles to developing the customer base to the next level. With the clear regulations of blockchain assets, the banking sector needs to be ready to provide blockchain asset services in the future.

Product Mission

Removing obstacles, making personal finance more simple and fun, using a reward system to bridge users to their first web 3 blockchain interaction, and unlocking unlimited opportunities like DeFi products and soul-bound tokens in the future.


Problem Statement

There are 2 aspects of the pain points users face when interacting with FinTech digital products and Web 3.0 technologies, the issue of onboarding and engagement.

The issue of the onboarding experience

  • As a user, a lengthy onboarding process will make users feel lost
  • KYC - complex and lengthy onboarding process under the requirement of a regulation guideline issued by HKMA
  • High knowledge demand to onboard with the web 3.0 technologies like opening a crypto account and creating a decentralized wallet.

The issue of engagement

  • Not enough touchpoints in daily life for the user to engage with the banking product
  • The weak linkage between the user's daily routine and the personal finance data
  • No gateway to introduce users to interact with the Web 3.0 world

The vision is to make the Virtual Banking application easy to onboard, creating a feature to increase user engagement and prepare users for their first web 3 interaction.

We need a product with an easy onboarding experience, basic virtual banking features, Web 3.0-ready money transfer, a reward system, and a point conversion feature to increase user engagement for a better conversion rate and prepare the business for Web 3.0 opportunities.


UX Research

The research direction was on the clear business goal of creating a reward system for the virtual bank. After the real project paused, I carried out further research on user behavior in the Web 3.0 context. Here are the defined research aspects:

  • User behavior during the onboarding process
  • Study on the user behavior in the reward program of banks
  • Currency conversion user behavior
  • The understanding of Web 3.0 technology

My research strategy is to start with an extensive competitive analysis to observe the respected design pattern. With a basic understanding, we conducted several user interviews and usability tests on competitors’ products. For the concept and mental model part, we created a brief survey to collect data to assist our design decisions.

The resource is limited, and the client can not open the user group to us, we can only recruit participants from colleagues and friends, which created a certain limitation on the research findings.

Competitive Analysis

We conducted a UX audit on several competitors’ apps on the following feature to support our assumptions to increase user interaction with easy onboarding and a reward system.

Virtual Banking KYC

  • Livi Bank
  • Inhouse KYC Product

Banking Reward System

  • HSBC Reward+
  • Livi Bank Reward

Banking mission system

  • Binance Mission / SoFi Missions
  • Deposit reward/ Daily Login / Product Interaction/ Blog post/ Referral

Point conversion system

  • Bloom Reward
  • Binance

Competitive Analysis & UX Audit - Extensive competitive analysis & UX audit on the features like onboarding process, money transfer, reward system, point conversion & Web 3 Wallet

Competitive Analysis & Compare Table - Comparing the feature provided by direct and indirect competitors, we observed the pattern of how businesses leverage reward point systems to increase user interaction and provide opportunities for users to use financial innovation like blockchain technology

Main findings - Competitive Analysis

  • Virtual banking onboarding experiences are similar, but there are differences in the tools for identity identification
  • The reward system is commonly adopted by traditional banking but is quite scattered
  • There are rewarding systems on the market that allow users to convert points to cryptocurrency

User Persona

Findings to back up the demographic we are choosing and to provide a minimal user persona here to visualize who we are designing the product for.

Proto-Persona - The demographics of our users are mainly the younger generation between the age of 20 to 40, with a higher adoption to financial technologies and higher needs for financial products

Quantitative Research

As to understand more about user behaviors on Virtual Banking, reward systems, and Web 3.0 understanding. We conduct a survey among our peers and friends.

Survey

By using Maze, we can send out a survey to people online and collect feedback with real-time data analysis. The survey design is focusing on several parts:

Part 1: Virtual Banking

  • Usage of Virtual Banking
  • Experience in Account Opening
  • Experience in the KYC process
  • Experience in Security Measurement
  • Experience in Account Funding
  • Experience in money transfer

Part 2: Reward System

  • Usage of Reward System
  • Experience in Reward Tasks
  • Experience in Point Collection
  • Experience in Redeem
  • Experience in Point Conversion

Part 3: Web 3.0 Adoption

  • Awareness of Web 3.0 Technologies
  • Usage of Web 3.0 Technologies
  • Web 3.0 Prospect

Qualitative Research

For a deeper understanding of the user behaviors and mental models in Virtual Banking and reward system, we conducted interviews and usability testing with our colleagues and close friend which matches the demographic of younger people who have higher chances to adapt to Web 3.0 technologies.

User Interview

We interview our peers online and offline with a question set to validate our assumption. With the help of the Junior UX/UI Designer, we interviewed 5 colleagues and 5 personal friends. The following are the main topics of the interview:

  • User background understanding
  • Usage of Virtual Banking
  • Usage of Reward System
  • Usage of Money transfer/crypto transfer
  • Understanding of Web 3.0 Technology

The main target of the user interview is to understand the context behind the usage of the target type of digital product, the participant is close to our targeted persona, and the finding can help to generalize the social context of our user.

User Interview Script - We developed the interview script to guide ourselves to moderate the interview session, provide project background and key questions to ask the user

Usability study on competitor app

The usability study was conducted after the user interview and we create a usability testing manual to facilitate the sessions. The process was conducted in a casual manner and due to limited time and resources, we didn’t set up a camera or screen recording to record the user behavior during the test.

Usability Study Manual - We document the introduction of the testing and the main tasks we want the participants to finish during the usability study

Main findings - Qualitative Research

  • It’s common to face technical issues during the onboarding process, problems like the reflection of light on the ID Card.
  • User intend to participate in point reward system to use their extra time to do missions for the exchange of additional value
  • Web 3 adoption within our sample size is very low, this was of the reason the real world paused, as the client think that Web 3 adoption was not high enough for them to invest in these Web 3 related features


UX Analysis

After collecting data with the UX research, we gathered all the information in an Affinity Mapping miro board to analyze the finding we uncovered during the research.

We found that users need a simple onboarding process with minimal obstacles, the basic features of Virtual Banking, and it’s good to have a reward system to collect points when users are interacting with the product and will try to convert the point to crypto-currency to try on their first Web 3 interaction.

Affinity Mapping

This is a cooperative UX activity to upload the finding in a Miro board for the team members to access, after the pause of the project, I carried on the research and removed all the sensitive data which is not allowed to disclose.

The Affinity Mapping Board mainly consists of the following information from the UX research.

  • Interview Scripts
  • Interview notes
  • Usability Test Facilitator Menu
  • Survey Question
  • Survey Data Analysis

After several online affinity planning sessions and individual UX analysis sessions, we organized the finding and summarized the pattern we observed.

For usability tests, we are looking for:

  • Primary and secondary goals
  • Pain points
  • Mental models

For the User interview, we are looking for:

  • User goals
  • Context

Miro Affinity Mapping Session - We conducted the virtual affinity mapping session online in Miro to analyze the data with a video call. (Sensitivity data are covered)
Miro Affinity Mapping - We use the affinity diagram to gather all the quantitative and qualitative data, observe the pattern and outline the mental model of the user, and summarise the user behavior. (Sensitivity data are covered)

Customer Journey Map

We identified the pattern in user goals, pain points, mental models, and context, then we summarised and defined the high-level steps to map with the touchpoint in our project scope.

With the customer journey map, we can have a macro picture of how the user will interact with the product and business in different touch points, knowing their pain points in a different stage of their journey to solve problems, discover the opportunities behind and introduce features as a touchpoint to map with the pain points of user and to create value for the user by solving certain problems they faced in the journey.

I created the following Customer Journey Maps to outline the user goals, behaviors, and pain points in each stage of the journey and to outline the touch points and opportunities behind them.

  • User Onboarding & KYC process
  • Funding and transfer money process
  • Reward System and point conversion process

Customer Journey Map: Onboarding & KYC Flow - Based on the research of our existing onboarding & KYC feature, we outlined the user pain points and design opportunities from our findings

Customer Journey Map: Funding & Money Transfer Flow - Users mainly follow the onboarding flow to find their accounts and perform money transfers in the later stage. Touchpoints after their first transaction are the design opportunities for users to engage more with the product

Customer Journey Map: Reward, Point Convert & Web 3 Wallet Flow - It’s a relatively linear process in that the user interacts with the reward system, accumulates points, convert the points to crypto, and interacts with the Web 3 wallet for storing the crypto


Product Management

With limited time and resources, the product team was deciding to focus on the MVP to provide the primary function of virtual banking to transfer money, open a virtual credit card first, in the later stage, to introduce the point reward system and the point conversion feature to turn points into crypto tokens.

Priority Matrix - Mapping the possible features with the impact and effort to balance the feasibility and desirability from the business and user perspective

Product Backlog - We documented the product backlog, sprint kanban, and product roadmap in Favro for project and product management

Product Roadmap - The product roadmap for the MVP version of the product, in the real case the process was paused, this is just the representation of the proposed timeline


Solution Approach

The solution approach we proposed, is to make the onboarding experience simple, adding some Web 3.0-ready features in the funding and transfer functions, integrating Reward & Mission Systems for better user engagement, and lastly adding a Wallet feature to the existing system for future Web 3.0 interactions.

Solution 1: Simple Onboarding Experience

Remove the obstacles within the onboarding process and make the KYC process easy and simple.

Solution 2: Easy Funding & Money Transfer with Web 3.0-ready features

Extend the existing funding and transfer flow, adding the Web 3.0 ready feature for user to convert crypto (which need the wallet feature in later stages) and to transfer crypto to others.

Solution 3: Reward System for user engagement

The business needs a simple reward system in the first phase with simple features and mission types for user adoption and engagement.

Points will be issued for the mission completion reward, users can use the points for redemption like financial product discounts or coupons, points can also be converted to cryptocurrency.

Solution 4: Point Conversion for First Blockchain interaction

The point system will be introduced together with the new reward system, user will be able to convert the Points to top-tier crypto and store them in their custody wallet, this feature can bridge users to their first blockchain interaction.

Feature 5: Crypto Wallet

In the early phase, the user can store cryptocurrency in the wallet from the point conversion, in the later phase, under clear regulations, the virtual bank can perform crypto transactions for the user based on the wallet. Furthermore, a DeFi wallet creation ability will be an essential feature in the future web 3 landscape, with a more clear local regulation, we believe the industry will invest heavily in the adoption.


UX Design

Based on the research finding and product design prioritization decisions, we worked on the extension of the existing Virtual Bank app structure to integrate with the reward system and Web 3 wallet flows.

We optimized the information architecture to integrate the new features and to visualize the new user flow design for the client to evaluate how to add the new features to the existing app.

Information Architecture

Developing upon the existing architecture, we integrated our reward system into the structure and optimized the flow to interact with the financial products.

Under NDAs, I could not reveal client information and how we integrate our system with the client’s system, the image is blurred to protect client information

Information Architectures - New features were added to the existing structure for client confirmation and internal communications with the development team

User Flow Design

The product is having multiple complex user flows, here are the main user flows under the scope of the case studies

  • User Onboarding & KYC flow
  • Funding and transfer money flow
  • Reward System and point conversion flow
  • Blockchain Wallet beta flow

Flow Diagram: Money transfer with Web 3 transactions Flow - The primary goal is to make sure we can integrate the Web 3 transactions in the money transfer by advance the full user flow

Flow Diagram: Reward System redemption Flow - We design a simple homepage for the reward system for the MVP phase of the project to make an easier adoption to interact with the reward mission and redemption mechanism

Flow Diagram: Point conversion Flow with Web 3 wallet interaction - Point conversion is an advanced flow for users with basic Web 3 understanding, yet we also provide enough information for users to conduct their first blockchain interaction

Wireframing

The following are the wireframe we usually created for client confirmation and mutual agreement on the approach to the solution.

In the project time, I discovered the UX Guru and IS Graphics ux flow package. I purchased them immediately with my own fund after using the free versions.

After introducing these tools to the design team, we found that we can create flow diagram and low-fedelity wireframe for client confirmations. With the guidance of the confirmed wireframe, we could work on the UI design in a more effective manner.

Low-Fidelity Wireframe - We used the low-fidelity wireframe mainly for feature confirmations and internal communication with other designers and developers


Design System

During the design phase of the project, I was also working on the new design system for the agency, I duplicated the design system at that time and to further develop the design system, especially for this project later on.

Following the logic of Atomic Design, the design system for the product is divided into the categories of atoms, molecules, and organisms. The component system is customized for the project, for my research and thinking on the design systems, I will share more in the case study about Product Design System - a design system I created for my own design workflow with full documentation.

Design System Overview - We created the component library and pattern library to clearly indicate the spec of each element. Since we developed it based on our existing design system, we were able to develop this design system for the product at a high speed


UI Design

With a clear confirmation from the wireframe and flow design, we were able to create the UI design in short man-days.

In the real project, we managed to provide the full UI design and interactive prototype to the client within 2 weeks. Although the project was stopped in the middle of the process, I keep on working on the features with the design team.

Moodboard & Brand Guideline - We create the Moodboard and brand guidelines for clients and internal confirmation on the collective style of the product

File Organization & UI Overview - We have a constant file organization style for the design team's efficiency control and to make sure better internal communication with the development team


Interaction Design (MVP)

The focus of the interaction design for the product is to make sure user will have a smooth workflow to transfer money, interact with the reward, perform the redemption, conducting point conversion and to check their web 3 wallet crypto balance.

We created different user flows for the use case based on the overall UI Design. We generate specific Figma prototype link for each user flow for usability testing. An overall interactive prototype was also created to document the full interactions of the main features.


Features UI Highlights

These are the UI overview of the UX solution to the problems, which cover the following 5 features we selected under the initial project scope:

  • Simple onboarding
  • Money Transfer
  • Reward system
  • Point conversion‍
  • Crypto Wallet

Feature 1: Simple Onboarding

With a simple onboarding flow, user can create their account easily, by understanding the potential obstacles we learnt from the previous project, we integrated the previous onboarding to ensure a smooth KYC process with optimised assistance information.

Login & Account Setup - Simple steps for the user to choose their account type and to state the country of primary residence to create the right account and for the regulation information

Phone Verification - Using OTP to verify the phone and to introduce this common security measure which will be adopted throughout the application for verification

Create Passcode - Creating a passcode for the primary security measure to verify the identity of the user and for confirmation of the future transaction

KYC: Legal Information - The initial part of the KYC process, is to obtain the legal name of the client and the address for future communication information

KYC: Verify Identity - Using the KYC technology of the company, we integrated an easy identity verification with the brand identity customized for the client

KYC: Selfie Verification - With simple selfie verification, we use simple steps to verify the selfie and send the data for the system to process

Feature 2: Funding & Money Transfer

With a simple top up and money transfer flow, we added the UI elements to make the flow to have the capability to handle user’s crypto transfer need when the bank is really to handle crypto transactions in the future.

Top-up account - A simple interface for users to up their account by bank transfer to start using the service

Transfer Money: FIAT - Simplified money transfer interface for users to transfer money in a swift manner

Transfer Money: Crypto - For crypto transfer, involves much more demand on security confirmations and control from the user, it is a relatively more complex control early Web 3 user

Feature 3: Reward System

In the early stage of the product, the team and the client agreed on providing a simple and straightforward reward first. We create the simple flow to list out the mission, reward and redemption options in the new reward section of the application.

Reward shortcut on the homepage - We created a simple shortcut in the homepage for the reward system in the early stage, interface with more gamification was planned to introduce in the later stage of the project

Reward Mission System - The mission center contained different types of missions available for users to earn points by spending on credit cards, and interacting with the brand financial products like saving, insurance, and investment plans

Reward Redemption - Redemption center containing different options and products for users to redeem, Products like discount coupons can be added with the partnership of different business

Feature 4: Point Conversion

In this feature, we allow user to redeem their point by converting the points to crypto currencies, by using a simple conversion UI, the user can perform their first blockchain interaction easily.

Convert Point to Crypto - We try to make the interface simple, a direct 2 ways conversions logic, with information about cryptocurrencies in the bottom for users with less Web 3 knowledge to understand more about crypto

Feature 5: Crypto Wallet

A crypto wallet for user to contain their cryptocurrency gain from point conversion will be provided in the early stage of the project. We also designed an interface for user to create a DeFi wallet as the gateway to interact with DeFi protocols in the future.

My Wallets page - The wallets page containing the FIAT saving & deposit account, Crypto Wallets, and DeFi wallet for a user to centralize all the asset information they hold in the bank.


Usability Testing

Here is the list of the product features we performed usability testing on:

  • The onboarding KYC
  • The Money Transfer Feature with the crypto transfer
  • Reward system UI
  • Point Conversion

We integrated the Figma prototype link of the certain features into Maze and send out the usability test to colleagues and friends that suit our demographic to seek iteration ideas. We also performed testing on the overall interactive prototype using the Figma mobile app for user to interact the prototype in a phone and to observe the user behaviour and interaction.


Design Iteration

I have to determine the iteration first

  • User wants Face ID Feature
  • User preferr


Interactive Prototype

Feel free to interact with the product with the figma prototype


Project Takeaways

The limitation of the project is mainly its partly fictional nature and the fact of suspensions for the real project behind under regulation uncertainty at the time.

On the other hand, the reward system, point conversion, and crypto transfer features are proven feasible in the market. By integrating existing features, conducting testing and research, the result of the project does have value for reference in the future development of FinTech.

The project takeaways can mainly be divided into product design insight from the design process and FinTech UX insight for the possibility of creating a broader Web 3.0 adoption in Virtual Banking with a reward system to increase user engagement and awareness.

From the perspective of Product Design

  • We need to conduct more qualitative research on the innovative product to uncover the user behaviors and mental model when they interact with the traditional products and to translate the funding to apply the assumption of the innovative product.
  • Usability testing on traditional products and product prototype is needed to summarise behaviors pattern to design direction and Design iteration in a different stage of the product design process

From the perspective of FinTech UX

  • Simple onboard (Account + KYC + Funding + Card) is the base benchmark for basic engagement
  • A reward System can be an effective way to increase user interaction and engagement
  • Point Conversion and Lite crypto money transfer are important touch points for the user’s first blockchain interaction
  • With new touch points the feature will be able to Increase user engagement & prepared users and businesses for future Web 3.0 Financing (With a wallet feature for DeFi products)
  • Together with the reward system and point conversion feature, the product has the potential to enhance conversions rate for financial products (Saving + Loan + Insurance + Investment)
  • The concept will have the potential to make the business Web 3.0 ready under a social context of having more clear crypto asset regulations.

Case study content
Click on the links and jump right to the section of the case study
Read about our privacy policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Connect with me

Feel free to drop an inquiry or a message, I would love to understand your problem and let's figure out how to solve problems with product design together!

You can reach me via mikaellimankei@gmail.com
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Contact image