Client-Centered Design That Led to a Merger

When I joined Datek Online in 2002, it would be safe to say that the majority of the internet was still in a fledgling state of innovation. Even best of breed consumer brands of the day (e.g. Amazon, Google, etc.) hadn’t moved to an asynchronous presentation of data in the interface.

To put it bluntly, much of the web in those days was relatively dumb.

AJAX was a few years off from becoming a thing, so web interactions between user and system data relied on straight form submissions and page refreshes. And while most users didn't necessarily feel the impact of such limitations, industry domains that handled the timely purchases of goods with limited inventory or rapidly changing prices felt the need for progress.

With the reliance on real-time quotes, the financial industry felt like fertile ground for innovation. Datek Online had already revolutionized the space by releasing its Streamer app, which made streaming data tools available to the public — instruments that only industry day traders had access to previously.

I spent much of my early days tweaking data visualization for Streamer Suite, which was Datek's flagship product for day traders, all built in Java. Engineers loved the technology, as it provided sturdy asynchronous communication between the front and backend. The trade-off was Java’s limited capabilities to render a UI that could elegantly support a wider set of user needs and aesthetics, which was problematic.

The Datek platform had three unspoken operating principles — the timely execution of a trade, management of account information, and marketing communication.

With wild success in the day trading market, leadership was focusing on innovation squarely within the Streamer Suite, which suited me just fine... and then just months after I joined, Ameritrade purchased Datek Online.

We had just shipped a new Streamer app called Command Center — a dashboard that presented multiple Streamer apps, serving as the centerpiece of the product suite during merger conversations. Once M&A was official, our roadmap fell into a holding pattern as the two management teams negotiated their redundancies between backend systems, platform features, and human resources.

A Pitch To Leadership

Ameritrade was a destination for people who didn't know much about investing, let alone trading, and they owned it. Innovation wasn't the focus, and the only edgy aspect of their brand was Stewart — a hipster character created to school a technically challenged demographic as they attempted to use the intertubes.

After six months of maintaining all aspects of both brand experiences, we — myself, Dan Saffer, and Tom Alison with the blessing of Larry Szczech, Datek's SVP Strategy — flew to Omaha, NE to pitch Ameritrade leadership the design of a new trading platform,

We had to integrate the real-time data needs of the Datek day traders with the long-term horizon goals of Ameritrade investors in a unified platform. Most important, though, was an underserved segment found between the two personas: Active Traders.

While day traders brought in a large commission-per-client ratio, Larry and David Whitmore, Director of Strategy, surmised that the number of active traders — defined as a client who makes 10-20 trades per month — dwarfed day traders as a market segment.

Everyone in management agreed; we needed a platform that catered to actives while supporting the context scenarios of both day traders and long-term investors.

A novel platform, revamped visual language, and practically speaking, a new Ameritrade brand.

Scaling A Team and Building Trust

Upon receiving the green light from our presentation, I was promoted from my role as an interaction designer to Ameritrade's first UX Design Manager, with a charge to scale the team to cover Streamer, Amerivest, and the new "Unified" platform, later branded as Apex.

Within six months, I had hired a team of 13 specialists — UI designers, interaction designers, information architects, writers — along with taking our superlative team of front-end engineers under my wings.

To get the larger XFT moving in the same direction — with our clients at the center of our efforts — I flew in David Fore, VP at Cooper Design to run a Goal-Directed Design workshop for my team, business analysts, and our engineering partners. I invited stakeholders to sit in with us as well, as no one at Ameritrade had ever designed a ‘product’ without sending sketches in PowerPoint to graphic designers.

David reflected on the initiative in a recommendation for me on LinkedIn:

“I have met few people who can equal Sean’s craft, professionalism, and passion. The work he directed during my collaboration with him was as complex at a domain level as it was at an organizational level. It was impressive to watch him oversee a two-fold innovation program that included dozens of staff and executives: he orchestrated a workshopping process where participants learned human-centered innovation methods and he had the team apply this knowledge to the redesign and re-development of key parts of the company's flagship offering.”

Once our cross-functional team began speaking the same language we were able to align with business analysts on our client-centered approach to model user requirements. We generally knew what this Unified site needed to become and how we were going to work together, it was now time for us to work towards impacting the interface.

Attention to Detail

To impact metrics such as time-to-task, which is massively important to minimize when buying/selling in a time sensitive, price fluctuating market, we leaned into the Cooper design principle do not allow errors if they can be prevented.

In both legacy platforms, such a core tenet was an afterthought, leaving clients caught in form submission error loops. We invested in javascript checks across fields to ensure valid data prior to activating the submit button. This simple detail, along with well crafted content design, assisted the user filling out forms and only provided access to an active submit button when the system was happy with their attention to detail — whether the form was as innocuous as a support form or as important as a trade ticket.

