Echo

Transparent Consumer Banking in an Opaque Market

We created a transparent consumer banking application that utilizes learning and prediction to provide better service. We spent eight months researching, designing, prototyping, and user testing our app in the Portuguese market. Our client was Exictos, a banking software company. Echo lets you master your finances.

Role
Project Manager, Prototyping Lead, UX Designer
Date
January 2016 to December 2016
While At
M-ITI / Carnegie Mellon University
With
Jae-Won Kim, Andrew Novotny, Joel Rodrigues
Concept video. (1.5min)

For sure this will be a piece of work we are going to introduce into our roadmap of products. It was nice to see the way you understand financial service on channel solutions. We are going to merge this with the research we are doing in-house with machine learning and artificial intelligence. [It] was a pleasure.

– Pedro Camacho, Head of Development Banking Channel Solutions at Exictos

Problem

Exictos, a bank software leader in the Lusophone (Portuguese-speaking) market, approached our team, Elementary, to create a contextually-aware consumer banking experience. Preferably, something that can be highly adaptable to the various users that use Exictos products.

After four months of user and market research, we found that consumer banking applications are opaque, meaning that users don’t really know what is happening. 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 helping their users, banks (often) only provide a list of transactions from which users are supposed to intuit their financial health.

A screenshot of my own opaque banking app from Bank of America. My other and primary bank, Simple, does a better job, but still isn't entirely transparent.

In response to the opaque market and our user research, we created a transparent consumer banking application for the Portuguese market that utilizes learning and prediction to help people understand their finances.

Our work was split over two four month periods: one of research; one of designs, prototypes, and user testing.

Final presentation to the public and our client. (26.5min)

My Role

  • Project Manager: I created the structures and systems that allowed us to work efficiently and effectively. These included thought structures for thinking about and explaining our project, Google Ventures’ Sprint process, and how the team functions (everyone leads one aspect and contributes to the other parts). I facilitated our critiques, leading the team to effective outcomes.

  • Prototyping Lead: I utilized my previous front-end and prototyping experience to build our website, hi-fi Framer prototypes and experiments, and wrote the design suggestions for our machine learning algorithms.

  • UX Designer & Researcher: Each member of the team worked as a UX designer and researcher, finding a balance between user and client satisfaction. Jae-Won Kim leads UX design and Joel Rodrigues leads research.

Early on in our research phase, we created a context ecosystem to remind us of the connections between people and concepts. The key to staying focused with a broad project is structure.

Elementary & Exictos

Joel, Andrew, Andrew (me), and Jae (from left) are Elementary.

Elementary is a group of four master’s students in the Carnegie Mellon University and University of Madeira Master of Human-Computer interaction dual degree program. We are a multi-disciplinary team with backgrounds in the humanities, psychology, and computer science. When working, we each take the lead on one aspect of the project, then collaborate to completion.

Exictos (our client), formerly known as Promosoft, was founded in 1989. They specialize in the production and implementation of core banking software, serving more than 60 banks in Portuguese-speaking countries. Exictos expanded their offerings to include both mobile and online banking software as a layer over their core platform. In 2015, Exictos was acquired by the Polish Asseco group to strengthen its presence in Africa and to open up new opportunities for expansion in South American markets, especially Brazil.

Research Methods

Our research spanned our first four months of work. To guide our investigation into Portuguese consumer banking, we created a series of core questions. Each question lead us to a research method.

  • What is already known about the banking market?
    Literature Review, Market Study
  • What do users already use and have?
    Survey, User Study
  • What are our competitors doing?
    Competitive Analysis, Market Study
  • How do users think about money?
    Interviews, User Study
  • How do our users live?
    Photo Diary Study, User Study

To interpret our data, we created models including a flow model, sequence diagrams, a cultural model, and a competitive analysis grid. We also printed out the photos and captions users created in their photo diaries. Everything went up on our walls so we could be immersed in our research during the later design phase.

