Background

If you’re fortunate enough to have at least £3 million in the bank, HSBC Private Banking becomes available to you. Private Banking clients don’t have a simple cash figure in their bank account. Their wealth is held in investments split across a potentially complex structure of accounts, portfolios, holdings and liabilities.

I was brought in as a hybrid UX/UI designer to help deliver a unified product experience across responsive web and native iOS and Android apps. We built a global product to help clients understand their wealth and investment performance. It gives Private Banking clients summary information at a glance, visualises their exposure by asset allocation, and allows them to drill down into the finest details of investments.

Approach

Differentiating business requirements from user needs

Unfortunately, the opportunity for direct user research was limited. Therefore, my approach was to speak with the relationship managers and desk heads. They are a great source of knowledge, because they hear from clients on a daily basis and know the financial products inside out.

To push the product forward, I worked closely with the product team to concept ideas and pitch to the front office. I presented both sketches and high fidelity mockups to get engagement and spark conversation. Ideally, I would have run ideation workshops with the front office to engage them and make the most of their knowledge.

Although less glamorous, technical and business requirements were important for a robust and compliant product and presented a real UX challenge. I made consideration for gaps in data sources, regional variations, edge cases, empty states, and accessibility. Understanding the limitations and designing for all scenarios was important to ensure a complete experience for all users.

Design and development was Agile and all requirements were in the Behaviour-Driven Development (BDD) format.

Hybrid UX/UI design for fast delivery

As a hybrid UX/UI designer, I was able to reduce lead time on features by completing the UX and UI in one pass. Adhering to brand guidelines, I could create UI mockups for features as quickly as a sole UX designer could create wires. Providing UX documentation in high fidelity UI design saved time for handover from UX to UI, as well as the time needed to create two sets of documentation.

Working closely with remote developers

There were separate development teams for the web and native app builds. I adapted to suit their preferred design handover, using either InVision or sharing Sketch files. A lot of the team struggled with a language barrier when communicating with the remote app development team. I built a good rapport over Slack and overcame communication issues with clear documentation – good practice for any designer-developer relationship.

Deliverables

A few examples of features and enhancements that I delivered are included below.

Concepting: Contribution

Contribution is a concept used to show how much an account or portfolio has affected overall performance. I suggested using a horizontal stacked bar chart to visualise contribution and included the breakdown with details. If this was a complex concept for most users, it could be beneficial to show the definition on the screen by default, rather than hiding it behind an info icon. These designs provided a good start to the conversation and could be refined with user testing.

UX design: Liabilities

Liabilities are like loans. Some clients use liabilities to fund investments and make a net profit. I designed liabilities to integrate with the existing information architecture of the web and mobile apps.

UI design: Asset allocation

Asset allocation shows how investments are split across categories and helps the client to understand their various exposures. Early user research had shown that users expected to see this information visualised in a pie chart. I explored alternative visualisations, but none proved to be robust enough to cater for the range of possible scenarios. The donut chart benefited from being robust and drawing on users’ existing associations.

While the asset allocation feature was an opportunity to push the visuals of the app, I designed it to be in-keeping with the brand guidelines.

Transition animations

The user can toggle into asset allocation at any point. I designed a transition to help the user understand they are switching modes but maintain the context of the same total.

Interactions: Extra long holding names

I had to design some interadtions to maintain a smooth UX for non-ideal scenarios. For example, a holding name would usually be around 30 characters, but could be up to 1024. I would have liked the app to interpret the string of data in the holding name, and present it in a more understandable format for the user, but this was deemed not possible by the technical assessment.

I gave careful consideration about how users might try to interact with the title to reveal the full text and ensure an intuitive response for all users. The interaction to handle this scenario isn’t designed to be eye-catching, it’s designed to be used without a second thought from the user, which for this scenario makes it equally important.

Atomic design system and handover

Before I joined, the team was struggling to maintain an efficient design system. Symbols and order in Sketch files hand spiralled out of control. I created an atomic design system to organise design assets. This helped to speed up delivery of UI designs and maintain consistency.

I moved the design assets into libraries so that multiple designers could access the files. I set up libraries at the brand level, as well as product level so that consistent elements could be shared across platforms.

I created a ‘site map’ for the web app and app, which greatly supported my handover to the internal project team. The screens of the site maps were labelled with a number, which matched the page structure of my UI master sketch file.

As a consultant, it is important to me that at the end of a project, the next designer can continue at speed with a strong foundation. I am glad to say the handover to the internal team went very well and I left with confidence that they could continue the project effectively.