Design system dashboard design

Group 4.png

_ COMPANY
Nutmeg: The Digital Wealth Manager

_ CLIENT
Nutmeg: The Digital Wealth Manager

_ OUTLINE
Create a design system to empower teams and enable dashboard redesign

_ MY ROLE
UI/UX design team lead

 
 

Elevator pitch

For all Nutmeg customers
Who are actively invested with us 
This dashboard is the home of your goal based investing
That builds trust and awareness
Unlike traditional paper based statements
Our product gives you confidence and makes investing simple 

 

What is a design system?

A design system is a decision making framework. A framework to help us unite design across all our channels by creating a common visual language. A language that connects the dots across product offerings, lines of business and user touch points. It’s a toolkit tuned for product design to enable greater fluency between teams.

 
 

Discovery

Our first step was to review every aspect of the product and try to list all the components, create a gap analysis, audit the exiting elements and then group them by their usage and measure the frequency of their appearance. This allowed us to build a plan and prioritise our work flow.

 
Screen Shot 2019-06-23 at 09.35.16.png

By taking a zoomed out view of the entire journey were able to better understand and sequence the various steps our users go through on the way to the dashboard. This also helped us identify patterns and templates that we could reuse in our visual design.

 
IMG_1911.jpg
IMG_3430.jpg
affinity-workshop.jpg

From here we wanted to establish rules and principles for the Design System. To begin with we established our core atomic expressions: Grid, colour, typography and icons.

Before going any further we need to create a shared understanding of What is a dashboard and its role in lives of our users.

 
 

The Grid for the Design System

Screen Shot 2019-06-20 at 20.32.42.png

The Typographic Scale for the Design System

Screen Shot 2019-06-20 at 20.26.04.png
 

The Colour Palette for the Design System

Brand palette

Brand palette

Base UI

Base UI

The icon library for the Design System

Screen Shot 2019-06-20 at 20.31.40.png
 
 

Creating new compositions

After completing 15 contextual inquiries and 2 rounds of unmoderated remote card sorting exercises we were in a better position to understand how our users interact with with the dashboard and how they view and use their finances.

 
Screen Shot 2019-06-23 at 22.36.04.png
Screen Shot 2019-06-23 at 22.36.36.png

Armed with these new insights about our customers we began creating new compositions and visual arrangements, exploring new ways in which we could surface information for our customers, enhancing their situational awareness.

Using our base visual language to mock up wireframes we started to create our vision of the future. We wanted to get there in an iterative fashion creating embraceable change all the way and adopting a process of co-creation with our customers.

 
Full width panels

Full width panels

Customised content panels

Customised content panels

Customised content panels include smart filter and rich navigation options

Customised content panels include smart filter and rich navigation options

Customised and dynamic content panels include smart filter and rich navigation options with real time activity feed

Customised and dynamic content panels include smart filter and rich navigation options with real time activity feed


What, where & how

Understanding what our customers both need and want from their dashboard experience gave way to 3 revealing insights:

  1. What I have: My balance, performance, contributions and active investment products

  2. Where I’m going: Visualising future scenarios, projections and goal based timelines

  3. How to get there: Guidance and advice, content curation and the knowledge base.

 

Narrative

Once we had our components we were able to begin developing the narrative and start to tell the story of the customers financial situation. Allowing them to customise and curate content gave them a more meaning experience.

 
Group 5.png
Group 6.png
 

The app

All of the appropriate learnings about how our users interact with Nutmeg we were able to successfully feed into both the iOS and android app

iOS mobile screens.png
app store preview.png
 

Business outcomes

Increased AUM
Improved session time
Reduce churn
Increased referrals
Increased tracking ability
Improved process measures
New market opportunities through open API’s

Customer outcomes

Customer Satisfaction Score (CSAT)
Customer Effort Score (CES)
Net Promoter Score (NPS)
Greater transparency
Ease of use
Improved understanding of journeys
Faster task completion time