project
02
Verde Design System
Creating the kind of consistent, effective design that's critical for conversion, retention, customer satisfaction, and public perception.
The Verde project was my chance to simplify and standardize the design for every digital product at TD Ameritrade...
...and it worked. As product owner, I was able to guide the creation of a complete international design system to support TD Ameritrade’s client-facing digital products.
The library is a central source of pre-defined and coded building blocks that are relied on by a growing list of product teams. It lets the teams focus on higher-level design decisions, and guarantees coherence across websites, mobile apps, and desktop platforms, increasing both functional value and visual appeal for the full product suite.
Overview
Project Summary
The first and most critical outcome of the Verde project was the creation of a dedicated design systems team. With the support of our product and marketing teams, we had both the resources and running room to leverage our earlier audit of the design elements in all of TD Ameritrade’s digital products, which we were able to modularize as part of Verde's creation.
We then transformed the latest brand guidelines into updates to our existing visual design language, and combined our results into a universal component library. To ensure that we were delivering the results we wanted, we tested and validated the library’s effects on client experience, finding that they were overwhelmingly positive.
Design Goals
Verde grew out of a book project completed under tight operational constraints. My team needed to create a scalable design system for the company, one that was accessible and reusable for both targeted, low-use products and our flagship digital offerings.
Our key design goals were to reduce visual problem solving across products and platforms, speed up development times for all team sizes, and allow teams to more quickly adapt to design changes resulting from shifting business requirements, client requests and feedback, or new trends in technology or design.
Project Details
My Contributions
Product owner
Product & creative direction
Team management
User research strategy
Experience designManaged Team
1 Lead designer
2 Designer
1 Lead developerTIMELINE
2017 – 2019
Mission and Top-Level Design Principles
The Verde team had a broad mission. Our end goal was to simplify, unify, and standardize TD Ameritrade's digital client experience across its product suite; our means of achieving it was to modularize, clarify, and prepackage every major design element those products relied on.
Simplify
Reduce unnecessary complexity and remove clutter from our designs and processes
Unify
Align look and feel across all digital products to create a cohesive client experience
Standardize
Consolidate and categorize all design elements into a framework of flexible and reusable components
FEATURES
Creating a Visual Design Language
The foundation of the Verde Design System is its visual design language, which consists of color, typography, and iconography. Our team developed the language via an exhaustive survey of TD Ameritrade’s digital products, conducted collaboratively with the product teams. We identified which design styles were primary and needed to remain consistent across experiences, as well as elements that were critical and required unique presentation and guidelines for certain products and their users. We used those evaluations to guide our choices around what to include and how to weight and present each component.
Colors
We evolved Verde's color library in three steps. First was the survey, which catalogued existing color usage across products. Then we incorporated the initial guidelines and color palettes developed for the TD Ameritrade Product Design Book, and wrapped up by adjusting our output to conform to WCAG recommendations.
Typography
We knew we wanted to improve legibility of letters and readability of fonts, and I pushed for a ground-up rework. We partnered with the brand team to commission Tobias Frere-Jones to craft a bespoke typeface, TD Ameritrade Sans, which met all technical and brand requirements and allowed for easy scalability through future updates.
Iconography
Verde includes two iconographic categories for use in TD Ameritrade products: utility icons and illustrative icons.
Utility Icons
Utility icons are small, simple, high-contrast designs that represent commands and calls to action. They are used throughout all interfaces.
Illustrative Icons
Illustrative icons are larger and include color, and use detailed design and archetypal symbols to convey specific concepts or narratives.
The Endlessly Evolving Component Library
With the design language in place, we started building the component library. It includes visual design language styles, design tokens, coded design components, and page templates, all of which are fully tested and documented, and which can then be used as the building blocks for new products and product revisions.
The library is constantly updated as products change, as third-party hardware and software updates are issued, and as new guidelines are adopted. In effect, it specifies the public-facing design of all TD Ameritrade programs.
OUTCOMES
The Verde Design System In Use
As it exists today, the Verde Design System is a fully responsive website that houses the design language elements and fully coded, ready-to-use building blocks supporting desktop platforms, mobile apps, and websites. Its presence and influence are visible in every active TD Ameritrade product.
Website for the Verde Design System
Our team designed, developed, and launched a responsive CMS-driven site to provide the company with a central repository for the Verde system. To achieve maximum usability, the site includes a component library with corresponding design documentation, brand and editorial guidelines, an archive of user-test results, onboarding materials for new designers, FAQs, and design tool and product resources.
The Influence of Verde
The following products exemplify Verde’s widespread efficacy.
MoTION Design
A Video Introduction to Design Systems
For the Verde project to work, the company’s product teams needed to be brought on board and persuaded to use the library consistently. To help that happen, we created a video introduction to design systems, pitching Verde’s utility for improving client experience and making our design processes more efficient.