Personal banking website and iOS/Android app redesign
AGENCY
YouPal.se
INTERFACE TYPE
Web, iOS and Android
Product Designer
ROLE
DATE
2020
STATUS
Launched
JOB TYPE
Office and remote
Why: Project Goals
The main goal of the project was to improve the personal banking web and mobile apps, which hadn't been updated for 8 years. We had to create a new UI-design system, and improve the UX without affecting the current backend.
Who: Target Audience
The bank had a fairly wide client base, although they were predominantly:
– aged 20-60,
– in the middle/upper income bracket,
– those who had completed higher/vocational education.
Clients primarily used the app for:
— checking their balance (45% of respondents marked this action),
— making transfers (19%),
— topping up mobiles (13%),
— paying utility and other bills (11%),
— using other app features (11%).
– aged 20-60,
– in the middle/upper income bracket,
– those who had completed higher/vocational education.
Clients primarily used the app for:
— checking their balance (45% of respondents marked this action),
— making transfers (19%),
— topping up mobiles (13%),
— paying utility and other bills (11%),
— using other app features (11%).
When and Where: the Customer Context
Clients used the mobile banking app on the go for paying utility bills, topping up their mobiles, and paying bills for children's education and other services. For more complex services and transactions, they used the web app on their laptops in the more unrushed settings of their homes or offices.
What: Information Architecture and User Flows
Based on the description of the target audience and the context of how the service was used, we decided to take a mobile-first approach. The service architecture was as follows:
We graphically described all possible scenarios in 217 flows.
Here's an example of the flow for login and registration:
What: UI–design
Using the company's brand book, we developed a fresh design system that preserves the previous web and mobile application designs, and created all the scenarios in Sketch. Here's an example of a Fund Transfer flow:
We implemented 88% of the desktop flows in the mobile applications. The Smart Apps section, which included various calculators, remained uncompleted, since it was shown to be in the high costs/low significance sector based on the Efforts/Impact matrix.
Results
We were able to solve the primary business problem, optimize UX-scenarios, and create a modern UI design for both the web and iOS/Android applications.
