TradeStation
Designing and restructuring a trading giant to compete with modern brokerages

Lead product designer
UX / UI design
Product strategy

Design system owner
Workshop facilitator
Brand consultant

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. During the Pandemic, a flurry of first-time traders entered the scene partly thanks to viral stocks and growing investment communities like r/wallstreetbets. As an established trading platform, Tradestation wanted us to help them compete with rising expectations of modern trading platforms (Robinhood, Public, etc.) in order to attract these new customers without overlooking their current expert traders.

Context-Symbol

Creating a vision together

Creating a vision together

Creating a vision together

Creating a vision together

With over 40 years as a brokerage, Tradestation had grown the reputation of a well-respected platform for advanced traders. However, more recently the platform's popularity had begun to wane and its future was becoming more unclear. To help Tradestation plot their course, we arranged a series of workshops with staff from across the company to gain a deeper understanding of where they are now and where they want to be.

Together we formed 4 key principles that we wanted to aim for:

unify-1

Unify

Create a uniform look and feel across all of our B2C product offerings

empower

Empower

Make trading attainable and easy by supporting users in the way they need it most

access

Access

Create an all-in-one solution for their trading needs, available where, when, and how they need it

grow

Grow

Build user confidence, skills, and autonomy in trading by providing the right tools and insights

Meet Claire, Ron, and Theo

During these discussions, we created 3 personas to align the greater team and aid project discussions. Our personas were instrumental in giving the project focus, particularly at the early stages. We even created storyboards to illustrate our persona's goals, motivations, and frustrations based on current customer data.

Together with Tradestation, we agreed our target audience for V1 would be Ron.

Claire

Has the time and willingness to learn, but limited financially

Ron

Short on time but with cash to splash, and plenty of enthusiasm

Theo

Trading expert – Theo lives for trading. This is not his first BBQ.

Storyboard

Proposing a new product strategy and ways of working

Proposing a new product strategy and ways of working

Proposing a new product strategy and ways of working

Proposing a new product strategy and ways of working

To kickstart the project, we focused our design efforts on 2 key experiences; redesigning how users view their portfolios and introducing crypto trading into the current app. Through this process, we realized our strategy and current ways of working were leading to slow builds and too many design limitations, which, as a team that wanted to provide impact for customers, was hugely frustrating. 

To fix this, we created an internal team bringing together key figures from across the product including; product owners, designers, and engineers to create a proposal strategy to help make our team lean and more effective which would later be approved by shareholders. Our proposal included:

iterative

Embracing an iterative design process

Creating a clear roadmap in order to iterate and build faster

data-driven-3

Data-driven design

Using customer research, interviews, and user testing to validate designs

codebase

Updating the codebase 

Embracing a new codebase to reduce build times and improve tech collaboration

design-system-1

Creating a design system

Helped us offer a consistent, unified experience and speed up design

full-redesign

Full redesign for the app

Working within the current app caused too many complications so instead, we decided to supersede it 

async

Async working

Working closely with engineers to iterate quickly and keep build times low

Building strong foundations through an iterative design process

With our new process signed off, we began by restructuring the whole experience. As this was a large departure from where the app was currently, we focused on getting the fundamentals right and robust. It was important to us to target the core flows before adding the cherries on top at a later date.

To keep the project progressing along the right path, we built a long-term roadmap to schedule key features and designate time for testing designs with users and updating our design system. Our roadmap was phased beginning with a closed experience with ambitions to release a Beta product to existing customers, before ultimately relacing the app in its entirety.

Roadmap-Features2X
3D-Assets-Hotlist-1

Navigation to support V1 and the future vision

Navigation to support V1 and the future vision

Navigation to support V1 and the future vision

Navigation to support V1 and the future vision

Navigation was a big issue from the current app that we needed to solve where each section had been considered separate and siloed from the other. This was largely due to the way it had been previously designed – when a new feature was requested, it was treated as a separate entry into an ever-expanding burger menu – this badly affected usability. We worked together with customers to reconfigure the app's navigation. As we were phasing the product, we ensured the navigation would be able to accommodate V1 and the team's larger aspirations further down the road.

Navigation

A place to discover new trades

A place to discover new trades

A place to discover new trades

A place to discover new trades

As one of the core flows (and a part of our V1 release), we worked to improve asset discovery on the app looking specifically at certain key stages; 'Discovery – Analysis – Monitoring – Trade'. For us, it was important that customers felt confident with their decision before making a trade. We spoke to customers to understand what information drove their decision-making and what data they needed to see before tapping trade.

We worked rigorously alongside the tech team and product managers to incorporate powerful APIs that could offer numerous data points including; Symbol insights, Sector information, Earnings graphs, Expert analysis, Community sentiment tracking, News stories, and Hotlists – all of which formed the basis for our user's fundamental analysis.

Discover-3-Phones
Discover-features
News-1

Powerful trading tickets

Powerful trading tickets

Powerful trading tickets

Powerful trading tickets

After discovery and analysis, one of our first priorities for the app was to make a powerful and seamless trade ticket. During which we spoke with customers and Tradestation employees constantly to make sure their perspective and thoughts were being considered in the design.

We also took the opportunity to cater for less-advanced traders, our Claire persona, who may understand the basics of a market order but perhaps are intimidated by more advanced order types. As such we designed the important information to be written clearly, in plain english, to  help guide users through the flow in comfort while reducing the risk of errors.

Trade-ticket-3-phones2X

With our core flows completed we rolled out our design thinking and style across every feature within the app.

Screen-collection-1

Creating a design system to promote consistency and speed up our process

Creating a design system to promote consistency and speed up our process

Creating a design system to promote consistency and speed up our process

Creating a design system to promote consistency and speed up our process

As the lead designer, my role also included managing and governing the design system. I developed 5 key principles for our design system strategy:

Scalable – Ability to grow and adapt components as design developed
Easy to navigate – Enabled quick and easy collaboration between designers and developers
Consistent – Rules used in one place were maintained in other areas
Powerful – Use of component properties simplified our system and reduced potential errors
Controlled – Developed a process to introduce new components

Design-system-2

Experiments and exploring future concepts

Experiments and exploring future concepts

Experiments and exploring future concepts

Experiments and exploring future concepts

Before correcting our product strategy, we carried out a series of experiments and conceptual work with the goal to give higher stakeholders a flavour of the direction we would wish to take. While we all agree now that this way of working was not ideal - I still believe it is interesting to share the results and explorations!

future-overview
Experiment-Chart-3-phones
Experiments-Misc-3-Phones

Key learnings

Key learnings

Key learnings

Key learnings

The fact that things didn't go to plan made this a hugely valuable learning experience for me. The items that stood out in particular included:

⚡️
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