HSBC Corporate Banking Tracker

Addressing a need within the bank to create an internal website which would allow a holistic overview of the client onboarding process. The interface also needed to highlight within each of the processes, problem areas and relevant contact details. The project ran as a collaboration between senior members of staff and HSBC's Digital Transformation Team.

UX, UI, Data visualisation. Designed on site at HSBC

 

UX Wireframes

The wireframes had been created by existing UX Designers in the team at my arrival, these were perceived within the team as being close to how the final designs would look. My role was to take these designs and align them to the transformation work done by the Digital Transformation Team.
 

Applying design styles

The Corporate Banking styles were un-finished at this point, the themes and typography were applied to the layouts to get an idea of the tracker would look and feel. However at this point it became clear that a tracker approach wasn't fulfilling the requirements of the brief and a new approach was needed. The tracker needed to give an instant impression of the overall status of the process, the design needed to reflect that the process was not linear and the designs needed to be scalable. 

Design solution

Sunburst chart

For each client a card design was created displaying the progress in a sunburst chart. The centre gave the total percentage completed with each section radiating outwards to completion. The traffic light system was retained to highlight if a process was blocked or at risk and each section clicked through into a detailed information page. The chart design was also viewable on mobile devices. 

The charts were then applied back into the thinking for the previous page designs with some additional refinements.