A mobile banking application
Timeline: 7 Months
My Roles: Lead of Human Factors Design, UX Design, Visual Design, UX Research
Team: 4 Designers, Client - Head of Engineering at Exictos
Tools: Sketch, Axure, Framer, Marvel, Photoshop, Illustrator, After Effects, InDesign
Our client, Exictos, tasked us with creating a contextually-aware consumer banking product. Through research, we found that many of users' problems with banks stem from banks being opaque, or not giving their users insight into is happening with their money inside the bank. This opaqueness forms a lack of trust in banks and creates more skepticism when dealing with their bank.
Our final solution is a mobile banking application that gives users clarity into their financial activity and actions. The application features three main sections: transactions, goals, and simulator. Transactions gives users insight into their spending habits in the past, present, and future by utilizing machine learning. Goals help users save for their financial and life goals by taking into account their spending habits. Simulator gives users power to understand complex financial scenarios such as moving between cities, or the cost of having children and how that would effect their finances. As the content strategy and human factors design lead, my job was to ensure that our application created value and was easy for our users to understand.
You can find comprehensive details about the research and design process by looking at our process book here.
Understanding Our Market:
Exictos, a banking software leader in the Lusophone (Portuguese-speaking) countries, asked our team to create a contextually-aware consumer banking experience. Exictos valued a solution that could be easily adapted to the many different types of markets and users they serve. In order to guide our research, we created six core questions that we answered using a variety of research methodologies.
What is already known about the banking market?
Literature Review & Market Study
What are our competitors doing?
How do our users currently live?
Photo Diary Study
What do users think about money?
Interviews & User Study
What do users already use and have?
Survey & User Study
How do we define Context?
After consolidating our affinity diagram and models, we compiled a short list of critical insights made from our research data. These are the most relevant insights. For a full list of the research methods and insights, please check out the process book here.
Lack of trust in banks and online merchants
Users strongly distrust banks and their intentions, often taking steps to obfuscate their purchasing habits, especially online purchases.
Well-designed, mobile first
More than half of the Portuguese community use a mobile banking application, and much of the banking industry lacks a well-designed mobile application.
lack of simple workflows
Users make conscious decisions for how they will pay for things, taking control of their money use. Users often have, or choose to go through multiple steps in order to achieve their goals.
Banks fail their customers
Banks are not providing services in a way that pleases their users. When customers have problems, they are unlikely to contact the bank about it. Instead, users get frustrated and begin looking for new banks. This is especially true when banks charge unknown “maintenance fees”. Without adequate communication, users wonder what these fees are for and suspect that banks just want to take their money.
Difficulty of banking services
While many users don't track their expenses, many users do as well. However, the tools banks provide to track their expenses are not sufficient. This leads to many users using Excel, pen-and-paper, or mental-tracking to track their expenses as well as estimating their budgets.
Unused savings options
Often aware of savings options, few users have a savings accounts or other investments. Many say they “should have an account, but don’t”. Banks are not making their savings accounts accessible enough to new users.
To lay the groundwork of our design, we created three design principles. These principles held us to our mission, to reduce the opacity of banks and increase their users' insight.
Our solution provides users with clear and detailed information of both the banks’ and the user’s financial behaviours and decisions, letting the user stay informed about the status of their money at all times.
We provide users with the power to achieve their life goals as well as being able to access knowledge that would otherwise be complex and hard to solve. We give users the power to take complex actions and be able to understand them easily.
Users should be able to easily understand the implications of their financial behavior and choices. We give users the ability to manipulate different factors in order to find out which financial options best help them accomplish their goals in life.
Forming Our Vision:
By expanding upon our principles, we compiled a four part vision that empowers users to truly understand their finances.
Automatically categorizing costs greatly simplifies the work customers have to do to understand their finances. When users make purchases, they shouldn’t have to wait for a bank statement or try to read lines of transactions nor should they have to create their own spreadsheets.
Simulate the Future
Users should be able to know what will happen to their finances if they take certain actions in the future. This gives users the context needed to understand complex financial questions and make the decisions that best suit their needs.
By anticipating expenditures users can keep track of personal spending habits. Using spending data, the app can show patterns users might miss. For example, if a user eats out for lunch every day, their banking app could show them upcoming expected lunch transactions.
By explicitly outlining goals, banks and their customers can work together to meet the user's end goals. Through this process, banks become more of a partner to users, rather than something that just holds money.
Bringing the Visions to Life:
As the Human Factors Design Lead, it was my responsibility to help guide design sessions, give feedback and advice to other team members, make design decisions, and create prototypes. Over the course of the design process we conducted:
- 4 design sprints
- 12 medium-fidelity prototypes
- 32 user tests
- 44 internal critiques
With our visions, we started designing and building prototypes utilizing design sprints. Each of these sprints involved a week of doing different types of research and design methodology each day. These methods included performing Complementary Research, Sketching, Storyboarding, Prototyping, and User Testing. For full details on the sprint methodology and our design process please look at the process book here.
From our storyboards, we built a gray-scaled mid-fidelity prototype for each design sprint. We implement the prototypes in a way that allows us to answer the questions we came up with on the first day of the sprint.
These are our prototypes in the order we created them in, click on an image to see the prototype.
Forming a cohesive product:
After validating our designs, we set to work on creating a cohesive product. We laid out the information architecture of how the application and built a prototype that included the combined elements of our previous work. Through continuous iterations, critiques, and user testing we modified and improved our designs and increased clarity and functionality of the application. As a result of this long iterative cycle, we were able to create a solution well-fit to solving the problems users had.
Our product, Echo, is a transparent mobile banking application which features three main parts: transactions, goals, and simulator. These different applications work together to solve the many issues users have with their finances providing them with easy to understand information.
If you would like to view comprehensive details about Echo, please look at our process book here.
We designed the transaction to give users a clear understanding of their spending habits and patterns. To be able to truly understand their transaction history, we created a way to let users focus in on a single transaction’s insights while also being able to focus on the ability to see their total spendings categorized. By categorizing transactions, we are able to give users an informative, cohesive picture of their spending history. We take the information we gained from categorizing and display it in ways that helps users truly understand how their money is spent.
We give users a clear and prominent representation of the user's available balance. The user can also see their expected spending for the month. This acts as a budgeting system, without the user having to input anything.
These flickable cards display information that are relevant to the user, such as goal progress, and updates on their spending habits. Additionally, bank products and plans that help users achieve their goals or improve their spending habits are advertised here, benefiting both the user and the bank.
By utilizing machine learning, we allow users to see a list of upcoming transactions based upon their financial history.
To understand their spending patterns, users need to see their transactions at multiple levels of representation (i.e. categories). It's also helpful to know the relation of one month to the previous and upcoming months by utilizing machine learning algorithms.
We created the goals section to help our users to be able to easily reach their financial goals in life. Goals act as savings buckets, meaning that users can save towards different objectives such as a new vehicle, a trip, or paying off a loan. Goals are flexible and can be paused, money can be transferred in and out, and goals can be continuous. Perhaps most importantly goals create outcomes that feel achievable based on the user's existing mental models.
Money virtually and automatically transfers between the user’s main account and goal account to keep a distinction between allocated and unallocated funds. Their money is automatically balanced between a current/checking account and a high interest savings account based on the user’s habits.
Minimally Structured questions
By grouping together different types of goals that are similar allows us to control for a variety of factors to insure that user's reach their goal. Additionally, these goal categories allow us to create a minimal amount of structured questions to provide deeper context to the goal. The default values are based on the user's habits, users like them, and market data.
Users don't always know how much you should save or which options to choose. That's why Echo provides users with anonymous contextual data from other users similar to themselves to allow them to make informed financial choices.
Goals that users already accomplished show the title and how much they saved. By showing goals that the app had previously helped users accomplish, users felt that the app was helping them and were motivated to keep saving.
Many financial situations are complex and do not exist in a vacuum. Simulator is designed to empower users with the knowledge they need to understand which financial options are available to them, and which ones best fit their needs. Simulator allows users to follow and understand the ever-changing financial environment they live in and how it might affect them.
Similar to goals, we use minimally structured questions to help users get a meaningful answer without bogging them down with input. Some simulators can be found on the web and others can only be accessed when sitting down with a banker. Echo democratizes financial simulation by empowering users.
Long term planning
Each simulator question opens a page where the user can play with inputs to that question, automatically updating the visualization and answer at the top of the page. Between the text response and the visual, users begin to understand how their answers to the input questions change their overall outcome.
Like the goals section, each input question informs the user of how other users like them have acted.
User action focused representation
To keep the user's focus and the visual representation of the page in sync, we collapse the header and shrink the visualization when the user is inputing information. A flick of the finger down expands the header and visualization.
search, profile, and onboarding:
When designing our product we included additional features that were important that the final application needed to meet all the goals a banking application should be able to help accomplish. I took the initiative to create a fuzzy search system, helping users find what they're looking effectively and efficiently. Fuzzy search enables users to search in more human contexts such as "all food purchases last month." This gives users powerful accessibility options to find specific transactions or activity that they may be looking for.
Our final product is the culmination of eight months of research, visions, designs, prototypes, and iterations in the Portuguese market. Through extensive testing, we found that our solution solves a serious problem in the Portuguese community and brings value to users. By bringing more value to users, this in turn helps Exictos’ clients retain their users as well as grow their base.
By focusing on transparency, we resolve many of the issues users have with their banks, returning trust to the bank-client relationship. We empower users to truly understand their financial actions in the past, present, and future. Echo drastically improves the way users interact with their bank.
If you would like to view comprehensive details about our process, please look at our process book here or below.