Echo


Master your finances



   Echo is a transparent banking product that utilizes learning and prediction to provide better a service.
   


Echo presentation video

​​
"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 Research and Development of OmniChannel Banking Solutions at Exictos SGPS | Asseco Group




Project details








Integrated team elementary, to research and develop a transparent, context-aware consumer banking solution, under CMU's HCI Professional Master Project, as briefed by Exictos SGPS (our Organization) for its Lusophone Market clients.







My role: User Research Lead and UI/UX Designer (latter was shared role)
Team: Andrew Novotny, Andrew R McHugh, Jae Won Kim

Designed for: Mobile (inspiration on Material Design)
Main tools used: Lookback testing platform, Sketch App, Axure RP8, Marvel App, Adobe CC (InDesign, AfterEffects, Premier, Photoshop), Balsamiq
Timeline: 9 months
​​




Problem and challenge

​​
We set out to understand "money in context",  in which ways people interact with their banks, how they spend their money, how they track their spending, what perceptions about banking and money most influence their decision making, trust and confidence.
Research was long and thorough, we came to understand that many of our users have trouble in trusting banks, in understanding their accounts and its implications, while banks struggle to provide transparent experiences that brings value to users on aspects of empowerment and foresight.
Existing banking apps are opaque, we needed to create a banking application that imbued or design principle: Transparency, Empowerment and Foresight.
​​

As the User Research Lead and UX Designer, I was responsible for leading the research process, build our research materials and tools, selection of what aspects of research insights were proeminent and urgent, design user testing sessions and lead them, and further improve prototypes with  our users' testing input, while developing on a weekly basis, prototypes and group critiques (low-to-med Fi), to ultimately design Echo, our Hi-Fi prototype, and help build Echo's documentation, pseudo-algorithyms and final book.​​



Echo overview


Our final product is Echo, a mobile take on a transparent banking application that gives users clarity into their financial spending and provides users with glimpses into their medium-to-long term finances, by using machine learning and prediction of user's behaviours and customer typologies. 

The mobile experience comprises Echo's three main sections: transactions, goals, and simulator.
Our design principles lets users know what is happening, empowers users with knoledge about their choices and behaviours, and gives them foresight, or predictions, into their future spending patterns and saving potentials. 



From left to right: Transactions, Goals and Simulator

​​
For more detailed information about our research, process and designs, please take a look at our process book  here.   You are free to download a copy.



Research and research process


Capstone projects are divided in two (2) semesters. First semester is dedicated exclusively to research and research interpretation, while the second semester is concept validation, prototyping (low to hight fidelity) and user testing and design/product reiterations.

we spent our first half of the project focused on conducting user research in the Lusophone market (mainly looking outwards to CPLP countries). Our research process included, but not limited: context ecosystem mapping, literature reviews, competitive analysis, Contextual Inquiry, rapid etnography, semi-structured interviews, photo-diary study, and online surveys (deployed in Mozambique and Portugal).

We intended to answer six big questions during our research-intense phase:

- What is context (Money in Context)? 
Guerrilla User Study, Concept Mapping

- What is already known about the banking market? 
Literature Review, Market Study

- What do users already have and use?
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 currently live?
Photo Diary Study, User Study


We investigated what we call Money in Context, wich sums some of the possible touchpoints for both user and bank interactions and opportunities, where money is the unsuspected factor.


Below you can see our Concept map, followed by some of our other research methods