Sections such as Deposits & Withdrawals were streamlined from multiple-page form submissions to single interfaces that conditionally exposed next options. These conditional interfaces would be baseline standard in today’s form UIs, but back then such frontend focus didn’t exist in the financial industry, let alone at large.

Task completion % improved and client complaints lessened — we were proving the value of human-centered design.

Closing the Trading Loop

While active traders moved money consistently, more often they were engaged with their positions — buying, selling, and altering particular attributes while they’re still open. Our research provided insights into how important controllable properties of positions were for our clients (e.g. trade type, amount, bid/ask, etc.), so we focused our attention on the context surrounding the trade ticket.

We recognized that the holy grail of smartphones were still years away from becoming a viable platform and our research told us that traders needed as much flexibility as possible in the research › trade › confirmation process. This spurred an investigation into how we might ensure traders could always be one click away from moving on a position.

What we came up with was SnapTicket — a nifty little trade ticket with features that supported both primary and edge cases of our active trader clients

• The ticket was persistent in the footer, making it available at all times

• The user could get live quotes in the header, or pull up their watchlist

• A conditional design was implemented to shift the fields depending on the type of trade chosen—market trades are without a price field; trailing stops have multiple price, closing inputs, etc.

• After submitting a trade, SnapTicket collapsed to expose only the header w/ streaming quotes, allowing more room to engage above the fold

• Most importantly: SnapTicket could *snap* off the browser window, and live separately as a compact browser window in the user's display. This empowered users to research online wherever they chose while having immediate access to opening/closing their positions

Our desire to have dynamic representations of data, specifically live stock quotes, was limited by the out-of-the-box frontend frameworks of the day. That didn't stop my frontend team, though. They pushed the browser as far as they could. Teamed up with my IxDs, they cranked out skeleton prototypes of our key path scenarios, allowing us to get feedback from clients, middle and backend engineers, and stakeholders alike.

After a client enters a position, an optimal task flow would be to present a confirmation of the trade and a view of all/open orders, but neither legacy experiences behaved as such. Open Orders was an important addition for clients across a handful of important context scenarios:

• Primary: a highly accessible display of whether or not new positions have actually been submitted.

• When users trade after hours and on weekends they create a stack of open orders that can't officially enter the market until the opening bell. Confirming their existence and providing a mechanism to make changes is critical to keep support tickets down.

• After submitting a limit order at a specific price near the market price, a user will have a small window to make changes (price up or dow, cancel, replace, etc.). This interface needed to clearly present all affordances to reduce time-to-task as much as possible.

The UX brought the client to the open order interface post-trade, with the confirmation message presented just under the topical navigation. We used this pattern throughout the platform to communicate both synchronous and asynchronous system messages. It’s not earth shattering innovation today in the world of Material UI Snackbars, but in 2005 few web services worked the interface to keep the user informed.

Delivering Impactful Results

This attention to client needs, along with our focus on the craft of solid interaction design, led me to the doorsteps of Theresa Carrey; a contributing editor at Barron’s Online. We had important business KPIs to hit — number of trades and new clients were on the top of the list — but the annual Barron's Online Broker Review was deemed to be mission critical.

With merger rumors in the air and Ameritrade holding a 2.5 stars rating (13th out of 15) the prior year, the pressure was mounting to receive a glowing review, which carried weight with clients and the industry in general. In the spring of '05, I flew out to Palo Alto with David Whitmore, Director of Strategy, to present the new platform experience over steak and a really nice bottle of wine.

A quote from Theresa’s review:

“[…] Ameritrade, which swallowed up Bidwell & Co., Brokerage America, JB Oxford & Co. and Investex over the last year, earns four stars this year for its Apex offering. Ameritrade seriously overhauled the Website this past year, finally integrating the technology brought in with the 2002 Datek acquisition. The new site provides improved navigation, more tools and services, easier-to-find information, customization and better trading technology. […]”

Theresa's 4.0 star review rocketed Ameritrade to second place in the online broker space, and just a few months later, TD Bank and Ameritrade finalized their merger.

When Ameritrade bought Datek Online, the two brands were disparate entities — from visual language to platform experience to trading features. In under 18 months I had scaled one of the first UX Design teams in the financial industry at the bottom of the Engineering organization, established working relationships across leadership of Strategy, Business Analysts, Marketing, and Client Success, and led the design and deployment of a novel trading platform, chock full of new trading features within an overhauled interaction model.

Product design is most fulfilling when what you make for the world is validated by customers, industry professionals, and new business opportunities — we had hit the trifecta.