[website] Add perpetual option to pricing page

[joserodolfofreitas]

Summary

On the last iteration of the pricing model, we stepped in the direction of creating a subscription model to have better revenue planning/expectations based on renewals. We removed access to perpetual licenses (for new customers) and created the concept of "perpetual in production" that applies to a subscription model.

Not having a perpetual license might have been one of the biggest factors impacting our sales growth, and in fact, we've seen a rise in support requests related to confusions regarding this topic. Additionally, the MUI Developer survey 2022 is trending to show that more than 70% of users care about having a perpetual license (the rate seems to be bigger between Paid customers).

Problems

• Make subscription appealing compared with Perpetual.
• Make users know that they can have a Perpetual plan to fallback, in case they feel trapped by a subscription model.
• Clear the confusion generated by our subscription model (Most competitors have only Perpetual licenses)

It’d be great if the prototype also accounts for the future possibilities:

• Standard and priority support
• Number of developers
• Custom components list (for users selecting a few components from X portfolio)

Related meetings

• https://www.notion.so/mui-org/X-General-Meeting-2022-12-16-dcbff0cc31a148b183dcb63f97ad12e8

Related issues

• https://github.com/mui/mui-store/issues/181
• https://github.com/mui/mui-store/issues/136

Design

• Figma Process
• Figma Final

Preview

https://deploy-preview-35504--material-ui.netlify.app/pricing/

Benchmarks

• https://shop.highcharts.com/
• https://store.sencha.com/
• https://www.fusioncharts.com/

[mui-bot]

Netlify deploy preview

https://deploy-preview-35504--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad) No bundle size changes

Generated by :no_entry_sign: dangerJS against 9a02ff18d1a00d36f2f356fce83d1a97a9ee4306

[gerdadesign]

Updated & consolidated info: Notion shaping page Notion project tracking page

• some feedback was done synchronously, but with different groups of people, primarily @joserodolfofreitas and @oliviertassinari. Other relevant links and meeting notes are there.

---

Draft 2

In lieu of coordinating schedules, I put together a Loom presentation (but it had to be in 3 parts 😅 for now). Loom 1 — Overview and context Loom 2 — Versions and structural options Loom 3 — Store considerations

Figma file for contextual comments

🗣 Feedback for this draft:

• preferences on page structure between version 1 and 2 (separate pricing factors section vs one section)?
• do the described interactions make sense and are they doable?
  • dynamic pricing
  • sticky bar when scrolling the detailed chart comparison
  • passing information from MUI → Store
• are we aligned on showing Subscription / Perpetual as equal options in the hierarchy, but using styling and defaults to emphasize one?
• are we aligned on showing annual price instead of monthly?
• are we aligned on removing the early bird banner at the bottom?
• any other comments around structure and hierarchy; style and detailed copy will be addressed in a following draft

[oliviertassinari]

@gerdadesign Thanks for sharing this iteration. Thought on moving forward:

1. I think that we should release a first version, that involves minimal changes, so we can quickly see the effect in the next few days. For example, if needed, I could have bandwidth the next weekend to ship the first version of the perpetual plan.
2. I left comments on the Figma file.

[joserodolfofreitas]

@oliviertassinari, I believe we have a good first step to start iterating on the details. https://deploy-preview-35504--material-ui.netlify.app/pricing/

The current solution encompasses the following:

• A switch on the Plan's boxes to keep the options contextualized and isolated from the community plan.
• The switch maintains both options visible, so they are searchable and easy to spot.
• The key information about paid plans was moved up to close the gap between the concept introduction and explanation.
• A tooltip with a short explanation of Annual and Perpetual. @gerdadesign pointed out that the use of the tooltip here is not the same pattern as of those on the pricing table (visible by hovering over a ℹ️ icon). But I'm not sure there's another practical way to display a short contextualized description for the license types.
• Currently experimenting with displaying Perpetual with full price while Annual with monthly price.

I'll leave the PR on draft for now because some parts of the code need a small refactory.

[oliviertassinari]

I have spent a few hours on this, I have pushed as far as I could, and I think that it's good enough :). I feel that it's typically the kind of changes for which we miss a design engineer, José or me going into the weed of these changes won't scale.

