How I approached designing a wealth management dashboard for the world’s biggest wealth manager
TLDR: A one-stop-shop of real-time data from all sources, instantly accessed, no more hunting. A single-source-of-truth of unifying insights speak volumes: 56% iPad growth in just 1.5 years and 100,000 meetings powered by the app this year.
Understanding best practices and defining design principles
Hard Skills:
Design Process
Research & Theory
Visual Design
Soft Skills:
Strategic Thinking
Problem-Solving
Critical Thinking
Within a strictly regulated wealth management environment my clients use dashboards on other applications every day. As the world’s largest wealth manager, it has a complete commitment to digital banking and to streamlining efficiencies to what was rapidly becoming the hero application within a suite of financial products.
The Challenge
Catering to affluent clients requires exclusive online services like advice, quotes and investment strategies, delivered digitally. Internal systems application empower both the Customer Consultant Associates* and Customer Consultant* (CCA’s/CC’s), the two principal user groups to deliver professional and competitive service. Assembling these precious customer meetings takes time, accessing strictly private data to provide a complete, competitive and professional service requires a tailored and specialised tool – of which the Customer Meeting App* is the bank’s primary channel.
What are the driving factors for developing a dashboard?
Imagine client meetings where crucial information is instantly accessible, scattered data unified, and time spent hunting replaced by strategic insights. This is the potentially transformative power of the Customer Meeting App’s dashboard, built around three “must-have” features:
- Single point of access for disparate data
Instead of opening various applications, interfaces, or online databases, the CCA’s/CC’s have a real-time dashboard. - Broad overview with drill down capabilities
A dashboard is a dynamic collection of account numbers, text, and graphical elements — and this combination is both vertical as well as horizontal. Calendars and photos within meetings can be immediately accessed right there from the dashboard. - Easier, faster, sign source of truth
An information dashboard takes the best of several worlds — numbers, statues, text information, meeting status colours and ‘Edit’ functionality throughout — and places them intelligently for quick consumption.
Achieving speed, clarity, and brand harmony
Dashboard design best practices?
Users do drive requirements, but in business there is another controlling factor;
Funding
A driving factor from a stakeholder perspective was for UX to re-imagine the Customer Meeting web experience as they were not appropriately integrated – especially from the ‘Create a Customer Meeting’ perspective and more particularly ‘Adding account numbers’. There was, crucially, funding to sync these activities.
What are the dashboard design best practices?
What are the dashboard design best practices?
Defining generic design principles (other than the obvious – Gestalt, breaking long processes into short tasks, avoiding scroll bars, etc) need to be applied to our design without being too restrictive. There are 3 dashboard design principles that are drove decisions and are considered best practice:
1. Five-second insight
Funding was a principal driver for this project. Empowering a more intuitive process to adding customer data (account numbers, quote links, investment profile links, and upcoming future services) at a glance was key to the baseline UX.
2. Inverted pyramid layout
The inverted triangle displays the most significant insights on the top, trends in the middle, and granular details towards the bottom.
3. Brand champion and ensure DS achievability
As a lone gun, championing user-centred design principles that both upheld the organisation’s values and maintained consistency across applications was a challenge. Without a dedicated UX stakeholder, negotiating the implementation of new global design guidelines within budget and development constraints proved particularly demanding.
Reimagining Client Meetings; Key takeouts
To reiterate the design process, I went through the following three steps:
- Step 1 – Start with the user needs
The foundation of successful design. Streamlining the preparation of a meeting, and principally future proofing the ‘Create a Meeting’ process with a scalable UI that can seamlessly integrate new data repositories, ensuring long-term flexibility. - Step 2 – Segment the experience in to ‘zones’
The on-screen real estate delivers a quick look experience prioritising top from bottom. - Step 3 – Test and Challenge through Prototyping
Visualising up to 12 users’ journeys leads to better understanding and smoother development. Developers also need reassurance that this would be a boxed development and will not impact other working code.
Driving Discovery UX within a challenging Agile environment
Early sketches are crucial: They reveal the potential of a dashboard, emphasising hierarchy through top-down, left-to-right user scanning patterns. Grouping key data, utilising white space, and enabling light touch drill-down are key drivers.
Scope and hierarchy: Initial sketches focus on what’s important, pushing a hierarchical arrangement that guides the user’s eye. Data is prioritised with glance-access’ to preview Meeting Name at the top, followed by Last Modified and owner information.
Chain of command flow: Expanding on the ‘Mini’ concept, this ‘Maxi’ Dashboard version offers the full experience. Enabling the CCA’s/CC’s to very quickly assess top level meeting status down to Privacy Setting, customer ID photos, and Mode of Contact.
Sketching a prioritise and tailored experience
Focusing on what is in scope, these initial sketches start to show the power of a dashboard. Pushing the hierarchical arrangement, the user’s eyes organically concentrate from top to bottom, left to right. We have the data, so embracing the Meeting Name and grouping the Last Modified through to the meeting owner data is logical.
Estimation sketches
In Agile, pre-estimation is an important ceremony before sprinting. An efficient method of conveying your UI and demonstrating your sketching ability is by quickly mapping out the flow, the user interactions and where the final CTAs might be by sketching on the back of a cigarette packet, Alec Issigonis-style.
Realising a final solution
A conceptual dashboard with multiple layers.
The final solution solved both the scalability problem, providing easy access to account numbers, the ability to add other account numbers, visibility on the meeting date and time, and the meeting status and who is the meeting organiser, all there front-of-stall for the user. Complete transparency on meeting detail, including location, meeting language an whether the meeting has typed notes and freehand notes plus special features including packaging the meeting contents ready to send the customer and associating the meeting with a customer ID.
An additional full suite of functionality displayed within the new dashboard with improved readability through the use of white space and with a scale to future-proof 2020 growth
One key factor in the development (and acceptance) of this new radical design was ‘achievability’. Funding in a key developmental constraint with financial services, without it a project will not leave the ground – designing with business realities is a key skill UX professionals need to be aware of.
Drilling down on the details of account number association
Providing more detail using a hierarchical system
And the results speak for themselves
The bank is present in more than 40 countries with approximately half of their 190 offices are in western Europe where half of the Customer Meeting App meetings are delivered on the iPad. This is a phenomenal growth from 8% to 56% worldwide in the last 1.5 years.
This equates to approximately 100,000 meetings prepared and delivered via the application in this year. A true revolution!
*Names changed to protect the innocent