Led UX design for HSBC Kinetic banking app based on real-life insights from over 2,000 UK businesses.

Starting Off

Working closely with Business Analysts and other stakeholders, I helped define user stories and requirements. I met regularly with different stakeholders to clarify details and ensure that the user stories could be created within the defined deadlines of the product roadmap. After each user story was clarified, I began designing annotated wireframes showing the navigation, content, and baseline functionality of each screen.

User Story Development

I began by creating comprehensive user stories that captured the specific needs of small business owners. Each story was written from the user's perspective and included acceptance criteria that would guide the development team. This approach ensured that every feature was grounded in real user needs rather than assumptions.

Wireframing and Prototyping

I created detailed wireframes that mapped out the user journey for each key business banking function. These wireframes were then developed into interactive prototypes using InVision, allowing stakeholders to experience the flow and provide feedback before development began.

User Flow Design

I designed comprehensive user flows that detailed every step a business owner would take to complete critical tasks like making payments, viewing cash flow, or managing invoices. These flows were particularly important for complex scenarios like handling payment shortfalls or account reconciliation.

Stakeholder Collaboration

Throughout the design process, I worked closely with business analysts in both London and India to ensure the designs met business requirements while maintaining user focus. Regular presentations to the CTO and other stakeholders helped align the team on the user experience vision.

Iteration and Refinement

The design process involved multiple rounds of iteration based on stakeholder feedback and user testing insights. Each iteration refined the user experience to better serve the needs of small business owners while maintaining the technical feasibility required for a banking application.

High Fidelity Wireframes

When I'm working on a project, one of the first things I do is create high fidelity wireframes. These are essentially mockups of what the page will look like and how it will function. They're basically a visual representation of the user experience.

High fidelity wireframes help to demonstrate how the page will look and the annotations easily explain how the functionality will work. It also saves time when it comes to making changes based on stakeholder requirements or user feedback during testing sessions. Another benefit is that it shortens the time it takes to go from wireframe to UI design.

User Flows

I created user flows which detail step by step screens to illustrate the process the user would take to complete a goal. For instance, in the example I have illustrated below, I show all the screens that are required in the app to be presented to the user in order for them to complete the goal of cancelling a one off payment due to a potential shortfall due to a lack of funds.

This is particularly important as we want to ensure that our users are able to complete their goals in an efficient manner which will result in them using our product more often and thus increasing revenue for the company.

Dedicated Accessibility Team

HSBC had a dedicated accessibility department that worked closely with the UX team to ensure all designs met strict accessibility standards.

Compliance Requirements

All UX designs had to fully comply with WCAG 2.1 AA standards and meet HSBC's internal accessibility guidelines. This included considerations for screen readers, keyboard navigation, colour contrast ratios, and alternative text for all visual elements. Every design decision was reviewed through an accessibility lens.

Design Integration

Accessibility was not an afterthought but was integrated into every stage of the design process. From initial wireframes through to final prototypes, I worked with the accessibility team to ensure that features like cash flow analysis, payment management, and account overview were usable by all customers regardless of their abilities.

Testing and Validation

The accessibility team conducted regular audits and testing sessions using assistive technologies. This included testing with screen readers, voice control software, and other assistive devices to ensure the banking app provided a seamless experience for users with disabilities.

Sign Off

Once the UX wireframes and user journeys had been created, I then presented them using an interactive InVision prototype to the main stakeholders including the CTO. I would explain the thinking behind the UX and address any concerns they may have. Once any amendments were made, I packaged up the UX and handed it over to the UI designer.

Team Work

I cannot underestimate the importance of communicating with other designers, developers, and copywriters throughout the design process.

I've found that working in a team environment makes me a better designer because it forces me to think about other people's needs and perspectives. I also find it very helpful to have other people help me brainstorm ideas for projects.