Connecting people and money

Mariano Capezzani
11 min readApr 19, 2018

--

Heard about HSBC Connected Money? This is the story of how it all began.

A beautiful idea

Late 2014 I joined HSBC with the ambition to build a best-in-class Personal Financial Management experience. I believed banks sat on heaps of information but failed to provide derived value back to customers. I dreamed of reimagining this experience, taking ideas and principles already common in other industries and in the most popular and successful digital experiences. I proposed we approached the problem with a practical mentality, focusing on a few simple but powerful features and the notion of continuous improvement.

I was compelled by a strong product vision: I believed every customer deserved a digital financial advisor that would help them achieve their life goals through improved financial habits and clever use of financial products. (I’ve blogged about this topic here, and about building great products here.) This would completely map to my personal life ambition of enriching people’s lives through breakthrough technology and amazing digital experiences.

But this was not just driven by personal beliefs. The industry had initiated a tectonic shift by the hands of smaller, more agile players in the Fintech space, bringing to life increasingly simplified but beautifully crafted and value-adding experiences in personal finance. Mint had been incumbent for a while, but Simple, Digit, Level, Penny, Robinhood, Acorns, Monzo were starting to appear. Millennials were naturally drawn to these tools. The Open Banking and PSD2 regulation in UK was also looming, and it was imperative that we provided a strategic response and found ways to avoid becoming a “dummy bank”, custodians of people’s money while other players extracted value from the chain and acquired the millennial age groups. We needed to convey a message of innovation and preparedness for the brave new world that was to come.

The HSBC Digital team was in its early days, so no product teams were set up yet. No devs, no designers, no architects. They would be hired by the thousands later, but for now I was a one-man orchestra. I did power-point the hell out of these concepts for a long while, with limited results.

By late 2015, though I had been contributing actively to help shape HSBC’s nascent digital organisation (I must have interviewed 300 people), I reflected on the lack of progress and results of this beloved project of mine and, with a gentle nudge from my boss (who is an incredible person and professional and deserves a few posts himself), I decided to take action.

Since I’d been a developer for as long as I can remember, I started working on some full-stack coding and after 2 months I had built a fully working prototype that boasted much of the features and integrations that we were looking to put in front of customers for validation, such as account aggregation, transaction data enrichment, spend analysis, budgeting, all wrapped in a slick and intuitive iOS mobile app. I called it Moneywise.

Having a working prototype made all the difference. Something to show people. I got increased visibility, buy-in and most importantly, budget to hire some people. In mid 2016, I hired a top designer and a couple of developers to begin improving the prototype, and in early 2017 I hired the rest of the 20-strong team to build a more robust product. The prototype I had initiated a year earlier was in need of a major re-architecture and user experience updates. And this is where the challenge lied.

Our intention was to build a user experience that presented potentially complex features in a natural, intuitive way. We wanted to surface information and insights related to account balances, cashflow, spending summaries across categories, financial goals, and money saved against those goals, in a simple, digestible way. An experience customers could engage with in 30-second periods while app-switching from Twitter to News to Uber, but that would still deliver more value than current banking apps. We wanted engagement, stickiness, great ratings, great reviews. To give customers a reason to come back daily, even multiple times per day. We were looking for a way to deliver personalized insights using design patters that were common and successful outside of financial services. We wanted to hit key metrics in activation, retention and referral. We wanted to blow our customers minds.

And we did!

Manufacturing dreams

When I had finally hired a core product team, we set to build a full-stack solution (db, REST API, native iOS app, CI/CD pipes, 3rd party adapters) using mainly off-the-shelf components (AWS, mongoDB, Mixpanel, etc.) to deliver on the following key features:

  • accounts balances and transactions from any UK bank, not just HSBC
  • unified transaction history with enriched data (categories, merchants) across all accounts
  • instant search using keywords, compounded filters
  • spending insights and tracking
  • offline mode!