Left: Our consolidated flow model, showing the connections between the user and their monetary environment. Right: a user's response to a photo diary question. "This is my mother, someone that I love and I will love until the end of my life."
We took our 549 interview notes and placed them on the wall, grouping notes by their conceptual nearness. after we had groups of between four and nine notes, we create blue notes that describe the group. We then group blue notes under pink notes which describe the blue note groups. Finally, we use green notes to segment our diagram into general categories. Once the grouping is over, we “walk the wall” by placing post its with design ideas, key insights, and questions. These new notes help guide our visioning process and make sure we’re designing based on data.

Research Insights

Concluding our research phase, we compiled a short list of critical insights made from our research data. These are the most relevant insights.

Lack of trust in banks and online merchants

Users strongly distrust banks and their intentions, often taking steps to obfuscate their purchasing habits.

High degree of personal control

Users make conscious decisions for how they will pay for things, taking control of their money use. users often have to 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 “maintenance fees”. Without adequate communication, users wonder what these fees are for and suspect that the banks just want to take their money.

Difficulty tracking expenses and budgeting

When users want to know where their money is going, they track it. But, the tools provided to them by banks are insufficient. our data shows that most users do some form of expense tracking or budgeting. Excel and mental-tracking are the most popular forms of estimating budgets.

Unused savings options

Often aware of savings options, few users have savings accounts or other investments. In interviews they remark that they “should have an account, but don’t”.

Elementary placing our notes from our interviews into our affinity diagram.

A Five Part Vision

In order to create a transparent consumer banking application, we created a five part vision that guided our design work.

Left: prioritizing life goals. Right: easy ways to save.
Left: anticipate expenditures. Right: automatically categorize costs.
Simulate the future and learn from others.

By continually providing value to users, banks are more likely to retain customers who are less likely to get frustrated. We are providing opportunities for customers to truly understand their finances. We are doing so in ways that no popular bank has, setting our client, Exictos, and their clients apart from their competition.

Design Process

Based our research, we understood the user’s core questions: How am I doing? How will I be doing? If something changes, how does that affect me? In our last four months of work, we answered these questions by building Echo.

We explored each part of our five part vision in four week-long design sprints (our fifth part was explored throughout). With the user feedback, we were able to condense what made sense, get rid of what didn’t, and update what needed improvements.

In the time after our sprints, we continuously critiqued our work, iterated on it, and tested with users weekly. At the end, we presented two hi-fi prototypes: one showcasing visual design and another for interaction design.

Principles

Transparency Users have questions about their transactions, groups of transactions, and patterns. We made it easy to answer these questions.

Foresight We give users just enough insight into their future so they can be prepared. These insights are based on the user’s previous actions.

Relation of user to others When you’re doing something for the first time, you don’t know what to expect. We allow users to anonymously learn from each other by showing them how “other users like you” have acted.

This illustration shows an abstraction for how users can be grouped using explicit customer segmentation or a generative machine learning algorithm.

Sprint Process

As the project manager, I implemented the Sprint process as outlined by Jake Knapp, John Zeratsky, and Braden Kowitz. We worked through four week-long sprints which each include complementary research, sketches, a prototype, and user testing. It is a process that uses divergent and convergent thinking, harnessing the strengths of each member of the team. In this phase, each prototype is independent from the others.

Left: On the first day of our sprint we create a goal for users to accomplish. With this, we make a high level service blueprint of how we think our design will work. Right: We critique our thoughts and try to foresee limitations using our four months of research and additional interviews.
Left On our second day, we explore interactions from other products and services. We then go through four sketching exercises that leave us with four specific design directions (one from each member of the team). I show my final sketch here. Right On our third day, we critique our sketches and make storyboard to prepare our prototype.
On the fourth day, we spend all day implementing our designs to the level at which we can answer the questions we set out to answer. Thus far, those questions are largely about concept validation and a bit about usability.
On the fifth and final day of our sprint, we perform think-alouds and interviews with four to five users. Joel, our research lead, performs the study while the rest of us sit in a separate room, watch the study via Google Hangouts, and take notes. We wrap the week up with a document that summarizes our decisions and findings.