Hover over images to read about other research methodologies.

  1. Managing Director
    Question: - How do users think about money? Research method: Interview One-on-one conversations with retail banking users help us understand their perceptions and thoughts on banking: their desires, goals, frustrations, worries, and how they use money on a daily basis.
  2. Managing Director
    Question: - What do users already have and use? Research method: Survey We created online questionnaires/surveys that probed participants about many different factors of their life, from technology usage, types of accounts, background cultures, income, banking habits, current experiences, and past events, to online activities.
  3. Managing Director
    Question: - How do our users currently live? Research method: Photo-Diary Study Our photo-diary study allows us to glimpse into our participants lives based on given prompts. This study lets us gain another perspective into understanding how money is used in context and perceived by our potential users. This research method was primarily employed to build empathy with our users, and to help us distinguish important customer typologies.
  4. Managing Director
    Question: - What is already known about banking? Research method: Literature Review We gathered and analyzed information from existing research on people's spending habits, technology use, creation of financial services, and contextually-aware systems.
  5. Managing Director
    Question: - What are our competitors doing? Research method: Competitive Analysis We analised 4 different types of competitors: traditional banks, distant banking competitors (services that relate to money but do not operate as a bank), layers over banks (it looks like banks to consumers but they rely on partner banks), and contextually-aware services (not necessarily financial services but products/companies that work with contextual-awareness).




Research insights


After colating all the data collected through reserach, and after building our Affinity Diagram and "Walking the Wall", we started to uncover some emerging patters and insights. These were crucial for us to create our visions and later on, what concepts and strategies will we adopt to create a better context-aware retail banking solution.



Part of our Affinity Diagram, with our Questions, Design Ideas and Breakdowns post-it on it.



Insights

Lack of trust in banks and online merchants
Users strongly distrust banks (as an institution) and their intentions. This results is users taking multiple steps to mislead third party and secure their purchases (especially when it concerns to online purchases). A usual schema that users regularly abide is to combine the use of user set virtual cards (eg. MBnet) with a bank layer such as Paypal. 
This requires dedication and effort from users, leading some to not use bank services online or ask friends to buy stuff online for them, without disclosing their card details.

Well-designed, mobile first
Through our research, we saw that many of the banking industry's apps are lacking a well-designed approach. We also were emphatic with our users from our on-hands competitive analysis of some of the used banking applications. Our reserach suggested that users prize mobile applications in detriment of going to bank branches or call to solve problems or to require new services, while at the same time a mobile application provides users with a stronger "feeling in control of my finances" feeeling, than other traditional methods.

Portugal is a country with a high adoption of smartphones, where Android platforms have the biggest footprint, it will influence us to use Material Design on our application.

High degree of personal control
Many times our users feel powerless. Users make conscious decisions for how they will pay for things, taking control of their money, how and when it is spent. Our u
sers complain that often they have to (or want to) go through multiple steps in order to achieve their goals. This is specially true when they go through their statements, or when they want to cancel a Direct Debit, amang many other examples.
Our users plea for an easier, streamlined approach to what is their banking needs.


  1. Affinity Diagram detail
    Affinity Diagram detail
  2. Cultural Model detail
    Cultural Model detail
  3. Affinity Diagram detail
    Affinity Diagram detail
  4. Card Sorting
    Card Sorting



Insights (cont.)

Banks fail their customers and don't communicate
Banks are not providing services in a way that pleases our users.  Our reserach shows that this is gamble banks are likely to lose. When a displeased customer has problems, they are unlikely to contact the bank about it. Instead, users get frustrated and begin searching for new banks or other options.
This is especially true when banks charge "maintenance fees", without reason or multiple times. The same when the bank changes account conditions unilaterally.
Without adequate communication, users are left on the wondering side of the river, and this leads them to start suspecting and rationalising that, what the bank wants is just to take their money.

Difficulty of access to meaningful banking services: Tracking Expenses and Budgeting
When users want to know where their money is, they track and budget their expenses. Excel and mental-tracking were the most popular forms of estimating budgets. But often doesn't provide the necessary financial awareness that users require for their daily decision making.

Unused saving options
​Often aware of savings options, few users actually have savings accounts or other sort of medium-to-long term investments. In interviews they remark that they “should have an account, but don’t”. Many times this relates to lack of trust on the institution, or lack of clarity and transparency on the offers a bank has at its users disposal.



Product visions


