Creating a transparent consumer banking application that utilizes learning and prediction to provide a better user experience.

Role: UI/UX Design Lead
Project Type: MHCI Capstone Project
Teammates: Andrew R McHugh, Andrew Novotny, Joel Rodrigues
Platform: Mobile
Tools: Sketch, Axure, Marvel, Photoshop, InDesign, AfterEffects
Timeline: 2 semesters



Exictos, a bank software leader in the Lusophone (Portuguese-speaking) market, approached our team, Elementary, to create a contextually-aware consumer banking experience

After months of user and market research, we found that many of the problems users had with their banks stem from banks appearing to be opaque with their users. By opaque, we mean that it is hard for users to truly understand what the bank is doing with their money, as well as what is happening with their money. This leads to users feeling like banks are using them to meet their own (sometimes greedy) goals, and not benefiting the user, which leads them to search for new banks if they have issues with their current bank.

When people look at their finances, they are asking three questions:

  1. How am I doing?
  2. How will I be doing?
  3. If I do this (get a new job, move to a new city, travel), what will happen?

Instead of banks being more transparent, banks usually just provide a list of transactions from which users are supposed to determine their financial status on their own. We resolved to solve this issue of opaqueness by designing a transparent solution that gives users insight into understanding their finances and maintaining the feeling of control over their finances. 


Our final solution is called Echo, a mobile banking application that gives users clarity into their financial activity and actions. The application features three main sections: transactions, goals, and simulator. We took several design principles into consideration when coming up with our final solution: being a transparent app (letting users know what is happening), empowering users with the choices they make, and giving foresight, or predictions, into their future spending patterns. 

For more detailed information about our process, please take a look at our process book here.


 Left to right: Transactions, Goals, Simulator

Left to right: Transactions, Goals, Simulator


Our Research Process

The first half of our project focused on conducting user research in the Portuguese market. Our research process included: context ecosystem mapping, literature review, competitive analysis, interviews, photo-diary study, and survey. Including these research methods, we also did a lot of field observations. There were six questions that we wanted to answer by the end of the semester through these research methods:

*** For more detailed information about our research process, please click here. I go through all the research methods and give insights on the results we found. ***


Research Insights

After all the note-taking and consolidations with the affinity diagram and models, we compiled a short list of critical insights made from our research data. These are the most relevant insights.

Lack of Trust in Banks
Users strongly distrust banks and their intentions. Some distrust of private banks come from a recent financial crisis in the Portuguese market. Users value their privacy from their banking institution and do not want their bank examining every purchase they make, unless the bank is using that data to benefit them.

I want to feel in control of my finances.
— User Interview

Lack of Personal Control
When interacting with banks, users often feel they hold little to no power over their own money, thinking that banks seem to benefit from their users without providing much benefit in return.

Lack of Simplistic Workflows
Users have (or choose) to go through multiple steps in order to achieve their goals. One user described getting bank statements a month late, then manually entering this data into Excel for budgeting.

 Montepio: a popular bank in Portugal

Montepio: a popular bank in Portugal


Banks Fail Their Customers
Banks are not providing services in a way that pleases their users. For example, users do not like seeing bank advertisements while interacting with their bank’s website. 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 “maintenance fees”.

If you ask me how much I spent per month, I honestly can’t tell you.
— User Interview

Difficulty Tracking Expenses & Budgeting
A lot of people don't really track their expenses, but some people do. However, the tools provided to them by banks to track expenses are insufficient, leading some users to create their own form of expense tracking or budgeting.

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.

Lack of Well-Designed Smartphone Apps
Increasingly, the Portuguese community is using smartphones, and while the older generations are often more hesitant to try new technologies and financial services than their younger counterparts, their adoption is on the rise too. Banking applications in the Portuguese environment are often lackluster in their design and fail to implement modern day technologies in an effective way.



Before officially moving on to our design process, we came up with three design principles to guide our design philosophy In order to reduce the opacity of banks and increase their user’s insight:

  • Transparency
  • Empowerment
  • Foresight

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.



We expanded upon our principles by exploring different visions and research to focus our efforts in providing our users with a solution that can successfully answer to their needs. We created several visions that addressed the different goals our users had:

  • Prioritization of life goals
  • Anticipate costs
  • Automatically categorize spending
  • Simulate the future and learn from others
life goals.png

Prioritization of Life Goals

Storing money long term in a bank involves confusing agreements and contracts. Banks rarely advise users how to help them achieve their goals in life. We envisioned a future where banks could more easily help users save for the goals they cared about in life like a new car, travel funds, and retirement.


anticipate expenditures.png

Anticipate Costs

Many payments occur on a regular or semi-regular basis. With today’s advanced algorithms and machine learning predictions, it is possible to give users estimates of their future spending events, giving them a better understanding of their financial status.


automatic categorization.png

Automatically Categorize Spending

Many payments occur electronically now. We are able to use these tracking numbers to help users see where, and on what, they spend their money on. Giving users the insight into their spending habits can let them see patterns that they otherwise would not be able to see.


future simulation.png

Simulate the Future and Learn from Others

Income, as well as spending habits change as users make large, one time purchases. We envisioned ways we could use data from a user’s spending history to help guide users to an accurate visualization of complex financial actions, letting users simulate which options would best fit into the context of their life.


Our Design Process

With our visions, we started our second (and final) semester shifting to our design and prototype phase. As the UI/UX Design Lead, it was my primary responsibility to ensure that our semester is going smoothly. Responsibilities included helping to lead design sessions, giving design tasks to other team members, making design decisions, and creating prototypes.  


