Mobile
Banking
App design
Client
UPF Barcelona
Involment
UI designer
UX designer
Skills used
Sketching
Interface design
Prototyping
Wireframing
Testing techniques
Tools used
Illustrator
InVision Studio
Date
2016-2017
Client
UPF Barcelona
Involment
UI designer – UX designer
Skills used
Sketching – Interaction design
Prototyping – Wireframing
Tools used
Illustrator
Date
2016-2017
Context
The mobile app “Your BANK” was one of the main projects I did during my graduate degree in Ux/Ui design. It consisted of the design of specific functionalities for a bank application. The starting point was a short briefing that described the functionality of the application, the main target audience, and the context of use. In this framework, the features to be designed were:
- Verify account and card balances.
- Customize the payment of balances
- Transfer money between personal or third-party accounts.
The main objectives of the project were:
- Use of research techniques to obtain information (such as user interviews, heuristic analysis/usability assessment, surveys, etc.)
- Analysis of the information through the creation of a customer journey and an information architecture map.
- Creation of low and high-fidelity wireframes for possible solutions
- Conduct a user test to validate the hypothesis and the design proposal
- Creation of high-fidelity specs
Research
One of the main challenges I faced was my unfamiliarity with mobile banking applications. My old bank didn’t have any at the time, so it was essential for me to analyze the competition and familiarize myself with the product.
In a way, this was an advantage, as it was easier for me to get an idea of the pain points that regular users have with these apps in their daily use.
By running usability tests on each of them, I obtained the necessary information to be able to interview users.
Due to time constraints, designing an online survey was the best option. I included quantity and quality questions to validate my findings and discover new aspects to improve. For this, I used an online platform provided by the university.
Information analysis
To qualify and evaluate the information collected, I applied the following techniques:
- Creating User Personas by combining the survey results and the given information
- Building a Customer Journey to see more clearly where the possible flows’ pain points were
After doing this, I came up with the following issues:
- Information retention during the process
- Lengthy forms that required unnecessary data
- Visual information overload (too many points of attention at the same time)
- Uncertainty about the length of the process
- Too many steps to achieve the objective
With this in mind, my main goal was to make the flows easier, less overwhelming, and simple.
Sketches and low fidelity wireframes
Home | Card details
Design solution
My first move was to create a draft architecture map for the application. It was necessary to include the actions not needed for the project in order to assign the correct hierarchy to each component.
Afterwards, I continued with designing low-fidelity wireframes for each functionality. This allowed me to explore different approaches before creating the final specifications to be tested.
Wireframe representation
Card balance payment
Validation
For this part of the project, it was mandatory to perform a user test for the validation porpuses. At that time I had to travel for work, so I designed a remote test.
This test consisted of a prototype that could be controlled remotely and an online chat platform that allowed to record each session. As a mediator, I provide users with different tasks to perform. I measure the time they spend performing every action and ask them some questions to understand how they felt and perceived the new design.
With the feedback obtained, I fine-tuned the design proposal and created the final specifications.
Conclusions
This project allowed me to understand and put into practice all the theory and concepts that I learned during my studies. It was a nice challenge to interact with real users and validate in real life a design proposal. It also made it clear that having a deep understanding of the users and their objectives is vital to arrive at the best design solution.