We created a 5-part vision of our solution for a context-aware banking solution. Below you find the 4 ideation concepts that permeat Echo, the fith-part vision (easy ways to save) was made redundant as it is present in many of Echo's designs.


  1. Managing Director
    Anticipate Expenditures Tracking of spending habits and formulate estimates for spending and reocurring expenditures.
  2. Managing Director
    Prioritising Life Goals We thing in terms of goals. As participating members in society, culture and workers, we want to do and achieve milestones in our lives. We want to help users understand and prioritize their spending to what really matters to them.
  3. Managing Director
    Automatic Categorization Categorizing spending is an important step to understand how we spent our money, and provide crucial insight into our habits, sponsoring change to better behaviours.
  4. Managing Director
    Simulator Simulator takes into account your spending, your financial responsibilities, market trends and available solutions to show how better of or worse would you be if you do a specific thing, like buying a house, or leasing a car, or saving for retirement.




Design process ​​

Based off 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 a four week-long design sprints (our fifth part was explored throughout the developement of the others four parts).
With 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 (look) and another for interaction design (feel).


Design process in numbers



Our guiding 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.




Design Sprints

​​As a group, we performed Design Sprints  (methodology used and developed by Google Ventures researchers, as outlined by Jake Knapp, John Zeratsky, and Braden Kowitz in their book Design Sprint) for each vision which included doing complementary research, sketches, storyboarding, prototypes, and user testing. We've done a total of 4 sprints (one for each vision), each lasting 5 days. 

​​The sprint gives teams a shortcut to learning without building and launching.​




"The sprint is a five-day process for answering critical business questions through design, prototyping, and testing ideas with customers. Developed at GV, it’s a “greatest hits” of business strategy, innovation, behavior science, design thinking, and more—packaged into a battle-tested process that any team can use." 

from http://www.gv.com/sprint/





​​
Complementary Research (under Design Sprint methodology)

​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.


  1. Questions/Concerns
    Questions/Concerns
  2. Restate Goals
    Restate Goals
  3. High-Level Service Blueprint
    High-Level Service Blueprint
  4. "How Might We" questions clustered by affinity under open problems/concerns
    "How Might We" questions clustered by affinity under open problems/concerns
  5. Scoped problem
    Scoped problem
  6. Analysis of trends on Interactions, Designs and Information Architecture
    Analysis of trends on Interactions, Designs and Information Architecture
  7. Whiteboard Storyboarding
    Whiteboard Storyboarding
  8. Low-Med wireframes for design critique
    Low-Med wireframes for design critique



Sketches

​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. 


  1. Exploring interactions from other products
    Exploring interactions from other products
  2. Exploring interactions in minute detail
    Exploring interactions in minute detail
  3. Product sketches for team critique
    Product sketches for team critique



Storyboarding

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.


  1. Storyboarding
    Storyboarding
  2. Storyboarding
    Storyboarding
  3. Storyboarding
    Storyboarding



Prototypes

Our next step was to produce mid-fidelity prototypes after completing our storyboards. These would be crucial to validate our concept with real users. We tested our concepts using a several methodologies, among them Think Aloud, card sorting, semi-structured interviews, pre-test survey, and post-test surveys.


We used Axure as our main design tool, and put it into Marvel for our user testing.
Again, these are medium-fidelity prototypes, and you can try them on our 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.

Many of these weekly User Testing sessions would include the testing some of our hyphotesis in a comparative A/B Testing scenario. In which the users would interact with competing approaches to the same problem. One example, among others, could be the test of Relative Sliders  vs Absolute Sliders for user amount input.


  1. User Testing (Card Sorting)
    User Testing (Card Sorting)
  2. User Testing (Think Aloud)
    User Testing (Think Aloud)
  3. User Testing (colleagues recording session using Lookback and Hangouts for live feed)
    User Testing (colleagues recording session using Lookback and Hangouts for live feed)




Prototype iterations


