project
03
Product Design Book
This volume was a showcase of a thoughtful, streamlined new design language for TD Ameritrade’s digital product lineup. It was simultaneously a proof-of-concept, a pitch for a larger impending project, and a set of solutions to thorny design challenges our teams were facing.
Overview
Project Overview
This project focused and formalized a wave of design changes that were going on behind the scenes at TD Ameritrade. Our design teams had been working to align our visual styles across products, and the effort was badly in need of centralized guidance. To prevent scope creep and channel the explorative aspect of the team's work in the direction we needed it to go, we fixed on a display book as our end result.
While available to everyone in digital form, we printed a limited collection of the books for our staff, both as collaboration and reference tools and as tokens of appreciation. Their primary audience, however, was senior leadership. We distributed copies to executives and to managers on the Product and Development teams, both to help build enthusiasm for the upcoming design changes and to showcase how impactful the updates would be.
Design Goals
The objectives for this project were:
Project Details
My Contributions
Creative direction
Production
Team & vendor managementManaged Team
1 Producer
1 Illustrator
2 Lead designer
1 Copy writerTIMELINE
2016 – 2017
Achievements
“Consistency is one of the most importance principles of usability. It makes products comfortable and communicates our brand reliably.
This collection of designs represents our visual roadmap, subject to evolution. It is the first step moving us from individual platforms to a unified TD Ameritrade design system"
Width: 11 in | 28 cm
Height: 15 in | 38 cm
Pages: 133
FEATURED PAGES
Cultivating Consistency
A selection of the book’s most impactful and use-relevant pages.
Front Matter
We set expectations with a table of contents and a set of product screens illustrating the impact of our decisions across company products.
tdameritrade.com
TD Ameritrade's primary retail web product, referred to internally as the Grid site. This site balances ease of use and complex functionality to support both long-term investors and casual traders.
Trade Architech
A fully featured but easy-to-use trading platform that gave users an accessible, browser-based option for professional trading (since discontinued).
TD Ameritrade Mobile
Started as a mobile companion app for the Grid site, then evolved into a standalone product targeting investors and casual traders.
Mobile Trader
Now known as thinkorswim mobile, this app grew from a desktop companion for our thinkorswim product into a fully functional trading app supporting a growing population of “mobile-only” traders.
Before and After
A chapter of visual comparisons demonstrating client-facing improvements to look and feel that resulted from our proposed design changes.
Appendix
We used the Appendix to introduce key aspects of visual design accessibility to the company’s internal discourse. Topics included visual contrast and data density.
Outcomes
Intented Consequences
My team’s work on the design book paved the way for hundreds of new designs and product updates, and enabled widespread improvements to existing interfaces across TD Ameritrade’s digital ecosystem. Company leaders liked our work, and invested in building a dedicated design systems team.
As a result, the book project provided the foundation for the Verde Design System, a project I spearheaded over the two years following the book’s release. That system now forms the basis of all of TD Ameritrade’s digital design, as exemplified by products like the thinkorswim Mobile app.
