TradeStation
Modernizing a trading giant for the new wave of retail investors

Lead product designer
UX / UI design
Product strategy

Design system owner
Workshop facilitator
Brand consultant

The problem

Based out of Florida, Tradestation is a brokerage company with a long-standing history and over 150,000 active traders. Tradestation is renowned, particularly among advanced traders for its powerful tools and diversity of assets offered. However, as powerful as it is, TradeStation is alienating a large proportion of the retail investor market and losing out to new players like Robinhood and Public.

Additionally, TradeStation had little to no experience working systematically with a design team where decisions were made in isolation using outdated code stacks meaning updates were slow, and inconsistent, and usability suffered as a result.

Cover-image-assets

Setting our project principles together

We spoke extensively to TradeStation stakeholders and employees from all across to business to align on what the future of trading looks like at TS. We developed 4 key principles that underpinned our design, strategy, and decision-making going forwards.

unify-1

A unified look and feel

empower

Support and empower users

access

Trading available on-the-go

grow

Grow user's confiedence & skills

Research: Claire, Ron, and Theo

Through stages of interviews, we began to form a picture of our users in various flows of the app. To aid the discussion we created 3 personas; Claire, Ron, and Theo – all of which had different experiences, lifestyles, and trading goals. Trading for many people is a part of their daily routine so we wanted to illustrate this by drawing up a comic. This helped us empathize with our users and revealed unique insights.

Storyboard

Improving design processes at TradeStation

To improve design quality and efficiency, we introduced new ways of working at TradeStation in order to reach our key project principles. We introduced these processes at TradeStation with collaboration with all parties of the team including; product owners, design principles, designers, and engineers.

iterative

Embracing iteration and a roadmap

data-driven-3

Data-led design with clear goals, research & validation

codebase

Reduce build times by updating the codebase 

design-system-1

Created a powerful system to improve all aspects of design

full-redesign

Proposed a full redesign of the app from MVP to vision

async

Async working cross different time zones

TradeStation Atlas

TradeStation Atlas was our team of designers, POs, managers, and engineers dedicated to the redesign of the mobile experience. We wanted to create a destination where novice and experienced traders could both gain from the app. We road-mapped our development starting with core features and added complexity, new features, and additional asset classes with each new round from Alpha V1 to Open Beta.

Screen-collection-1

Make trading more accessible

To aid newbie investors we focused on education, learning, and guidance making sure they had the knowledge and were equipped with the right information to make the right trading decision for themselves. We did this by:

  • Prioritising tooltip guidance
  • Connecting the app to APIs to offer powerful analysis
  • Surfaced quick insights for symbols
  • Made large improvements to the primary navigation to increase usability
3D-Assets-Hotlist-1
tooltip
Accessible-trading

Trade discoverability

Discover was a core new feature that we, as a team, had prioritised in our V1 build. It was important to us that we were able to give investors insight into the latest market movements and highlight any prominent symbols so they don't miss out on a good trade. We used multiple data sources and created scalable designs to accommodate our expanding catalogue. Investors could discover new trade through; hotlists, symbol insights, market sectors, earnings calendar, analysis ratings, community sentiment, news, and more.

Discover-3-Phones
Discover-features
News-1

Creating confidence in the trade ticket

Following Discover, we focused on reimagining the trade ticket. It was important to us that we assured traders by being very clear with what they were ordering and giving them the right information at the right time for them to make their decisions. Alongside guidance, it was also important we didn't slow the ticket flow for our experienced traders so we allow users to swipe through values without needing to access the keyboard. We began with a simple market order that was able to scale to advanced orders including Stop Limit and Options spread trading. As with other parts of the app, we regularly tested each epic with customers and Tradestation employees.

Trade-ticket-3-phones2X

Represented here is only a small section of the Atlas project. This case study would become far too long if I showed everything, however I would be more than happy to present the rest if interested. Currently the project is in Closed Beta and rolling into Open Beta at the beginning of October. Additional epics I was also responsible for included:

  • Portfolio / Asset (Lite and Pro mode)
  • Account activity
  • Symbol page
  • Options chain
  • Option trade ticket
  • App onboarding
  • Beta release flow
  • Watchlists
  • Community (Future exploration)
  • Learn (Future exploration)
  • Design system management
  • Brand direction

Experiments and future concepts

Prior to Project Atlas, we ran quick experiements imagining how future features could embed themselves in the app. These features included education, community, profiles, and trade-ratings. Here is only a small portion of what we explored.

future-overview

Key learnings

⚡️
Building a flexible design system focused on growth 

When we began this project there wasn't even an agreed-upon button style let alone a component library! Tradestation had a reputation for being experts with data but perhaps, and I believe they would admit this themselves, neglectful of design. We listened to stories from engineers explaining app updates were often made without designs and that the app itself was the home of over "40 shades of grey", the less known prequel. This reality provided me an excellent opportunity to beef up my design system nouse. I enjoyed digging through Twitter and watching developing 'fan-crushes' on various Figma design advocates. Within the team, I led the design system (alongside leading design) and created a system of libraries with a focus on flexibility in terms of use and growth, and intuitiveness, making it easy for new designers to quickly pick up.

🐢
Slow and steady wins the race 

While I have led many projects for various products over the years, I've never worked with something quite as complex as a brokerage app. Also, I have never worked on a project with such historic technical debt making it a completely different kettle of fish entirely. My previous projects have often followed a script – the client sets a brief and their desired vision and key goals,  

💡
Increased knowledge of trading

Before this project, my understanding of trading was very errr, light. I knew the basics – buy low, sell high – but the intricacies escaped me. As a result, I admit it was at times difficult to design when I couldn't fully grasp all the data and understand the motivations. However, over the course of the project I have been able to speak to customers and experts directly giving me the chance to ask all my stupid questions, understand the data, and get into the mindset of your everyday trader. I've always found the learning experience hugely fulfilling and am grateful for all those who shared their knowledge (including the millions of videos I watched on YouTube!).

Team

Sennep
Alex Thurman Lead Product Designer
Matthew Rice Brand Designer
Bridget Dawodu Project Manager
Fabio Santos Product Designer
Najiba Noh UX Specialist & UX Researcher

TradeStation
Jeff Peters Director of Product Management
Francis Yango Senior Product Manager
Avery Lai Senior Product Owner
Adam Gessel Director of Software Engineering
Gerrit Schuller Director of Product Development
+ the team of talented developers!

© Alexander Thurman 2022