Skip to content
Log InSign up
;

The design process behind Nutmeg’s new dashboard

We hope you enjoy this article from our archives. As investment, pension and tax rules change a lot over time, the information in this post may not be current, but we hope you still find it interesting.

The Nutmeg team

1 June 2021|6 min

Dashboard

Our goal at Nutmeg is to provide a powerful and yet straightforward investment experience for all our clients. This means that we constantly evaluate what we offer clients with a view to making improvements. Our approach to constantly look at ways of enhancing the key features and services we offer has led us to review and reinvent the client dashboard. Here, we will look at the design process we followed to launch what we believe is a more powerful, intuitive and, most importantly, valuable tool for our clients.

For an investor at Nutmeg, the primary entry point on desktop to view your account is a single screen that we call the ‘Dashboard’. This is both an information-rich environment, as well as the main view to manage your investment portfolio.

The current dashboard has been in operation for several years now and has had many additional features and investment options added over this time. We recently took the opportunity to look at the current version of the dashboard as a whole, and identify potential improvements.

Image of new Nutmeg dashboard

 Figure 1 – Final dashboard design of phase 1. All data is fictional.

 

Why have we redesigned our dashboard?

We started this project because our data analytics showed us that many of our clients would only log in to check their main portfolio performance and not interact with other features of the dashboard. From conversations with our clients, we learned that there was a key opportunity to increase user engagement.

As a first step, we wanted to learn how the Nutmeg dashboard fits into a client’s overall financial world, and how we could improve the user’s experience. What’s missing for them? What do we do well? These questions were asked as part of a contextual enquiry study – meaning that we talked to and observed our clients as they used their dashboards in locations they would typically use Nutmeg, (sitting alongside them in environments such as their homes or public places like cafés.)

 

What key insights influenced our development?

Through these conversations we arrived at some key insights to focus our design-thinking.

  • The dashboard should offer reassurance – even during dips in the financial markets – and be straightforward to understand.
  • Where users have clear goals, their portfolio value should sit within this context for them.
  • Alerts and notifications should be clear and actionable.
  • Guidance must feel impartial, timely and relevant.
  • Non-portfolio information on the dashboard such as product messages, the blog and Nutmail (Nutmeg secure messaging) can be overlooked.
  • Portfolio returns and overall value should be presented in the context of long-term investments, and be easily understood.

 

In addition to the client insights, we looked at dashboard design best practices (Few, 2006; Firican, 2018; Tufte, 1983), carried out competitor research, identified user-needs and conducted an internal audit of our current dashboard. This project, led by research, strategic thinking, and strong collaboration from different teams across Nutmeg was thorough, to say the least. Steered by a total of 37 usability and comprehension client tests, the project evolved by constantly iterating on the knowledge we gained from testing.

The first design we created was a proof-of-concept –  reusing our existing React user interface (UI) components from our internal design system (Nutkit). These minimal UI changes illustrated how much the logic and hierarchy of information could improve the user’s experience, by having, for example, a clear main portfolio value and performance at the top of the page. We learned from research that the most important information to our clients was their portfolio value and performance, so we made sure that these were the most prominent items to be seen on log-in.

 

Portfolio summary for new Nutmeg dashboard

Figure 2 – Proof-of-concept design illustrating how few changes in the user’s interface could improve the user’s experience. 

Reorganising content and removing the ‘noise’ (extraneous content and design) from a page, impacts how simple and easy to understand a page can be. After this initial exploration, the wireframing process took place through which we explored how we could address the needs expressed by our clients in a way that was clear, intuitive and natural. Furthermore, the designs had to be flexible enough to accommodate future features and content.  

We started with the basic layout. Most (European language-based) eye-tracking studies reveal that users’ attention leans 80% towards the left half of the screen (Fessenden, 2018), so content in these favoured areas has a higher probability of being noticed. Knowing this, we wanted to keep the left side of the screen for the primary information, such as main portfolio value and performance; and the right side for secondary information. By using this simple layout logic, we helped users to intuitively understand the hierarchy of the page and easily scan relevant information – the main content would be reserved for data regarding the client’s portfolio and the side area for help and guidance. 

Image showing different layout schematic options

Figure 3 – Layout with sidebar skeleton.

 

One of the biggest transformations we worked on was switching our navigation from horizontal to vertical. This change was based on the principles of usability (Laubheimer, 2021). We increased findability by moving content into categories in a logical way, to improve the information’s ‘scent’ – how strong and relevant the information is to the user based on how and where it is placed on the website (Budiu, 2020). These categories were clarified for users and given terms that can be easily recognised. For example, the category “Payments” has everything related to payments in or out of your account – “Pay in now”, “Monthly contributions”, “Withdrawals”. We will also be introducing navigation links soon to supporting content such as our blog and support articles.

Following Fessenden’s (2018) findings on how most users focus on the left half of the screen, we placed the navigation menu in this priority area. This allowed users to scan the navigation much more efficiently than they would with a vertical navigation design(Laubheimer, 2021) – as well as instilling a sense of inherent control for the user. We also added a feature to allow users to collapse and expand the navigation, so they can select how they wish to view their portfolio information.

Moreover, this vertical-left navigation allowed more room for future developments  without a major redesign, and it is easily translated into mobile, under a ‘hamburger’ menu (Laubheimer, 2021).

Image showing differnt header and sidebar design options

Figure 4 – Navigation blueprint used between User Experience and Front-End teams’ discussions

To enable future opportunities with as-yet unknown features, the designs evolved into a modular pattern. This allowed us to have more flexibility and control over the distribution of the elements on the page and over each component’s responsiveness on different devices. All of these will also play a major role in scalability as we roll out new features, such as the ‘Tax-free allowance’ panel. If a new type of ISA were to be introduced the design would still work and we could move panels up or down, left or right, or even remove them from this area – depending on how useful and relevant this information is to the user. This modular approach gives us the flexibility to always show the most relevant content to the user in the most prominent areas and move less important panels accordingly.

CONCLUSION

All our ideas and hypotheses were tested in each design iteration so that we could learn directly from our clients. Our design team, front-end engineers and product managers collaborated to ensure all designs were discussed in terms of feasibility, logic, accessibility, and value for our clients.

Image showing dashboard components decomposed into different areas

Figure 5 – Components decomposed into different areas to present to Front-End engineers

We are very proud to introduce this new dashboard to our clients this summer.

 

 

Risk warning

As with all investing, your capital is at risk. The value of your portfolio with Nutmeg can go down as well as up and you may get back less than you invest.

 

 

References