HSBC Kinetic – B2B Mobile App

HSBC Kinetic is a Mobile App used by thousands of B2B customers.

Oversaw the Transaction History, Self-Service and Payments streams, informing product requirements, planning, and strategy while managing the visual design team and coordinating with cross-functional teams to tackle technical challenges.

Problem

HSBC were building a new banking product aimed at the Small Business sector and the idea being users would be able to self serve completely online within the App and be able to conduct their daily business banking activities without having to contact HSBC customer services or go in branch.

Solution

Worked inconjuction with the Business Analyst and Product Manager to sketch out the journeys and record them on JIRA/Confluence. Built out journeys using a Lean UX and as this was a Mobile app I used state design approach to show the complete end to end process. Creating comprehensive designs/journeys so that users are able to view and manage/self serve their Business banking account activities such as view recent transactions, replace a card or freeze a card and make payments among other journeys. These features needed to be ready for a Beta launch.

Working with

Product Manager

Design Manager

Designer

Technical Architect

Marketing

Risk

Legal

Business Analyst

Developer

Platforms

Mobile App

Roles and Responsibilities

App architecture, navigation and design

Developing for a Mobile app differs from websites and involves designing a lot of states as it has a more interactive experience with the ability to tap into gestures as well as device specific features such as Face ID or Location data. Therefore, we took the approach to design screens and journeys into one. Having JIRA and Confluence crafting and refining user stories for the development team.

Service Blueprint

I created this service blueprint based upon the requirements workshops and planning sessions we had with the Product Manager and learnings from the customer research around how users Make a Payment

User journeys with designs

From this we created deep dive journeys designing each state and ensuring all bases were covered to support the user journey.

One-off immediate payment

This is an end to end journey focussing on fulfilling a One-off immediate payment use case.

Activate your card

This is an end to end journey focussing on fulfilling a self service Activate Your Card use case.

Lab user testing

We used lab testing which was conducted in house by SapientNitro and we created prototypes for specific use cases. In the example below we tested whether users understand the notion of showing a card on screen and whether they identified if this was a tappable feature. From the findings we found this was not obvious therefore we introduced a menu item allowing you to access the self service features such as Stolen Card.

Handover to development

Working in an agile fashion we used JIRA to product and refine user stories so that Developers were accurately able to create and develop the App screens and journeys.

Designing for accessibility

We also, had regular feedback with regards to accessibility by a third party.

My Project Deliverables Output

Initially I was hired on a 3 month contract, which then was extended by another 6 months before IR35 ruling.

Oversaw the Transaction History, Self-Service and Payments streams, informing product requirements, planning, and strategy while managing the visual design team and coordinating with cross-functional teams to tackle technical challenges.

  • Phase 1
    • Due to staff turnover the design files were inconsistent and unorganised. This was causing issues with development and also, with the Product team. I ensured that all designs were merged into one Sketch file and spent time ensuring that I had a complete picture of what was being delivered.
    • I reviewed this with the Product and Development teams to ensure we had agreement on what we were delivering but also, that it was accurate and identifying the overall priorities in line with the Project Roadmap.
  • Phase 2
    • Delivering an MVP solution which included Bank balance, Transaction History, Categorising Transactions and Self Service area for journeys such as Report a card as lost or stolen.
    • Delivering a MVP solution for Payments which included Add a Payee, Search a Payee, Make a Payment
  • Phase 3
    • Confirmation of Payee, Make an International Payment.