material-ui
material-ui copied to clipboard
mui
[website] Update homepage hero writing
- [x] I have followed (at least) the PR section of the contributing guide.
I've been slightly bothered by the homepage CTA for a while at this point 😅. The "Discover the Core libraries" never felt super good, more so as the Core page is super uninteresting and not a concept I think we should promote that much. Not to mention the tedious user flow for most people who are looking for Material UI: homepage → Core page → Material UI marketing page → Docs.
It's a challenge to figure out where to have the homepage link to. Ultimately, I think we could update it to echo the concept of "ecosystem" a bit more, and it does feel like a possible route here. It takes me to link to the "MUI ecosystem product" and add a handy secondary button there for the folks wanting to get to the Material UI docs quickly. Having the primary CTA link to a blog post could be weird, but it's definitely better than the Core page. We'll improve that further in the future.
I've left a couple of the other (best? 🤷) iterations I played with for the sake of sharing, but am curious to see what you all think about it. I'm slowly trying to structurally improve the homepage piece by piece. I'm happy to ditch this PR, too, if it feels like something we want to iterate more slowly/thoroughly somehow.
https://deploy-preview-40991--material-ui.netlify.app/
Netlify deploy preview
https://deploy-preview-40991--material-ui.netlify.app/
Bundle size report
No bundle size changes (Toolpad) No bundle size changes
Generated by :no_entry_sign: dangerJS against 816e2a358e9178b10247ff67b56f6533371686ff
IMO this is a pretty massive topic that impacts the company's branding and marketing as a whole. (I've seen companies smaller than MUI spend six figures for consultants to do this work alone—not saying that's what MUI needs to do, but just underscoring how valuable it is to get this stuff right.) I think we need serious marketing research and A/B testing (among other things) before deciding what to do with this copy. I know that it could be months before it'd be possible to bring the right people on, but I don't know if it makes sense to try to hash this stuff out until we have that help. I suspect we'd want to change it all over again once we do bring marketing people on board. Until then, it kind of feels like the blind leading the blind on this topic.
I agree with @samuelsycamore on this, but I also think we can find a middle ground.
This is indeed a very massive and impactful topic, yet it could benefit from some polishing. I believe there's no problem with testing an alternative version and gauging its impact. It's not a win/lose situation here; it can be an experiment. If something happens, like a decrease in clicks on the main CTA, we can revert to the previous version. We can quantify its impact and define the duration of our test, then revisit it to make a decision.
That said, I must say that I don't like how it looks. Although I appreciate the use of Material UI there—it indeed made easier accessing our main product's docs—I don't like the idea of having the main CTA, on the main section of the homepage, link to a blog post—even if it's a very good one. I believe it should link to something like company-wide docs, where we explain our ecosystem; or, we could have a page for 'solutions' or 'products' where we present our product portfolio and offer ways to choose.
Hence, I'd focus on these 'sub-pages' before changing anything on the homepage—I'd keep the Start with Material UI button, though.
I don't like the idea of having the main CTA, on the main section of the homepage, link to a blog post
Perhaps it should simply scroll the homepage to the products section?
even if it's a very good one.
It does need to be updated for new components in MUI X though...
Hey folks — revisiting this PR here given we're making a push to "deprecate" mentions to "Core" as much as possible. Having the company's homepage main CTA link to a dead/non-informative page like https://mui.com/core is not super great. We can definitely continue to iterate with the headline and overall approach here, but ever since I opened this PR, we discussed a lot more about the ecosystem approach in various meetings and pages, to which point I feel like the "A comprehensive ecosystem of React UI libraries" headline resonates a lot! It ended up being the headline we used for React Conf's banner, and it'll also be printed on React Summit's banner. So, the consistency with these assets is a +1 reason to update it. 😬
I used Matt's suggestion here and made the click event on the primary CTA just scroll down to the immediately below "Products" section. This still doesn't feel like an amazing design—I still wonder if that's the strongest CTA we could have + the "View all products" button label is not that accurate as the Products section technically doesn't display all MUI's products yet—but it is definitely better than linking to the dead Core page.
cc @colmtuite pulling you in here to get your thoughts as well!
Let me know if we can push this one out!
Just some small remarks, not exactly related to the strategy:
I like the idea of scrolling to the “Products” section. However, having the icon pointing to the right > while scrolling down feels a bit off to me 😅.
I know this isn't exactly related to this PR, but having a button within a clickable item in this section might not be the best UX. Solving this would require redesigning the section, I reckon, or adding the CTA on the right half of the page somehow, instead of within the item on the left.
I like the idea of scrolling to the “Products” section. However, having the icon pointing to the right > while scrolling down feels a bit off to me 😅.
Uhm, yeah, maybe pointing down would make sense!
I know this isn't exactly related to this PR, but having a button within a clickable item in this section might not be the best UX. Solving this would require redesigning the section, I reckon, or adding the CTA on the right half of the page somehow, instead of within the item on the left.
Would keep this separate from this PR, yeah. In any case, we're working on adding Toolpad to this section, and the changes done to do so tackle this → https://deploy-preview-38604--material-ui.netlify.app/
Scrolling to a section below seems fine to me. I would improve the link styling by adding a downward arrow icon (not a chevron, so people don't confuse it for a dropdown). It might be better to move this this link from where it is, and pin it to the bottom center of the viewport.
Somewhat unrelated: the logo grid and its corresponding text seem to be in the wrong order.
I think the main problem now is that the section we're scrolling the user to doesn't really seem to be about showcasing/listing our products. The headings are about being production-ready and boosting developer-velocity, the graphics seem to be highlighting code/APIs, the section is missing Base UI, Joy UI, Pigment CSS, and Toolpad (although I see Toolpad is being added). When I click "View all products", it doesn't make sense to me that I see this section. I expect to see a section providing a high-level overview of all products.
It might be better to move this this link from where it is, and pin it to the bottom center of the viewport.
Not sure if that's what you were picturing? Put together this quick, rough mockup here. I don't love it 😬 I wouldn't change this design right now, honestly.
Somewhat unrelated: the logo grid and its corresponding text seem to be in the wrong order. I think the main problem now is that the section we're scrolling the user to doesn't really seem to be about showcasing/listing our products. The headings are about being production-ready and boosting developer-velocity, the graphics seem to be highlighting code/APIs, the section is missing Base UI, Joy UI, Pigment CSS, and Toolpad (although I see Toolpad is being added). When I click "View all products", it doesn't make sense to me that I see this section. I expect to see a section providing a high-level overview of all products.
One improvement at a time! I'm not sure what you mean by correct order in terms of the logo grid, but I do agree with the other point about the product section as a whole. We'll get there (in another PR) 😬.
Not sure if that's what you were picturing?
Yeah like this but I'd style the link very differently. Something like this
I'm not sure what you mean by correct order in terms of the logo grid
Most of the time I see logo grids, the text is on top of the logos. It seems to make more sense to me, feels like the more natural reading direction. Examples from Loom and Netlify below:
Gotcha—this design surely works, but one consequence of it is that we'd make "Start with Material UI" the primary call to action for the org's homepage. I was sort of thinking that we should first invite the visitor to learn about the company's product portfolio and then recommend starting with the flagship product. I feel like it makes more sense to say "Start with Material" or "Get started" on the product-specific page? 🤔
Not sure, I don't have a strong opinion on it really. "View our products" doesn't really feel like a valid CTA to me, especially if it just scrolls you a few px down the page. We could just have no main CTA in the hero, that seems reasonable to me given that it's kind of just a precursor to each product's own marketing page(s).
Or we could make the Material UI link white/gray, and make the "View all products" link a pale blue, if we wanna just reduce the strength of that primary CTA.