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.
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.
What should a website do?
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.
Thinking through a rebrand
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.
Limitations of the existing stack
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.
Decision on Next.js
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.
