As part of my work at HSBC, I took part in multiple Northstar projects where I'd explore the future of how customers would interact with mobile banking. Many of the concepts presented below have made their way into production after further testing and validation.
I was often tasked to produce designs and prototypes from stakeholders so we could visualise how various ideas would translate into reality within our app. I would create dynamic prototypes (with variables and conditions) so that can be tested as if they were the real product.
Project Length
2018-2020
Team
Mobile X / Smart Channels
Platform
Native iOS & Android
As part of the ideation process, I would often run workshops with stakeholders and fellow designers to imagine how some of these ideas would translate into UI.
Myself and my colleagues would draw how certain "cards" may appear within the app, everyone would draw out their own visualisation of an idea and we would group these on a wall.
Many future ideas that get implemented into the real world application would initially go through our Northstar process. The example below illustrates how we came up with different ways to alert users about certain events on their accounts (overdue bills, spend alerts, upcoming bills etc)
The new HSBC accounts screens were also taken through the Northstar project before making its way into production. I created information architecture diagrams for all of HSBCs account types before producing designs for them, this would help myself and stakeholders understand what were the differing types of actions a user could take across the many different account types. An example of 2 account types is below.
The designs were created in Sketch and aided with the help of After Effects and ProtoPie. The Northstar prototypes generally stayed branding compliant but would also challenge branding standards if they impeded on a better user experience.
I explored how we could make our onboarding experiences more visually appealing by adding looping animations to them.
A prototype for a card-based feed was explored. The idea was to educate users more on how they spend, thus giving them more control over their finances. Each card displayed different items such as their latest spending habits, stocks or local currency rates or shared savings pots.
Our cross sell tiles had HSBC adverts added to them.
Many of HSBC's current payment journeys were not as fast as competitors. We, however, faced severe challenges compared to competitors as HSBC operates in many markets with varying degrees of regulation around payments. I built a solution that can scale across different account types, payment methods, and markets.
I also explored using a support bot to answer questions and or provide natural language search across the app. One major problem we faced was that customer service would often be inundated with calls, and thus, I attempted to explore how we can help alleviate some of these stresses that the CS team faced.
As part of the conceptual work I did, some of the ideas were eventually pushed towards production after further testing and validation, including the new accounts screen that will roll out to HSBC banking apps across the world in late 2020.
I redesigned the move money screen which will help customers pay one another faster and easier than ever before. This will role out to HSBC customers in late 2020.
As HSBC had different account types that used different payment networks, adding a new payee became a little convoluted, I created new interaction methods to make this process much smoother.
Previously, HSBC used simple loading spinners. Using skeleton loaders allowed us to give the illusion that the app was loading faster than it actually was.
