LIN ZHANG
Genie: Mobile First Banking App
Client Name
Bank
Platform
Mobile
Methods
Agile UX, user research, survey & interview, experience mapping, sketching, mid and high-fidelity prototyping, usability testing
Tools
Just in mind, Sketch, InVision, Photoshop, Illustrator
Project Overview
The objective of this project is to deliver a comprehensive Mobile-First Banking experience to target users. The app will provide solutions to the current challenges and limitations of existing mobile banking apps, such as having to go to bank physically to cash out money and having to go through complicated procedures to pay bills and transfer money between persons.
The Challenge
What if you could redesign a bank of the future? What if you started by rethinking banking from a mobile-first mindset? With only a two-sentence problem description given, the challenge of this project was to precisely identify the mobile banking trends of the future, including the available new technologies, and know what features are needed by users.
The Project Plan
To address the challenge and capture a clear design, the team started with a marketing analysis on mobile banking app users, available mobile technologies, and Fintech services. The team also conducted a competitive analysis on Big Five banks in Canada on their market strategy and mobile application customer services.
After the market research, the team gained a basic understanding of mobile banking applications. The project then applied design thinking methodology and a human-centered design process to provide a design solution to fulfill the needs of mobile banking users. In addition, this project utilized parallel design techniques to allow each designer in the team to work independently and, when finished, share concepts with the team to come up with a combined solution. This technique helped generate many different, diverse ideas and ensured that the best ideas from each design were integrated into the final concept.
Our Approach
User Research
In order to provide a design solution that targets mobile banking users and fulfills their needs, we conducts both primary research and secondary research to answer the following questions:
-
What kind of frustrations about using mobile banking apps are existing for primary users?
-
What factors influence users’ decision on going to physical branch when they have mobile banking app?
-
What information about mobile banking services encourages the adoption to the mobile banking apps?
An Affinity diagram was generated by in-depth interview and on-site interview, which was used to identify the experience map and highlight the key points and main categories that participants mentioned in in-depth interviews and on-site interviews.
Experience Map
The experience map will summarize all the experiences your users undergo in your chosen problem space. We highlights the subset of issues our design will address.
The Design Process
The hypotheses and persona
Based on the user research, we identified two major user groups, which are people between 18 and 25 years of age and people between 26 and 33 years of age. Although both these user groups rely on mobile banking apps, they have different goals and expectations from these apps. We summarized these findings into two user personas, and we identified four key design principles for our product.
Key Principles
-
Mobile First Banking - less cash, more digital currency
-
Faster and easier solution to transfer money to others
-
Smart machine learning - content catered to meet user’s needs
-
Respect user’s security and privacy needs - secure authorization using biometric technologies
-
Integrate banking into everyday life -- by adding social and context-aware features
Individual Low Fidelity Prototype and Usability Testing
Task 1: check account balance, see the infographic for the chequing account
Task 2: transfer money to your friend
Task 3: use mobile banking app to make payment in store
Two most problematic features in the prototype and solution for iteration
Combined Low Fidelity Prototype
High Fidelity Prototype - First version
We transferred the low-fidelity into a high-fidelity interactive prototype using the tool Justinmind. We constantly iterated the layout and the workflow while testing the prototype. We also grabbed participants to ask their opinions when we were not sure about some designs.
High Fidelity Prototype - Usability Testing Feedback
We noticed that, on average, participants took a longer time than we expected to complete the following three tasks: check out the account balance on a specific category, make an e-transfer by adding the QR code, and completing a money request for splitting bills. We assumed that the ideal path we designed did not match with the user mental set and participants took a long time to explore and learn how to use the app. Participants also reported that they didn’t like the prototype. Part of the reason was that participants encountered many technical issues when performing tasks and the target area was too small to click. Therefore, we decided to redesign the entire user interface using Sketch and Invision, and, based on all the feedback we got, we worked on iterating and simplifying some of the user flows.
High Fidelity Prototype - iterations
In the new high-fidelity prototype, we incorporated innovative features such as FaceID and AI voice command to the product.
Home page - First version
Home page - Final version
Task: check account balance, see the infographic for the chequing account
First version
Task: split bill with your friends - First version
Final version
Task: split bill with your friends - Final version
Task: use mobile banking app to make payment in store
New feature: Voice command
Mock-ups
Final Prototype Demo
Final Prototype - Download Pdf
Project Poster
Lesson Learned
-
Identify user needs by conducting user research with survey, in-depth interview, and on-site interview techniques
-
Using Experience Map as a tool to visualize the results of user research
-
Sketching and High fidelity prototype
-
Effectively communication with team mate to meet project requirement