To explores these visions, we used a methodology called the design sprint, which involved us spending a week per vision. We conducted a total of 4 sprints (one for each vision), each lasting 5 days. In the time after our sprints, we continuously critiqued our work, iterated on it, and tested with users weekly. 

At the end of our semester, our design process included:

  • 4 final visions
  • 4 design sprints
  • 12 medium-fidelity prototypes
  • 32 user tests
  • 44 internal critiques

Sprint Process 

We implemented the Sprint process as outlined by Jake Knapp, John Zeratsky, and Braden Kowitz. The design sprints involved a week of doing different types of research and design methodology each day. These methods included:

  • Researching
  • Sketching
  • Storyboarding
  • Prototyping
  • User testing

Complementary Research:
The first part of our sprint was to create a goal for users to accomplish. We also came up with a lot of questions pertaining to our goal. With this, we created a high-level service blueprint of how our design would work.

After our research, we explored interactions by looking at other products and services for inspiration. With this, we create low-fidelity wireframes and sketches for that particular vision. 

After the sketches, we critiqued each individual sketches that we created and decided which ones to keep and continue exploring. With this, we made our storyboard and initial wireframes to prepare for our mid-fidelity prototypes.

Our next step was to produce mid-fidelity prototypes after completing our storyboards. As the design lead, I was in charge of most of these wireframes, but also gave some of my responsibilities with the other teammates. We used Axure as our main design tool, and put it into Marvel for our user testing. Again, these are medium-fidelity prototypes.

Click on the images below to see the marvel prototype. 


User Testing: 
Finally, we finished off our weekly sprints by user testing. We aimed for 5 users per sprint. Our research lead was in charge of conducting the think-aloud session, and the rest of the team listened from a separate room to discuss the feedback after. With this session, we gained incredible insights and design ideas on how to better improve our designs. Overall, users were happy and satisfied with the direction of our app and more than half said they would use this app.


After validating our designs, we set to work on creating a cohesive product. Applications should be designed so that they feel like they all work to provide a complete picture. Through continuous iterations, critiques, and user testing sessions we removed several aspects of our designs that felt out of place and improved clarity and functionality of the application. As a result of this long iterative cycle, we were able to create a solution well-fitted to solving the problems users had. From our design sprints, we brought together our low fidelity prototypes to a combined medium-fidelity prototype. With lots of user feedback and many internal critiques, we were able to successfully create our final high-fidelity prototype. 

Low-Fidelity Prototype
We started from low fidelity prototypes that was created during our design sprint process.

Medium-Fidelity Prototype
This phase included combining all our low fidelity wireframes to one working prototype. This phase included determining our final look and feel of the app.

High-Fidelity Prototype
We determined the final colors and fonts from our medium fidelity wireframes and kept iterating to eventually get to our final high fidelity prototype.



Starting from paper and pen, we had internal critiques from the beginning all the way to the end. Our prototypes were built off of our research, constructed in individual brainstorms, synthesized in a critique, and informed weekly from user feedback sessions.



Our solution, 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. 

For more detailed information about our process and screens, take a look at our process book here.

MAIN Transactions

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. Also, 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 where their money is spent. 

Screen Shot 2017-10-12 at 3.41.09 PM.png
I can see if I’m doing better or worse than last year. This is powerful information.”
— User Testing Interview, regarding the line graph visualization

To give transparency into users purchases, we give users visualizations of previous spendings, the frequency and average purchase range at a location through the use of machine learning. We created a system to allow users to add personal notes to individual transactions as well.

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 where their money is spent.


We created the goals section to aid our users in being able to easily reach their financial goals in life. We do this by creating virtual accounts that the money moves into on a daily basis. How much is saved daily is shown on a daily basis, which gives users a better understanding of the impact of the goal on their finances. 

I want to save for my wedding dress. I’ve always dreamed about it.
— User Interview
Screen Shot 2017-10-13 at 9.40.14 AM.png
This is like paying for something by installments. I would do this!
— User Test

To add a new goal, we created a simple and structured work flow to help users easily be able to start a goal. When first creating a goal, users select 1 of 7 predefined goal categories (paying off loans, vehicle, travel, emergency, retirement, taxes, and moving). Each of these categories contain different questions that best help users in determining how much their total goal savings should be.

Once users select a goal that they want to achieve, they are led to a page with a structured input so that users can get a clear sense of the factors that influence the achievement of their goal. The simplified workflow makes goals feel more achievable and users are more enthusiastic to start their goals.



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. 

I want the bank to help me understand my habits and its implications.
— User Interview
Screen Shot 2017-10-13 at 2.26.12 PM.png
I like how it lets me change things around while it keeps everything updated to my preferences.
— User Tester
 Users swipe through various categories. We heavily considered all categories and questions. Improved from testing, this design matches users' mental models.

Users swipe through various categories. We heavily considered all categories and questions. Improved from testing, this design matches users' mental models.

Users want to clearly see the impact of different factors as they edited the simulator. We created each simulation questions with a structured input system that helps users understand which of the factors play an important part in the result of their simulation. As users edit and manipulate the input information, they get accurate, real-time data and feedback letting them figure out which options are best for them without any risk.


other features

When designing our product, we included additional features that were also important for the final application to include to meet all the goals that a banking application should be able to provide. 

Screen Shot 2017-10-13 at 3.48.05 PM.png



Our final product is the culmination of eight months of research, visions, designs, prototypes, and iterations in the Portuguese market. Through extensive testing, we have hard evidence that our solution solves a very real 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 resolved 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. These designs will drastically improve the way users interact with their bank. 

For more detailed information about our process, please take a look at our process book here.