skip to main content
Closeup shot of different designs from the website Closeup shot of different designs from the website

From Activity to Identity

Michael Patak started Topstep so that aspiring traders could learn the craft without making the same expensive mistakes that nearly ruined him financially. Topstep is built with traders in mind, rewarding sound risk management by helping build productive habits that last a lifetime.


The Challenge

Topstep came to us with a new and beautifully bold brand that had yet to launch. The brand was carefully crafted by another agency based on consumer feedback and the insight to go where no online trading software had gone before. When Topstep launched in 2012, they quickly became an industry disruptor. With this new brand, they took that title even further. Featuring bold type, gritty photography, and speak-no-bullshit messaging, the Topstep team was officially ready to take their site to the next level.

Man talking on the phone
Man doing work on the computer
Woman doing yoga on a mat

Part of the Trade

After viewing the current brand presentation, the Rule29 team was ready to get to work. A lot had gone into developing the brand thus far, and we wanted to continue the momentum by pushing the brand by designing and developing a website unlike anything on the market. Through a web audit, research, and competitive analysis we discovered that Topstep’s content curation of podcasts, blogs, videos, and ebooks resonated with their traders, and we knew we wanted to make sure the content could be accessed easily.

Topstep Website Sitemap
Full Topstep Sitemap
Topstep Wireframe Template

The Solution

After multiple rounds of site mapping, wireframe presentations, collaborating with multiple Topstep departments, and revisions, we created a site that emphasizes Topstep’s grit, experience, and leadership. The use of subtle animations throughout and nods to the soon-to-be infamous “Topstep T” established an interactive and modern experience from the start. Additionally, we curated all the various types of Topstep content into a one-stop-shop, which Topstep can update on the fly.

Topstep Website Landing Page Design
Topstep Website Desktop Design
Homepage States from Topstep Website
Flat panel Design for Topstep Website
Topstep Website Resource Library

Since most traders accessed the site from a desktop, that was our first priority when building the site. However, due to the complexity of information and designs needed, we also built unique mobile templates to ensure ultimate responsiveness across all screen sizes.

Mobile Aerial Grid for Topstep Website

Percent of Product Purchase Increase

Percent Increase in New Customer Acquisition

Our Topstep Net Promoter Score

It is everything that matters to me. It’s all about relationships, and I was really impressed with Rule29’s core team. What they did exceptionally well is manage the project. At the highest level, project management was a nine or 10 in getting the site launched on time.

Robin Simkins Vice President of Marketing, TopstepTrader

Attention to Detail

Rule29 built a full set of over two dozen custom icons to accompany various types of content across the Topstep website. With both light and dark versions, these colorful icons created a large library of visuals that can be used by the Topstep team throughout all digital and printed collateral.

Topstep Icon Designs

In Motion

Images and graphics with subtle animations throughout elevated the user experience and helped to reinforce Topstep’s commitment to pushing technology and their brand.