The client for this project was a fintech start-up company. They hired me to design a mobile banking application that would offer competitive features and have great UX. Some of the features were multi-currency support, mobile card management and remote onboarding.
Branding and design have been changed to comply with an NDA.
Project overview
Challenges
- Simplifying a complicated onboarding process
- Building trust with new customers
- Prioritising and highlighting the main features
- Implementing several layers of security
- Leveraging smartphone technology
Solutions
- A 7-step onboarding process that manages customers’ expectations
- Prominent and easy to use Help features
- Robust information architecture and strong visual hierarchy
- Several steps of identity verification and other security features
- Usage of smartphone camera and Face ID technology
Results
- High fidelity prototype that works like the finished product
- Developer notes for key pages
- Detailed style guide to streamline development
Research
I used the “User-centred design” framework to design the product in iterations until user requirements and business needs were met.
During this phase I researched competitors such as Monzo, Revolut, Starling bank and Wise. In regards to users, I analysed user data to understand the context of use. I created user journey maps, user groups and several user personas. Based on this data I outlined user needs and requirements. I also worked closely with stakeholders to understand the business model and business needs.
Low fidelity designs
During this phase I produced diagrams and flow charts to map out the page structure. I also produced sketches and wireframes to work out page layouts and UI elements. I also created interactive prototypes that I presented to stakeholders and performed user testing on.
Information architecture
This diagram illustrates the page hierarchy and how they all fit together.
Sketches
These rough sketches illustrate a concept for the onboarding user flow and they allowed me to produce digital wireframes.
Wireframes
These are wireframes for some of the main pages. I used them to create low fidelity prototypes.
High fidelity designs
During this phase I produced high fidelity designs and prototypes in Adobe XD.
Landing page and registration
The finished landing page has prominent branding and uncluttered design. The registration process is broken down into clear steps to make onboarding as easy as possible.
Account details and identity
I clearly present various currencies for users to select. The app uses the phone camera to verify identity. I have also included clear instructions on how to use it.
Document and success page
Similar to the identity verification screen, the “Add document” page uses the camera to take a photo. The design and instructions are similar to make the process as easy as possible. If identity is verified, users will briefly be shown a success message before being redirected to the account overview page.
Account overview
The default account page shows key information in an easy to digest manner – account balance and overview of expenses. By swiping up, users can view the latest transactions. The main CTA on these pages is the PAY button.
Payment and card pages
I have included all the necessary information on the payment page – available funds, transaction amount, transaction fee and date. The card page allows users to disable the card quickly and all the main management options are available below.
