project
01
thinkorswim Mobile
thinkorswim Mobile successfully transformed a powerful, industry-leading suite of trading tools to function in a mobile environment. The app smoothly handles stock trades, futures, forex, and more, earning standout ratings for its usability and winning awards for its advanced charting and ordering tools.
Overview
Project Summary
The thinkorswim platform occupied six years of my professional life. I joined the team as a senior designer, then moved quickly into team leadership for thinkorswim mobile. Four years later, I took on the role of experience design director, adding the desktop and enterprise platforms to my portfolio and expanding my responsibilities to include business and product strategy, user research, design ops, and vendor management.
During my time on the project, we expanded the app suite to include iWatch and tablet devices and established a new, fast-growing user base among mobile-only traders.
Design Goals
Product and design goals both shift over the course of a product’s life cycle. During my time as team lead, thinkorswim adapted to shifting user and business needs. Three critical goals, though, stayed constant:
“Thinkorswim Mobile is ‘where the magic happens.’ ...The combination of effective design and advanced trader functionality is a winner.”
Head of Research at Stockbrokers.com
Project Details
My Contributions
Product design direction
Creative direction
Product strategy
Team & vendor management
User research strategy
Interaction & experience design
Motion design
Product prototypingManaged Team
1 Producer
1 Art Director
2 Lead Designers
2 DesignersTIMELINE
2012 – 2018
RESULTS
Achievements
Recognitions
The App With Two Names
thinkorswim Mobile or TD Ameritrade's Mobile Trader
For almost seven years, the mobile platform showcased here was branded as both thinkorswim Mobile and TD Ameritrade Mobile Trader. That co-branding accounts for the assets you see here that aren’t labeled as thinkorswim mobile.
Co-branding originated as a temporary compromise between competing marketing strategies, and persisted far longer than it should have as a result of conflicting priorities. It caused significant distraction for the design team, interrupted cross-team coordination, and slowed down onboarding of new hires.
In 2019, much to my relief, the company officially designated the app thinkorswim Mobile.
Features
Designing for the Complex
The thinkorswim app served a cluster of high-complexity, high-impact functions, and the design team had to innovate a feature set to make those functions consistent, accessible, and satisfying. Highlights included twinned Light and Dark themes, Advanced charting, an Advanced Order Editor, and Live Support Chat.
Light & Dark Themes
Themes were carried over from the mobile app’s desktop predecessor, providing an important element of user experience continuity. In 2018, thinkorswim updated its light and dark themes to align with the company’s new design system, making the app ADA color compliant.
Charting Features
Charts are a core function. We created them to condense the full complexity of thinkorswim desktop into the mobile environment, bringing visual clarity to hundreds of technical indicators, layered multitouch drawings, and quick sync and share tools. They have become the app’s most recognizable visual element.
Advanced Orders Editor
This unique feature allows users to visualize the construction of their conditional orders, significantly reducing cognitive load for advanced trading arrangements like 1st Trigger All, OCO (One-Cancels-the-Other), and Blast All.
Live Support Chat
We knew that chat was critical, but also that it had some hurdles to clear before it could support a client trying to troubleshoot a trade in real-time. That’s why we built in screenshare, which all but eliminated most miscommunication and allowed for the prompt and specialized assistance customers needed.
OUTCOMES
Influential Product Releases
These stand-out product releases chart a course through the evolution of TD Ameritrade’s entire thinkorswim product suite, showcasing the first appearance of key design decisions that originated with our product team before defusing through the organization. Most of them are still used widely in TD Ameritrade’s digital project portfolio.
2013
iOS 7 Release
While the look and feel of thinkorswim Mobile have been improved continuously since the app’s first iteration, the most concentrated period of change came in 2013 following the release of iOS 7. We modernized the app for its new platform, aligning our approach with Apple’s Human Interface Guidelines and reducing the use of customized components. The result was improved usability and accessibility.
Another major change came in 2016, when TD Ameritrade released a thinkorswim app for iWatch users.
iPhone Redesign
iOS7 Release 2013
iPad Redesign
iOS7 Release 2015
iWatch Redesign
iOS7 Release 2015
2013
Android Release
In late 2013, my team and I pushed for an Android redesign to capitalize on the lessons learned during our iOS 7 comprehensive redesign. We succeeded in creating a more consistent user experience across devices and operating systems.
Android Phone Redesign
4.4 Kitkat release 2013
Android Tablet Redesign
4.4 Kitkat release 2013
MOTION Design
Animation Elements
During my time with the thinkorswim team, I made it a priority to design and produce an ongoing series of splash animations. We used them as animated loading screens and thematic introductions to the app itself.