Jason Gordon portrait

Jason Gordon

One line at a time

Zwift.com Redesign

Apr 01, 2020 - Jan 08, 2021

A complete redesign and rewrite of zwift.com's marketing and ecommerce sections of the website. This was a pretty huge project and took a year. The design was done by an agency and required us to "rebuild the plane while it's flying", as it were. We use Optimizely for feature flagging and roll out. Optimizely is a fantastic tool and allowed us to roll out slowly to targeted audiences. I'm really proud of the outcome of this project. The team gelled really well, management did a great job and the results show, it's a really nice website.

Myself and most of my team have been part of some pretty big site launches, not all of which went smoothly. That experience really helped during the roll out of this project. It is the smoothest launch of a project of this magnitude in my career. I personally had near 0 stress. Everything was properly tested, then carefully, deliberately rolled out, observed, then rolled out to a bit larger audience.

Check it out here: https://www.zwift.com.

This project is built with:

  • Figma: Pretty descent UI/UX design and collaboration tool. There is a lot of competition for this type of tool and I can't say it's the best of breed, but it worked pretty well. Really good for collaboration because of its web application.
  • Prismic: Headless CMS system. If I had my choice, I would use either Contentful or ContentStack for headless CMS system. The choice between these systems probably comes down to team specific workflow as they're very similar. Prismic isn't quite production ready, and will probably never been an enterprise scale tool.
  • NodeJS with ExpressJS: The go to tools for front end web serving these days. Great tools due to their simplicity, reliability, and easy of use. The only thing that, for me personally, would be an improvement to working in these tools is a very lightweight framework to enforce conventions.
  • NextJS: The go to tool for server side rendering currently. We've had a difficult time with this tool for myriad reasons. What this tools solves is not an easy problem to solve. Overall, I'd recommend it, but things go sideways pretty fast outside of its happy path use case. I think it'll keep improving though.
  • Redis: I love this tool. We use AWS ElastiCache for Redis which makes the ordeal of cache system reliability pretty trivial. I love AWS, I love Redis, these tools make my life so much easier, and help me sleep at night. Worth every penny.
  • React: Most popular front end framework. I'm torn between this one and Angular still, but React is way faster to get moving with. Way easier to make a mess though.
  • Home page
  • Other types of slices
  • Side nav drawer
  • Shop landing page