summary
mission
Create a streamlined design system to organize Toggle's existing (but chaotic) design library, incorporate white-labeling for partners like Toyota and Better Home Insurance, provide built-in layouts for easy flow building, and establish a clear structure for emails, documents, and other assets.
my role
I was given the project of the Toggle Design Library (TDL), but its success stemmed in no small part from close collaboration with our engineers, who brought this work to life.
impact
Not only did the creation of TDL improve the efficiency of all Toggle-based designs (both new flows and old) exponentially, it also streamlined many other efforts across the live instances of all lines of business (Renters, Auto, and Homeowners insurance), partners (Toyota and Better), and sub-components like documents - which yielded an increase in efficiency amidst the Toggle division by 80%. Toggle has 600,000 users; with Toyota and Better combined, the impact cannot be understated.
client
Toggle Insurance
(& co-brands, Toyota Auto and Better Home Insurance)
services & skills used
Design System
Tokens & variables
Cross-team collaboration
Organization
User Interface Design
Toggle was created as a competitor for digital insurance platforms like Lemonade:
A great idea with a less-than-great design system.
The goal was to fix it up, make it easy-to-use, and, crucially, build it flexible: flexible enough to accommodate all of its many components, to create flows faster and better, and to eventually white-label its partner brands, Toyota and Better.
This was a major undertaking.
It cannot be said enough that the original provided Design System was outdated, disorganized, and inconsistent. This is not the fault of the original designers; merely, the result of time and urgency making the upkeep of the system less and less of a priority.
I had an outline for my work:
-
Organize the existing component library into a hierarchy that made sense (in order of size: Styles, Variables, Components, Patterns, Layouts)
-
Create a series of local variable libraries to accommodate both the General tokens and the Brand-specific tokens, to ensure that color and other styling could be switched easily to the partner brands
-
Develop a Layouts library for the Quote / Purchase flows as well as the Self Service ones, for all viewports and all brands
-
Streamline Documents, a huge undertaking often done manually by our team
-
Streamline emails
This project, in conjunction with the efforts to bring it to life by our amazing engineers, took over a year to complete.
the work
The first order of business was the general organization and structure of the component library.
Starting at the smallest building blocks allowed me to get very acquainted with the Design System: what worked, and what didn't. It was both helpful and unhelpful that so much had gone unaccounted for.
I was able to create the design from the ground up. I cleaned up components to have more intuitive naming conventions for both designers and engineers; I created variables for typography, viewports, color, and components.
I went as small as I could go, with the understanding of how huge the ripples would be.
This allowed me to understand more about the ins and the outs of both Figma's capabilities, as well as the correlation to what was happening in the code.
I needed to not only build out the components in an intuitive way, but also for them to correlate with other Brand tokens, so that the same Purchase flows that worked for Toggle would also work for Toyota.
Components, like an Input field or a Button, were one thing: Patterns and understanding what the difference was forced me to think deeper. Layouts as components themselves allowed me to consider how everything worked together.
Anything that could be streamlined, I streamlined.
From there, a new product or state requirement would be as simple as switching a setting on or off - any new brand would be the addition of a set of colors, and the flip of a switch.
the impact
The level of efficiency that this work provided was immeasurable. It allowed us to build flows (and real products) faster and with more consistency, it allowed us to create better solutions, and it cut down on frustrations across Product Managers, Engineers, and Designers alike.
Plus, creating a more complete Design System allowed for the creation of Layouts like that of Documents, one of the great stressors of digital insurance (thanks to the legal element of everything being up to state specification).
Being able to streamline these elements was a game changer unto itself (one that was not possible prior to TDL's inception).
What went well:
-
Immense learning
I have always been someone who cares about keeping my Figma files, layers, and components clean, named (iykyk), and in perfect alignment... but this process took my knowledge of complex Design Systems to the next level.
-
Overall team efficiency and alignment
TDL made it so that designers could pick up new flows and concepts faster, engineers could build Toggle and all partners in TDL in code, and Product Managers could find files and flows easier than ever. Not to mention, the impact of Documents alone - it had tangible business impact.
The challenges:
-
Variable libraries
I love Figma tokens and the incredible interaction between the variable libraries. In some ways, I'd be lying if I said I wasn't still learning! There are always more ways to plug in variables, especially now with equations and being able to make the components speak to each other. I love this stuff and I can't wait to learn more!
-
Dependence on another brand
Although I did everything I could to make TDL make sense, there were some things I would've loved to adjust for the sake of the User Experience that I couldn't due to our inherent dependency on Toggle's design choices.
TDL brought the work we did at Sure to a new level; though I would be remiss to say I did any of it alone, I am proud of the way that I started with a very large file and made it into a coherent system with cascading positive effects.
in conclusion
Toggle's Design System was a collection of colors, concepts, and trust - the hope that their (and our) designers would be able to spin something up as they went along. Toggle Design Library (TDL) makes our lives easier, and the work better and faster.
I could not be more grateful to have had the chance to own TDL as a project at Sure.
I grew so much as a designer and it offered me the chance to really master an entire system - from start to finish, pixel to patterns, I know the system and how it functions inside and out. I feel confident in Figma on a new level, and I can say with confidence TDL sets everyone up for success.