DASH White Label Design System

A fresh look at financial advice

View project

Overview

Ignition Advice needed a white label brand to be able to show potential clients how their advice platform worked in a unique style for them. For IP purposes some information has been changed to be able to share this project as a case study.

Timeline

2020 - 2021

My Role

User Experience Design and Research, User Interface Design

Tools

Figma

The challenge began when...

Ignition had a legacy demo product that was in need of an upgrade. My stakeholder and I discussed that they wanted to be able to demonstrate our platform to potential clients and not have it look anything like the previous iteration, for it to be purely Ignition IP. I was challenged to take our current Retirement Customer Journey and translate it into a sleek and unique white label demo platform.

Let's explore a bit more

I researched different brands and design systems from industries such as finance, tech, insurance to name a few. We wanted a clean and modern monotonous look to be able to demonstrate what financial advice could be so it could stand out against the typical sterile look of financial products. I set the system up to be a living document so it wouldn't have unnecessary components. All of these pieces built up the DASH brand library and style guide. To move the brand and style guide forward, I collaborated with my senior designer and we broke down the component groupings into individual parts to provide documentation and variant sticker sheets for how to use and pull from for future designs.

It keeps growing

As the Library grew we began to redesign how some of the key pages in our financial advice journeys would look and flow. Our fact find, strategy, and recommendations page was designed to be an aid to the adviser as they are explaining the results of the advice to the customer, as well as, if the customer were to look at the advice later on their own they would not be overwhelmed and understand what the page is trying to say. The layouts flow in order of the conversation the adviser is having with the customer.

Initial sketches and notes for beginning of project

The challenge began when...

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.

You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

Sample of buttons for style guide and sticker sheet

Let's explore a bit more

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.

You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

Sample of key journey screens in order: Fact Find, Needs Analysis, and Recommendation

It keeps growing

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.

You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

Some things I learned,

This project provided a lot of firsts for me as I had never developed a design system or documentation for styles before. From my research I knew I didn't want to overwhelm myself by creating components that we didn't need. This was a good approach and when things were needed and used often I committed them to the library for future use. Expanding the style guide to be individual parts focused and include documentation for when and how to use everything was also a learning.

Want to see more? Check this out:

Tea time anyone?

Like what you see and want to have a cup of tea? Lets chat! I'd love to help you with your next project.
Let's chat

Want a copy of my resume?

I've had the opportunity to work with some awesome companies. Please feel free to take a copy of my resume if you would like to learn more.
Download resume