HSBC Kinetic

Building and enabling a design team for success

My Involvement: Design Direction, Team structure, Ways of working and definition of done,

The team

The most important part of any design team is the people. Getting the right talent, keeping them, enabling them, supporting them.

Getting the right people in

Since the very beginning it was very important to me that we make a distinction between UX and UI roles. The current job description described the role as a UX/UI designer. As these two roles are very different in nature, I started by refining the Job Description. With the help of our copyrighter we created a job description that avoids the buzz words, and helps to communicate what team the person reading it will join.

Next, again with the help of our copyrighter, I refined the email template we send to the candidates we want to join. It clearly states the location, time, who is interviewing, what the steps are, and what to expect so they prepare themselves.

For the successful candidate, I pushed to make the process as smooth as it can be given the restrictions that come with big organisations. The goal was to have a buddy system, a dedicated person they can spend the day with to ask questions and help them. A laptop loaded with the appropriate software and licences to use from day one, and access to systems.

Getting the right structure

Due to the ambition of the Kinetic app, we have dedicated teams working on different parts of it. Consequently, we need to ensure consistency across, not only visual but also in terms of entry points, component use, etc. To achieve this, the model proposed was the “elevator model”. This ensures the UX and UI designers are part of the team that builds the features but also part of the wider design team. As head of design I had regular workshops with the team and daily chats to answer any questions and give a steer. The UX designers are responsible for specific journeys and flows, and the UI designers would help with the creation of new components.

An accessibility expert is always available to ensure we design inclusively.

I also helped to form the research team who would add the user in the heart of the process.

The process

To ensure we are following the right steps for an app that will be used by our customers, it goes without saying that we followed the UCD process. To ensure the process is part of our DNA and not just something the design team is doing in isolation, I adapted it to include the roles within the Kinetic team which will need to be part of it. Each step of the process is trackable and the results of the research actionable and logged in Jira as opposed to be limited to a PDF presentation.

Getting the right design

Before I joined, the roadmap items were mainly derived from the feature teams and leadership, which works but to a certain extent. We needed to ensure we add and help to prioritise roadmap items from our users. This is where user research fit in. Our service designers found and interviewed a range of our customer base and we analysed the data to inform the roadmap items with user requirements.

Once a roadmap item is identified, the UX designer responsible would create the flows and start looking into the information architecture.

Our workshop and weekly catchups would ensure the team is aware of the design direction so we dress any concerns and ensure consistency.

Getting the design right

After the ideation and a few design ideas I wanted to establish a usability testing practise. We used a well know platform to find users and did all the preparation and testing either at the office, or remotely, during the COVID-19 lockdown.

The standards

Toolkit

We ensured that we have a toolkit comprehensive enough to use for components that needed to be repeated to maintain consistency across the app. When a new component was identified, our UX designer would put together a list of pages it would be used in, then when ready and tested, the visual designer would refine it and the developer would be aware of it.

Patterns

I wanted to ensure that there isn’t any confusion in how we use specific components and so I created a confluence page with the components and patters of Kinetic. The template was similar to https://ui-patterns.com . This was to also help the BA and Dev team when needing to put together simpler screens.

Copy

Our copywriter put together a comprehensive and straightforward list of tone of voice guidelines in PDF form which we then transferred to confluence to help link back to when necessary.

Part of the copy work was the creation of the VoiceOver text for accessibility

Global guidelines

Even though we enjoy a certain degree of flexibility being a sub-brand, as part of a greater organisation we had to comply with the global HSBC guidelines to stay true to the global brand.

The next steps

I am proud of the work my team has done on Kinetic, we are doing are absolute best to ensure our customers enjoy their banking experience.

For more information please see here: https://www.hsbckinetic.co.uk

You can download Kinetic here.