The remaining top level features, including Safe Balance (a prediction of your balance after you’ve paid your bills), Goals, Budgeting, Pots, Scenario Forecasting and Savings Automation would be developed after the initial set was validated in front of real customers.

During the design phase, we spent weeks doing research, looking into other apps that were successful in delivering complex information in an efficient and understandable way. After passionate discussions with my design team, we decided to center our app experience and design language around two main principles: cards and chat.

The “card” concept, inspired by the Google Now app, proved in principle to be a powerful artifact to present a summary, or nugget, of information that could be quickly read, but that also had the ability be tapped-through into a detailed view. We envisioned an interface composed of 5 main tabs — You, Discover, Track, Plan, Save. They practically spelled out our product vision: “You discover your spending patterns, keep track of them, plan your life goals, and start to save towards those goals”.

Each tab presenting different types of “cards” plus additional dependent visual components. The You tab would present such cards like “Money You Have”, “Money You Owe”, “Predicted Balance”, and a list of accounts. The Track tab would present cards such as “Groceries Spend”, “Amazon Spend”, “Coffee Spend”. The Plan tab would present “Money Saved to Date”, “Buy a Tesla Goal”, and so on. Each card would be tappable for more details, and they would have visual similar structure.

Cards were very effective for our purposes. They would summarize information in a predictable, non-tedious, ease to read way. They had the correct affordance to drive users to tap on them, swipe them, reorder them to their convenience. They could be presented in particular order based on priority or as instructed by a recommendation engine. They stacked up well on small, medium and large screen sizes. The summary of the card could be made a sentence and sent via a push notification, or presented as a widget on the home screen. Card faces would “tick-tock” from one type of content to another. “Mini-charts” would animate in.

Examples of “card” design.

However, cards alone were not enough. When Steve Jobs first introduced the Mac in 1984, he wanted it to “talk” to the audience so they would develop an emotional connection to an object otherwise daunting and unfamiliar.

We thought this was a great idea. So our app had to “talk” to our customers. We wanted to bridge the gap of unfamiliar, unsympathetic “bank speak”. We wanted to present an experience that felt personal, intimate. The best possible affordance we could find for someone communicating directly to the user was… chat bubbles. So we introduced the concept of a “chatty” interface throughout the app. For example: each time the app was opened, the You tab would present an animation that would first slide-in a few chat bubbles saying “Hello” and “This is an overview of your finance” and then slide the cards up from the bottom of the screen. The chat bubbles would even present animated “placeholder dots” as if someone was typing, and animate in from the left.

Examples of “chatty” interface.

It felt like the app was talking to the users, explaining what the content was, making the experience self-explanatory. Preliminary user testing validated this assumption, and it also helped prove that it would be extremely useful as an on-boarding tool. The on-boarding of the app would be like a chat session, and every new feature was presented using a walk-through tutorial assisted by the chatty interface. The well-known visual metaphor of someone chatting with users was efficient and engaging, and worked much better than traditional walkthroughs or coach-marks. We even had some fun introducing easter eggs: the app would wish customers Merry Christmas or happy Bonfire Night with lots of emojis.

Rising up

After intense months of developing the first staff pilot version, we launched in late 2016 to an internal audience of 200 staff members. We called it MoneyUp. The results were incredible. We hit our targets on all key metrics:

- Activation: at least 80% of customers that downloaded the app continued to link accounts across 16 different UK banks, to an average of 5 accounts each. In total, 73% of the users invited to the pilot would become active users, where typically this number is lower than 50%.

- Retention: users opened the app on average 1.5 times per day, or 40 times per month, which is about 8 times more than the regular HSBC core banking app. They used Search at least once per day, which was surprising considering most had never used search on a bank app before, as we could gather from the interviews. They also used other key features like re-categorization to a large extent, though after a few weeks our server “remembered” these mappings and users were no longer required to do it manually.