Continuous Iteration

After our sprints, we had near-daily group critiques and continued our weekly user testing. Most of this was on our home island, Madeira, but we also spent a week testing in Lisbon.

A tiny sample of our critique boards.

Low & Medium Fidelity Prototypes

Our prototypes were built off of our research, constructed in individual brainstorms, synthesized in a critique, and informed weekly from user feedback sessions.

We built two hi-fi prototypes: one for visuals and one for interactions.

Start with sketches Each prototype started with individual sketches, followed by a critique, and synthesis into a prototype storyboard.
Sprint prototypes These four, independent prototypes came out of our sprints and were each focused on one part of our vision. Our final product had pieces of each of these. For example, Telescope looked at how to help users understand and plan their long-term future – which grew into the simulator section.
Microsprints We spent a couple days iterating over specific sections of the app (e.g. onboarding, adding notes to transactions, creating a coherent information architecture, category structure). Left: Joel's early work on categories. Right: My suggestion for information architecture (which you can interact with).

Framer experiments In addition to our primary work, I also made small experimental interactions in Framer.

Introducing Echo

Our final product, Echo, allows users to master their finances. The information architecture is centered on three pieces: transactions and categories, goals, and a financial simulator. Additionally, we let our users search the system with a fuzzy search (not shown here).

Our logo An echo happens when a noise goes from the creator bounces off something and returns, largely but not entirely unchanged. Our users' actions feed into machine learning algorithms and then are echoed back to them in meaningful ways.

Transactions

I want to feel in control of my finances.

– User interview

Wow. It’s good it shows [your available balance and expected spending], ‘specially if you are struggling to make ends meet.

– User feedback

When a user opens the application, they're greeted with their historical and upcoming transactions, as well as their balance, expected spending, and critical insights.

Understand now 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, but the user doesn't have to input anything. The budget is built automatically from their actions.
Critical insights These flickable cards display a single piece of information for the user (e.g. goal progress, spending habits, bank notifications).
Upcoming transactions To prepare for the next seven days, Echo displays a collapsable list of upcoming transactions based on the user's history.
Automatic categorization To understand spending, users need to know their transactions at multiple levels of representation (i.e. categories). Right: It's also helpful to know the relation of one month to the previous and upcoming months, including months in the future (utilizing machine learning algorithms).
Additional insights Each transaction detail screen has insights about how often the transaction happens and what to expect when it does happen. Here, a grocery transaction at Pingo Doce is shown.

Goals

I want to save for my wedding dress. I’ve always dreamed about it.

– User in our photo diary study

When is this application out for download? Sell it to [my bank,] Millenium!

– User feedback

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 achievable outcomes based on 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.

Types of goals (left) We offer many structured options, but also include a create your own option for other kinds of goals. Minimally structured questions (right) Each goal utilizes minimal input to provide deeper context to the goal (in contrast to existing goal systems such as Simple). Default values are based on the user's actions, other users like them, and market data.
Contextual data You don't always know how much you should save or which options to choose. That's why Echo provides users with contextual data, allowing them to learn anonymously from other users similar to themselves.

Simulator

I want the bank to help me understand my habits and their implications.

– User interview

Great, I like this part! This is good for me because of my house loans, I’m still paying for them.

– User feedback

To explore questions, users swipe through categories. Improved from testing, this design matches users' mental models.

When we think about what might happen to us, we wonder how it will affect our finances. The simulator section allows users to explore these possible futures. Similar to goals, we use minimally structured questions to help users get a meaningful answer without bogging them down with input. We also give them contextual information to inform their decisions. Users may star their entry to save it for future use.

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.
Data-driven expectations 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.

Hi-Fi Prototypes

We delivered two final prototypes, one to show interactions and a second to show visuals.

Colophon

This material was adapted from work my counterparts and I completed for Exictos and the Madeira Interactive Technologies Institute.

The following organizations supported our work financially or otherwise. Thanks to them, we were able to research consumer banking and build Echo.
Next Project

Humane Virtuality

Back to Top