[website] Polish the pricing page #32811

oliviertassinari · 2022-05-17T17:51:39Z

A follow-up on #32458.

To close https://www.notion.so/mui-org/Update-mui-com-pricing-page-63d7053025584fa096ad954ca43b3c82.

Before
https://mui.com/pricing/

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

mui-bot · 2022-05-17T17:56:14Z

No bundle size changes

Generated by 🚫 dangerJS against 9aaa73e

docs/src/components/pricing/PricingTable.tsx

oliviertassinari · 2022-05-17T17:53:23Z

docs/src/components/pricing/PricingTable.tsx

@@ -86,8 +87,8 @@ export function PlanPrice(props: PlanPriceProps) {
          $0
        </Typography>
        <Box sx={{ width: 5 }} />
-        <Typography variant="body2" color="text.secondary">
-          – free forever.
+        <Typography variant="body2" color="text.secondary" sx={{ mt: '4px' }}>


So it feels better aligned visually?

oliviertassinari · 2022-05-17T17:53:38Z

docs/src/components/pricing/PricingTable.tsx

-        <Typography variant="body2" color="text.secondary">
-          – free forever.
+        <Typography variant="body2" color="text.secondary" sx={{ mt: '4px' }}>
+          – free forever


Wrong punctuation?

oliviertassinari · 2022-05-17T17:54:09Z

docs/src/components/pricing/PricingTable.tsx

@@ -337,7 +338,7 @@ const rowHeaders: Record<string, React.ReactNode> = {
  'MUI Base': (
    <ColumnHead
      label="MUI Base"
-      tooltip="The unstyled components and react hooks available at @mui/base."
+      tooltip="Unstyled components and react hooks available at @mui/base."


For consistency with the other description. It's also less pretentious.

docs/src/components/pricing/PricingTable.tsx

oliviertassinari · 2022-05-17T17:57:27Z

docs/src/components/pricing/PricingTable.tsx

@@ -922,11 +931,11 @@ export default function PricingTable({
      <RowHead startIcon={<IconImage name="product-core" width="28" height="28" />}>
        MUI Core (open-source)
      </RowHead>
+      {renderRow('Material UI')}


So it matches our order in

oliviertassinari · 2022-05-17T17:59:10Z

docs/src/components/pricing/WhatToExpect.tsx

+              software <strong>always</strong> need an active license. So if you wish to continue
+              active development using the software after the end of your subscription, you will
+              need to renew your subscription. You can learn more about it in{' '}
+              <Link href="https://mui.com/store/legal/mui-x-eula/">the EULA</Link>.


I have been eager to place a link to the EULA somewhere on the page for a long time. I have found one opportunity here.

I think it's nice we have it, but I was seeing this section more as a spot to advertise some advantages of using MUI X.

Like:

Continuous delivery of improvements and new features.

Effort to reach the best UX and DX.

Community driven (we listen the community pains)

Perhaps we can merge this section with "Perpetual in production" and use the free slot to expose some attractive outcomes of our efforts.

WDYT?

The initial idea of this section was to bring as much clarity as possible to avoid support questions; It was modeled after https://www.telerik.com/kendo-react-ui/pricing/. It's why the h2 is called "What to expect from our available plans". It was not meant to sell the plans but more to explain the EULA.

I'm not against addressing some of the "losses" that customers might have on the pricing page (fear of losing out) but I think that it should stay light and the page to stay clearly structured (so maybe in a new section). I believe that https://mui.com/x/ would be better suited for diving deeper in the value propositions, linked from the pricing page.

I was revisiting this and what you described sounds like a special section in the frequently asked questions. I believe "What to expect from the plans" could focus on "What you get during your license term".
So maybe "Development license" and "Volume discount" could be moved to the FAQ?

I think that these points will get less visibility on the FAQ. I have updated the h2 to "Key information about the paid plans" to encourage people to read it all.

docs/src/components/pricing/PricingTable.tsx

docs/src/components/pricing/WhatToExpect.tsx

mbrookes · 2022-05-25T21:49:03Z

docs/src/components/pricing/FAQ.tsx

-              If you need to share private information, you can{' '}
-              <Link href="mailto:x@mui.com">email us</Link>.
+              (If you need to share private information, you can{' '}
+              <Link href="mailto:x@mui.com">email</Link> us.)


Did we decide to remove this?

I'm not against keeping it in hindsight. As of now, it doesn't feel like we receive a lot of requests by email. We could create an email template to answer automatically to lost requests. For developers, knowing that there is an email they can reach in the worse of the situations could maybe make them feel more secure.

docs/src/components/pricing/PricingTable.tsx

docs/src/components/pricing/WhatToExpect.tsx

Co-authored-by: Matt <github@nospam.33m.co>

docs/src/components/pricing/WhatToExpect.tsx

mbrookes · 2022-05-30T23:17:32Z

docs/src/components/pricing/WhatToExpect.tsx

+              <Link href="https://mui.com/x/advanced-components/#support">
+                learn more about support
+              </Link>{' '}
+              in the docs. Note that, except for critical issues, e.g. security, we release bug


Suggested change

in the docs. Note that, except for critical issues, e.g. security, we release bug

in the docs. Note that, except for critical issues such as those impacting security, we release bug

We don't have enough space for this suggestion, or we would need to find a way to balance it https://deploy-preview-32811--material-ui.netlify.app/pricing/

Thanks for the feedback. I hadn't looked at it in context, but do now see the problem. In this case feel free to disregard the review.

Co-authored-by: Matt <github@nospam.33m.co>

joserodolfofreitas

I see you pulled back some changes on the plans' descriptions and +1 to that.
We already have the imperative on the CTA, so we can instead focus on the use cases for the description. I wanted to give a new try on them.

joserodolfofreitas · 2022-05-31T10:09:31Z

docs/src/components/pricing/PricingTable.tsx

@@ -18,19 +18,19 @@ const planInfo = {
  community: {
    color: 'green',
    title: 'Community',
-    description: 'Get all the MUI component libraries, MIT-licensed, open source, and open core.',
+    description:
+      'Get all the MIT-licensed MUI component libraries, including open-source and open-core code.',


I think we should capitalize on being market leaders and also I don't think the focus on the license brings much value here.

Suggested change

'Get all the MIT-licensed MUI component libraries, including open-source and open-core code.',

'The #1 UI library for fast-developing beautiful react applications.',

joserodolfofreitas · 2022-05-31T10:32:48Z

docs/src/components/pricing/PricingTable.tsx

  },
  pro: {
    color: 'blue',
    title: 'Pro',
-    description:
-      'Unlock essential features for building data-rich applications with complex use cases.',
+    description: 'Best for professional developers building enterprise or data-rich applications.',


Suggested change

description: 'Best for professional developers building enterprise or data-rich applications.',

description: 'Your go-to option for building data-rich applications with complex use cases.',

joserodolfofreitas · 2022-05-31T10:33:06Z

docs/src/components/pricing/PricingTable.tsx

  },
  premium: {
    color: 'gold',
    title: 'Premium',
    description:
-      'Access the most advanced features necessary for data-rich applications, as well as the highest priority for support.',
+      'The most advanced features for handling data-rich applications, as well as the highest priority for support.',


Suggested change

'The most advanced features for handling data-rich applications, as well as the highest priority for support.',

'The most advanced features for handling data in enterprise applications, as well as the highest priority for support.',

oliviertassinari · 2022-05-31T11:21:15Z

I see you pulled back some changes on the plans' descriptions

@joserodolfofreitas I have reverted back to what we had in https://v5-0-6.mui.com/pricing/, mostly.

oliviertassinari · 2022-05-31T16:48:18Z

I wanted to give a new try on them.

@joserodolfofreitas +1 for the initiative, however, I have reverted back to what we mostly had in https://v5-0-6.mui.com/pricing/ so it doesn't delay this PR. I think that it was better on v5.0.0 than HEAD. This way, we can iterate on it independently of the other changes here, no need to move faster than the time it takes to explore the whole problem scope.

oliviertassinari added the website Pages that are not documentation-related, marketing-focused. label May 17, 2022

oliviertassinari force-pushed the pricing-final-tweaks branch from 699912b to 4518f14 Compare May 17, 2022 17:57

oliviertassinari commented May 17, 2022

View reviewed changes

oliviertassinari marked this pull request as ready for review May 17, 2022 18:04

oliviertassinari requested review from joserodolfofreitas and mbrookes May 17, 2022 18:08

mbrookes changed the title ~~[website] Polish on the pricing page~~ [website] Polish the pricing page May 18, 2022

mbrookes reviewed May 18, 2022

View reviewed changes

docs/src/components/pricing/PricingTable.tsx Outdated Show resolved Hide resolved

mbrookes reviewed May 18, 2022

View reviewed changes

docs/src/components/pricing/PricingTable.tsx Outdated Show resolved Hide resolved

mbrookes reviewed May 18, 2022

View reviewed changes

docs/src/components/pricing/WhatToExpect.tsx Outdated Show resolved Hide resolved

mbrookes reviewed May 18, 2022

View reviewed changes

docs/src/components/pricing/WhatToExpect.tsx Outdated Show resolved Hide resolved

oliviertassinari requested a review from mbrookes May 25, 2022 10:55

mbrookes reviewed May 25, 2022

View reviewed changes

docs/src/components/pricing/PricingTable.tsx Outdated Show resolved Hide resolved

mbrookes reviewed May 25, 2022

View reviewed changes

docs/src/components/pricing/WhatToExpect.tsx Outdated Show resolved Hide resolved

mbrookes reviewed May 25, 2022

View reviewed changes

docs/src/components/pricing/WhatToExpect.tsx Outdated Show resolved Hide resolved

mbrookes reviewed May 25, 2022

View reviewed changes

docs/src/components/pricing/WhatToExpect.tsx Outdated Show resolved Hide resolved

mbrookes reviewed May 25, 2022

View reviewed changes

docs/src/components/pricing/WhatToExpect.tsx Outdated Show resolved Hide resolved

oliviertassinari and others added 10 commits May 29, 2022 01:57

[website] Polish on the pricing page

644e956

consistency with headers

f6788ab

Matt's review

99b8388

Co-authored-by: Matt <github@nospam.33m.co>

take a step back

0caf23d

put Perpetual license in production first

ff68656

easier to read

72f568e

avoid legally wording

3a0668d

make it clearer

6625052

Maintenance first

693d996

update figure

04ba1a1

oliviertassinari added 2 commits May 29, 2022 01:57

revert

2f3e42b

prefer unitless

649e9a0

oliviertassinari force-pushed the pricing-final-tweaks branch from acd9e90 to 649e9a0 Compare May 29, 2022 00:00

oliviertassinari and others added 4 commits May 29, 2022 02:00

Matt's review

3354177

Matt's review

9772c9b

Co-authored-by: Matt <github@nospam.33m.co>

Matt's review

1e733f5

mention security

84f6fc3

oliviertassinari mentioned this pull request May 29, 2022

[docs] Revise and split up "Overview" page into "Introduction" section mui/mui-x#4692

Merged

mbrookes reviewed May 30, 2022

View reviewed changes

docs/src/components/pricing/WhatToExpect.tsx Outdated Show resolved Hide resolved

mbrookes reviewed May 30, 2022

View reviewed changes

Matt's review

6569827

Co-authored-by: Matt <github@nospam.33m.co>

joserodolfofreitas reviewed May 31, 2022

View reviewed changes

oliviertassinari added 2 commits May 31, 2022 18:34

yarn prettier

602d8c5

revert to the initial wordings

8e58b6d

We used to display the SLA

9aaa73e

oliviertassinari force-pushed the pricing-final-tweaks branch from 2f606e3 to 9aaa73e Compare June 1, 2022 11:58

oliviertassinari merged commit 177af6c into mui:master Jun 1, 2022

oliviertassinari deleted the pricing-final-tweaks branch June 1, 2022 11:58

joserodolfofreitas mentioned this pull request Jun 1, 2022

[website] Shorten the plan descriptions on the pricing page #32984

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[website] Polish the pricing page #32811

[website] Polish the pricing page #32811

oliviertassinari commented May 17, 2022 •

edited

Loading

mui-bot commented May 17, 2022 •

edited

Loading

oliviertassinari May 17, 2022 •

edited

Loading

oliviertassinari May 17, 2022 •

edited by mbrookes

Loading

oliviertassinari May 17, 2022

oliviertassinari May 17, 2022

oliviertassinari May 17, 2022

joserodolfofreitas May 17, 2022

oliviertassinari May 17, 2022 •

edited

Loading

joserodolfofreitas May 24, 2022

oliviertassinari May 25, 2022

mbrookes May 25, 2022

oliviertassinari May 28, 2022

mbrookes May 30, 2022

oliviertassinari May 30, 2022

mbrookes May 30, 2022

joserodolfofreitas left a comment

joserodolfofreitas May 31, 2022

joserodolfofreitas May 31, 2022

joserodolfofreitas May 31, 2022

oliviertassinari commented May 31, 2022

oliviertassinari commented May 31, 2022 •

edited

Loading

	in the docs. Note that, except for critical issues, e.g. security, we release bug
	in the docs. Note that, except for critical issues such as those impacting security, we release bug

	'Get all the MIT-licensed MUI component libraries, including open-source and open-core code.',
	'The #1 UI library for fast-developing beautiful react applications.',

	description: 'Best for professional developers building enterprise or data-rich applications.',
	description: 'Your go-to option for building data-rich applications with complex use cases.',

	'The most advanced features for handling data-rich applications, as well as the highest priority for support.',
	'The most advanced features for handling data in enterprise applications, as well as the highest priority for support.',

[website] Polish the pricing page #32811

[website] Polish the pricing page #32811

Conversation

oliviertassinari commented May 17, 2022 • edited Loading

mui-bot commented May 17, 2022 • edited Loading

oliviertassinari May 17, 2022 • edited Loading

Choose a reason for hiding this comment

oliviertassinari May 17, 2022 • edited by mbrookes Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari May 17, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joserodolfofreitas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari commented May 31, 2022

oliviertassinari commented May 31, 2022 • edited Loading

oliviertassinari commented May 17, 2022 •

edited

Loading

mui-bot commented May 17, 2022 •

edited

Loading

oliviertassinari May 17, 2022 •

edited

Loading

oliviertassinari May 17, 2022 •

edited by mbrookes

Loading

oliviertassinari May 17, 2022 •

edited

Loading

oliviertassinari commented May 31, 2022 •

edited

Loading