- Referral: customers absolutely loved the app. Even though we received a lot of feedback about issues while linking accounts, and some transactions categories being incorrect, the majority expressed deep surprise and satisfaction that HSBC could deliver such a world-class, “slick” and useful app. They would consider not using their other bank apps anymore, save for transfers, in favor of this app. This app delivered. One user even told us he felt “a rush of dopamine when using the app”. I was thereafter convinced we were in the business of digital dopamine.

We used this feedback to continually improve upon this pilot and incrementally build more streamlined versions. We mended some mistaken assumptions, refined the design, clarified some features using better tutorials, provided additional assurances on the security and privacy of the personal information we collected, and iterated on the messages we pushed to customers on screen and via automated notifications.

This product, that had begun as a humble PoC, proved to be one of the hottest products in Digital. It became a priority initiative in HSBC UK. And it solved real problems. “How much money do I have, across all my accounts?”. “Where is my money going?”. “Am I spending too much?”. “What can I do to save more?” The app helped customers pull together their complete financial situation and raised awareness about financial habits that would otherwise pass unnoticed. Customers would finally discover what they really spent in Groceries or Going Out, typically a figure twice as high as perceived. Customers would not have to login into 4 different apps to get their latest, up to the hour, updated balances and transactions. Customers could search across potentially years of transactional history across all their accounts, with just a few taps, with instantaneous results, even if they were not connected to the internet!

The app was a success in front of users. It was also an internal success and vindication of a way of working, a way of thinking about Product that was aspirational to HSBC.

We achieved this by not settling and compromising to the limitations imposed by traditional approaches to building products. We addressed, with passion but with subject matter expertise, every challenge and blocker that was laid in front of us. We convinced IT Security we could keep our customers information safe while using 3rd party vendors. We were the first team to use certificate pinning on our Swift 3 iOS app! We engaged with multiple internal stakeholders in order to get acceptance to use external partners like Yodlee, mongoDB and AWS. We were the first team to push for native AWS services, and not just Lambdas but EC2s as well, and we were the first to enable devops-friendly tooling like Packer and Terraform to ramp up our infrastructure. We built a future-proved, scalable, tiered solution, with different primitives and APIs responsible for specific functions like authentication, integration with aggregation partner, data refresh, data processing and insight generation, notification queues, etc. We built the bank’s first true PSD2 compliant “data feed” that would expose account and transactional information from authenticated users through a REST API. We used a new design language never before used by the bank, challenging the “webby” and outdated standards towards a more modern, native, platform-specific language that would resonate with customers. We operated in a flat team structure of highly talented designers and engineers, with agile ceremonies and 1 week sprints. We proved that we could operate like a startup within a large corporation, with lean practices but full rigor in analysis and compliance to HSBC standards. We repeatedly, stubbornly challenged the status quo almost every step of the way, by even proposing something as preposterous as account aggregation when account aggregation was a taboo, and successfully pulled a 180 on top management mindset about it, thus demonstrating that all problems have a solution that will satisfy the individual and the group, in a very much Nash equilibrium kind of way.

It was a relentless emotional rollercoaster ride that paid off big time.

Eventually this staff pilot would evolve into a better pilot in mid July 2017, with an updated design language, and ultimately to a customer launch in October 2017, almost 3 years, to the day, when I presented this idea in the first place.

This product is now live on the App Store by the name Connected Money. Further details here.

I’m forever thriller to have been part of it, to have put my mind and heart into it for 3 years of my life, taking it from an idea to a live product in front of customers.

Seems like a long time to invest into one product, but it probably would have not happened without my stubborn attitude and sheer amount of hours put into it. I was fortunate to have worked with a group of amazing people, all of whom, by virtue of their talent and dedication, made this a reality.

In the end, nothing beats building a great product people love.

Update 19–4–19: Well, what do you know? Exciting news in this space, soon will be able to share something…

Update 30–10–19: Aaaand we’re live! Balance after Bills has just been released on the HSBC UK app. It’s been a long time coming…

--

--