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.
2020 - 2021
User Experience Design and Research, User Interface Design
Figma
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.
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.
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.
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.
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.
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.
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.