Mixpanel Pricing Page

    Summary
  
  Mixpanel wanted to update their pricing page to fit their upcoming (at the time) rebranded design style, as well as create more clarity around plan types, the features they offered, and their new pricing model. We also needed to create a new plan builder experience, allowing the customer to adjust their volume, as well as select any add-ons they might want. 

Generally, I work on designs from the concept and ideation phase through final visual design and polish, however this page was in an area between product design and brand marketing, so I worked on the UI elements, and the brand marketing team added the final visual design.

Objective
Mixpanel was doing a visual rebrand, and as part of this we were updating the pricing page. There were also going to be some changes to the pricing plans, and we wanted to create clarity around what plans included which features, and how things would be billed. Part of this project was to create a flow that made sense not only for new customers, but for customers opting into the new pricing model, which was changing from events based pricing to pricing based on MTUs (monthly tracked users).

Role
I was working with a product manager and engineering team, as well as the brand marketing design team to create this experience. My function here was more as a UI designer, which is unusual for me, as I am used to working on projects through the visual design stage.

Mapping things out

There was some complexity in the pathways a user could take to end up on the pricing page. Below is a flowchart I made to keep track of what users would end up where as they made choices to upgrade/downgrade or opt in to the new pricing model. I tend to make documents like this not only to clarify my own understanding, but also to share with the team and make sure everyone is on the same page.

Wireframing

After wrapping my head around what our goals were (educating about our plans, making the transition to MTU pricing as seamless as possible), I researched pricing pages in general. Generally, pricing pages contain similar structural elements, many focusing first on the plans on offer, and then breaking down feature sets for comparison. I started out with a very basic wireframe with these elements, and then worked with the product manager to evolve it.

Evolved wireframe with copy from marketing

Final result

Here’s the free user version of where we ended up with the final design. Depending on the user’s current plan, some things on this page would change slightly to correspond with their current plan.

Building a plan

As part of this project, I also needed to design a page to allow a user to make adjustments to their plan, including adjusting their volume of MTUs and accounting for any add-on features. We needed a version of this for the marketing page, and one for the in-product “edit plan” page.

Final visual design from the brand marketing team

More information on usage

To set customers up for success in planning their MTU usage, we wanted to give them a place to see their usage data broken out by projects. That way they could get an idea of past usage and hopefully project future usage when setting up their MTU plans. To give them this insight, we added this to the overview page in their organization settings.