[gerdadesign]

Looking good so far! I made some small color and shadow adjustments for better contrast as well as more consistent hierarchy in dark. For easier Figma navigation, use cmd+click to deep select the object or frame and in the Figma right panel, select Inspect. That has all the style info. Dark mode Light mode

[gerdadesign]

Is there a value to have 3 different sections for Annual vs Perpetual? It seems like we could condense the content into one description for Annual and one for Perpetual. Or one "Annual vs Perpetual" and have a clear & concise description here. Perhaps @samuelsycamore would be helpful to tease out these copy edits? Additionally, calling out again the use of the Annual title when we show price per month. Is there a reason we want to stick with / month while also showing the Annual title?

[samuelsycamore]

Can we rethink the layout/structure of this section? This doesn't feel like the best way to convey this information, in my opinion, and the differences in length in each box leads to it feeling out of balance.

It seems like there's a lot of overlap in the content here and in the FAQs further down. I would think that this section would answer all of the FAQs. Maybe we should consolidate these two sections into one somehow? Could it all be one big FAQ (or Key Information) section?

[joserodolfofreitas]

Can we rethink the layout/structure of this section?

@samuelsycamore, happy to hear what's your proposal. I ordered and grouped them based on the main questions the customers may have after seeing the price and what I thought was a good flow of reading.

Perhaps, as @gerdadesign suggested, there's a better way to phrase/put the contrast between Annual and Perpetual.

It seems like there's a lot of overlap in the content here and in the FAQs further down. I would think that this section would answer all of the FAQs. Maybe we should consolidate these two sections into one somehow? Could it all be one big FAQ (or Key Information) section?

I don't think the overlap of content is a problem in itself if they are adding up to the same concept and not getting contradictory. The redundancy might even be beneficial if it means we reach users journeying our pricing through different angles. But I agree that there's an opportunity to improve these two sections. Maybe that's worth its own PR.

[joserodolfofreitas]

Maybe we should consolidate these two sections into one somehow?

Btw @samuelsycamore, they weren't separated before. Do you mean we should show them together as we do at https://mui.com/pricing/ currently? (And show the testimonial section only after those two)

[danilo-leal]

Jumping in here quickly, I've just pushed some changes:

• Tried to tackle the Key info section by using display: grid instead of the Grid component. By not using flex for this, I think we enable a sort of layout that might help a bit?! Y'all tell me ⎯ it's looking better to me!
• Light style tweaks to the tab (so it uses primaryDark when in dark mode).
• Light arrangement tweaks to the FAQ section ⎯ I'm hoping the content order there wasn't specific!

[oliviertassinari]

shadow adjustments for better contrast

@gerdadesign Interesting, I also feel that the contrast was a bit too light.

• [x] The shadow could help, I think to try.

It's a good idea to display Perpetual first on the widget.

@joserodolfofreitas I felt that it was making a lot more sense, it communicates to the users it's taking a step back, in terms of renewals but also updates.

I love that it has an animation when using the tabs component

I wanted to use Joy UI initially, but because of the context isolation, everything was broken. I considered MUI Base but felt that Material UI's focus indicator was going to be great. For customization, the DX with Joy UI and Material UI felt the same, I think that it really depends on which one is closer to your target. Material UI has min-width, and min-height values which made it a bit painful. The keyboard as well:

• [x] We need to fix the indicator during the first render, it flashes. Here is the initial render:

it's not the most optimized in terms of height.

This was the primary driver for the position of the blocks and the content itself inside these blocks. We can definitely try different variations but we can't have big gaps like in the screenshot.

It seems like there's a lot of overlap in the content here and in the FAQs further down

• [ ] I can find one that overlaps, with the required quantity. I think that it's OK but we can improve it, by using the same copy and making the header clearer.

they weren't separated before

The motivation to split them was two folds: 1. visual balance 2. breaking down the content to be easier to process. I think that there are 3 different things:

1. The difference between the two license types
2. Important aspects of each license type (once you understand the bug of the difference)

I think that the FAQ is great for frequent questions but that it's not good enough for very frequent questions. This feels like one of the most important aspects of pricing.