The new Mixpanel.com: How to marry design with the right tech stack

Over the past year, the design, brand, and engineering teams at Mixpanel have been working hard on a complete overhaul of how the world experiences us: our website.

This is the new look and feel that we wound up with 👇

How did we get there? As part of the engineering team that helped push our new site into the world, I’d love to walk you through it—with a special focus on the way we married a great design vision with the right tech stack to bring it to life.

But even before any code was tapped out, this multi-team process started with a look at where we’ve been, where we are going, and, importantly, how we get there.

Anywhere that you don’t access Mixpanel with an activated account—the homepage, our customer gallery, our pricing page, our plan builder—had to be rethought, reorganized, and built again from the ground up. If we wanted to clarify who we are, how we communicate, and what we offer, we knew it would take a hard look from a diverse mix of individuals across the company.

In addition to this large, blue sky of brand messaging and design, we knew early on that we’d have to adapt on the technical side in order to live up to this vision, whatever it ended up looking like. This meant rethinking our WordPress-powered stack.

While a WordPress setup was a good fit for our old website experience, we decided it was time to get fully invested across the board and build exactly what we needed for our new design. We’d have to hire and bring in UI engineers from other teams at Mixpanel that specialized in challenging user experiences. We also knew that performance, maintainability, and a rapid release cycle were key to the success of building a product we could all be proud of.

Amir, our CEO at Mixpanel, has shared his thoughts on our new vision. The most important thing we wanted to resonate in our new site was what differentiated us from our competition: our belief that analytics is for everybody. Whether you are a VP of Product at a Fortune 500 company or an owner of a corner deli, you care about what your customers are doing and how your business is performing. And while we are proud of the core features and costs that Mixpanel offers over others, we know that only Mixpanel can offer the key to backing this up: a great user experience.

In order to get this vision across in our new look and feel, we had to permeate deep across the team at every level. For branding and UI design teams to be able to execute it effectively, the engineering team had to start fresh with this goal in mind, down the foundations of our platform of choice, who built it, and how.

As our vision expanded, we started to feel the constraints of the WordPress front-end. The site was complex, slow on new cache hits, and every template depended on CMS queries. If that weren’t enough, the codebase, developed externally, was built in languages and frameworks our broader engineering team had no plans to ever support, leaving us in a precarious position if anything ever went wrong. Equally as important, it was simply not an environment where engineers at Mixpanel could fully apply their skills to execute our UI design team’s vision.

It was time for a change.

After exploring a few options, we chose Next.js as our platform of choice, and we could not have felt better about this decision. This modern framework allowed us to create a statically exported site, which not only meant it could be instantly more efficient in delivering fast pages, but it could also give our developers the freedom to iterate with our design team quickly and effectively.

We began by focusing on the Next.js development infrastructure within our existing developer lifecycle. Our vision was for this new app to be environment-agnostic, catering to the varied preferences of our developers while also adhering to the broader Mixpanel engineering guidelines and culture. A big part of how we work together at Mixpanel is a fully remote, around-the-world team. This pushed us to create adaptable environments that let developers work from anywhere—whether it’s on a local computer or a developer’s bespoke staging environment.

Something else important to us was building and maintaining a proper design system, a piece of the puzzle considered fundamental to both the design and engineering teams. Across code, Figma, and beyond, it allowed us to build a solid foundation for our user interface, eliminating duplication, inconsistency, and confusion. It also helped provide a means of organizing our work and allowing us to focus on solving real problems rather than fighting ones we’ve already created. To this end, we heavily relied on Storybook to share our work with the design team and enforce quality with unit testing.

Ultimately, we spent nearly nine months together building the code for this new version of Mixpanel.com.

Putting on our nerd glasses for a moment, here are our favorite things about the new app:

We’ve got the old version beat by both perceived and actual performance. In terms of DOM Interactive, DOM loaded, and TTFB, the new pages we’ve built are up to 100% faster than before! This means fewer bounces, more page interaction, and an overall smoother user experience.

Instead of spending time rolling our own combination of webpack, babel, React, TypeScript, and Sass—with all the tedious decision-making that comes with that—we spent time on more challenging problems. This allowed us to go from a PHP and jQuery app straight to isomorphic React and TypeScript with very little configuration from us. Instead, we could sweat the details on things like leveraging GreenSock for scroll animations and matter.js for implementing a physics engine in key parts of the experience.

Because of how Storybook allowed us to collaborate closely with our design team, our design system (Heliograph) is launch-ready for publishing with the rest of the team at Mixpanel—and perhaps, one day, the world! Look out for it in the rest of the Mixpanel experience.

Scroll-based animations using Greensock.

As we work to wrap things up on this new version of Mixpanel.com, we’re excited to apply it to other projects we have in store across the logged-out experience. We’ve already moved parts of our documentation to a similar stack, and we’re planning on even more transitions throughout Mixpanel.

One of our favorite things about this wild ride was the freedom to start with a totally clean slate. Mixpanel has been around for a while, and like any startup, lots of legacy decisions and libraries accumulate throughout the product. We needed a lightning-fast, modern stack of our own choosing—and our infrastructure team was happy to help us achieve it.

If solving problems like this sounds as fun to you as it was for us to live out for the past few months, join us on the Mixpanel engineering team!