After validating our designs through user testing, we set to work on creating a cohesive product. We have created applications that 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 added others that felt innate to be there, while improving 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 our users had. 

From Low to Medium Fidelity
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. 


  1. From Lo-Fi to Med-Fi
    From Lo-Fi to Med-Fi




ECHO App Designs


Echo, is a transparent mobile banking application which features three main parts: transactions, goals, and simulator. These different applications work together to solve many issues users have with their finances providing them with easy to understand information and solid financial awareness. 

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


Transactions


We designed the Transactions 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. 


  1. Estimated Expenditure and History spending
    Estimated Expenditure and History spending
  2. Merchant History and Transaction Detail
    Merchant History and Transaction Detail
  3. Spending per Category and Estimated Spending
    Spending per Category and Estimated Spending
  4. Transactions and Echo Home
    Transactions and Echo Home




Goals

We created the goals section to aid our users in being able to easily reach their financial goals in life, more than a savings account that hinders user's use of their money in fear of losing their account perks, these work as virtual piggy banks, that store the money, until they reach their goal, or may keep replenishing if the user wants to.
These virtual accounts move money into them on a daily basis. This was tested and reiterated with our users, because if we show them how small the effort is to achieve their goal (in structured input), they are more likely to accept and keep saving for it. Goals gives users a better understanding of the impact of the goal on their finances, by decomposing the saving effort to a daily effort. 

  1. Goal Cards (virtual accounts) for specific goals
    Goal Cards (virtual accounts) for specific goals
  2. Add Goal (some structured input)
    Add Goal (some structured input)
  3. Structured input view
    Structured input view
  4. Card interactions
    Card interactions




Simulator

Many financial situations are complex and do not exist in a vacuum, there are many factors at play. Simulator is designed to empower users with the knowledge they need to understand which financial options are available to them, what implications that may bring in the long run, and which solutions are a best fit for their needs. Simulator has been praised to be an important step, in making the right choice or a regretable mistake.
Simulator allows users to tweak, follow and understand the ever-changing financial environment they live in and how it might affect them. 

  1. Simulator Home (recent searches, and saved "tweaks")
    Simulator Home (recent searches, and saved "tweaks")
  2. Trending and curated questions to simulate
    Trending and curated questions to simulate
  3. Structured "tweaking" of the options results in immediate visualizations and product suggestions
    Structured "tweaking" of the options results in immediate visualizations and product suggestions
  4. Structured "tweaking" of the options results in immediate visualizations and product suggestions
    Structured "tweaking" of the options results in immediate visualizations and product suggestions




Other sections and features

When designing our product, we included additional features that were also important for the final application to include, and at the request and concern of our client, in order to meet all the goals that a banking application should be able to provide, following our design principles of transparency, empowerment and foresight.


  1. Fuzzy search
    Fuzzy search
  2. Category changing
    Category changing
  3. ECHO Onboarding
    ECHO Onboarding
  4. Menu and Profile View
    Menu and Profile View




ECHO interactive prototype

​​
Our final product, Echo, is the climax of eight months of research, visions, designs, prototypes, and iterations in the lusophone market. Through extensive testing, we have ultimate proof that our solution can resolve a real life problem in the lusophone community and brings much needed value to consumer banking users.

We helped our client, EXICTOS from Asseco Group, understand that a more meaningful and personal banking experience culminates in satisfied users, this helps Exicto's clients (retail banks) retain their users/clients while providing a solid growth steping stone with a proven engaging banking touchpoint.
Echo empowers 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. ​

​​
Try our Framer prototype. This protopype focuses on the feel of the application and information architecture, rather than the visual design. We have provided our client with the protopytes (in marvel), which focus more on the look and visual design language rather than the feel.

(It may take a few moments to load, and for best experience install Framer)



Try our Marvel prototype. This protopype focuses on the look of the application. Here you can see some of the screens that are part of Echo's visual language.