Background
Tandem, the UK digital challenger bank expanded into Hong Kong as it began an international expansion strategy. A challenger bank, or a virtual bank, is defined as a bank that primarily delivers retail banking services through the internet or other electronic channels instead of having physical branches.
​
Our team was assigned to design and develop a new mobile app that supports payments online and around the globe, along with P2P social payment service for Tandem in Hong Kong.
Market research
We conducted serval competitor analysis by features to understand the competitors' strengths and weaknesses and to identify gaps in the marketplace. The features were included Registration, Topup, Cash Reward Scheme, and Member-Get-Member Referral Program.
Wireframe & Design
High-fidelity wireframes were used to discuss with PO and BA. Once we settled with the flow and met all the business requirements, I worked on the UI.
Payments
Payments were the most complex and challenging journey in Tandem HK. There were 2 types of payment we support:
​
1. Tandem friends: P2P payment within the registered users in Tandem HK
2. FPS users: Faster Payment System was the well-known payment system in Hong Kong that linked bank accounts or other digital wallets with email, phone number, FPD identifier, or HKID.
Referral & Statistic
We encourage users to invite their friends by providing cash rewards. An extra reward is given to every 5th referral.
​
Users can track and analyze their financial habits on the Statistic page. The data can be presented in year, month and week with average spending in that period of time.
Component library
Component library was designed to enable a faster and more consistent design workflow. It also helped front-end developers to understand variants and statuses for each component.
Card & packaging design
The main goal of card and packaging design was to present a feeling of prestige to customers. I played around with the brand colors and textures, and came up with multiple options.
​
For the final option, we picked the card design with navy and light blue gradients and the silver holographic T logo in the middle.
Working with teammates
Our team worked closely together via Figma, as they all received access to my design. I used comments to respond to feedback and highlight UI defects for developers.
​
We also used Lokalise for the first time. Lokalise is a powerful platform for localization and translation management. I uploaded the screenshots and texts via Figma for the team in real-time. I could also preview how the design looks in different languages that we supported in Tandem HK.
Results & takeaways
-
Learn a new tool. Before this project, all designers and I in Green Tomato haven't used Figma for the clients' projects. I was the first designer in Design Team to use Figma. I was happy to learn and explore Figma through this project. I also did a presentation to introduce Figma to the design team. Currently, more projects are using Figma over Sketch in Green Tomato.
-
Handle a project alone. It was a great time to grow and practice what I have learned from previous projects and senior UXUI designers.
-
When life gives you lemons, make lemonade! Our app and work in the past 8 months couldn't be launched because the company changed its business strategy. It was sad that we didn't have the chance to get receive feedback from real customers. However, our team stayed positive and moved on with other projects within 1-2 weeks. I was grateful to be part of this team and we designed a t-shirt as a souvenir from this project.
Other project
