HSBC global mobile app - niceandneat.digital

HSBC global mobile app

On May 2019, our Connected Money cross-functional scrum teams were integrated with the HSBC Mobile Global pods. In a strategic move to bring the Connected Money experience into the main HSBC mobile global app, we set out to integrate some of our most popular features. What this meant, from a design perspective, was that we had to redesign our features to merge into an entirely new design world, a new design language and system.

Role:

Feature design lead

Responsibilities:

UX/UI design

Design System

Interactive prototyping

DESIGN QA

Experience design

From an experience perspective, we had to ensure our already trialled & tested experiences were brought uninterrupted to the same customers. The available re-build time enabled us to add some extra enhancements. Additionally, merging our UK-only experiences with the global app, created a set of additional specifications we had to comply with. From accessibility, to multi-language support readiness, we had a long check list of new UX bits to make sure are correct before going live.Nonetheless, we successfully kept the core experiences, sourcing the appropriate patterns and components from the inherit system, while contributing to the system with new elements.

Interface design

Moving on to visual design, our work started with the redesign of all our components on screen. Our goal was to match with the existing design ecosystem, without breaking the experience. This proved to be a very technical-intensive task, given the very short deadline and the new governance process we had to follow, as we were now part of the wider organisation. At the same time, HSBC's design system was going through an overhaul redesign, with many changes that added extra complexity on the creation of any new components and patterns.

Balance After Bills

Balance After Bills is the first step to allow customers to manage their upcoming bills from within the mobile app. The feature allows them to view their scheduled payments and the designed experience enables users to see a timeline of these payments in a visually rich and descriptive way. Our design was merged with the existing design system where we successfully introduced new components. Shortly after launch, hundreds of thousands of customers had enabled and used the feature.

Round-Ups

This is another feature originating from the Connected Money app. Any transaction that happens with the customer's debit card, is rounded-up to the nearest pound, and the money is saved in their account of choice. The customer can pause or resume their saving and see the benefit of the feature in the included history graph and round-up transaction list. The experience will be integrated with the mobile app soon.

Insight messaging stack

Insight messaging

We introduced personal account messaging for the UK market, as a pilot before rolling this out in a global scale. These insights on spending behaviour are meant to provide customers with personal, helpful, timely information. Our team created a smart prioritisation system of these inbound messages and we designed a way to present multiple messages on any account.