Allow users to explore online demo from the landing page

[prakhargupta1]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

1. A 'Try now' type of CTA would be needed for users to quickly explore Toolpad. Ideally we should let users see the demo video and then show an option to try Toolpad, but then it will be too hidden.

2. Add Google Analytics to this button.

Example

https://usefathom.com/

[prakhargupta1]

@apedroferreira Are you expecting design for this or do you have something in mind? CC @gerdadesign

[apedroferreira]

@prakhargupta1 This is separate from what I've been doing, I've just been preparing the demo in the Toolpad app itself, not the landing page (yet). So anyone could take this issue.

A design would be helpful for sure, but if it's not possible we can always try to figure something out.

[gerdadesign]

Here are a couple screenshots of light & dark landing page options with the "Try demo" button. As discussed, this is almost in the same hierarchy of importance as the email sign up.

• CTA text "Try demo" in the secondary button style matching the pricing page.
• added additional spacing between the chunks of information. (looks like we are using 30px bottom margin between paragraph text and button group.
• We can stick with "Sign up" for the email CTA or we can try testing different copy (such as "Get access"). This is because we say "Sign up" in the text right above it. I've noticed some different wording throughout other early release sites and here is a compilation of a few different options.
• This also has an updated video sizing + fallback screenshot
• And reflects the changes we discussed about bringing the promo banner closer to the features. Moving this also updates the alternating background colors on the page.

Figma link

[prakhargupta1]

Seems like it can be easily overlooked. Another option could be: we put it as a CTA that comes onhover on the video?

[gerdadesign]

Ideally, we would have both buttons on the same line, like this:

But with the email subscription text field being separate, it kind of looks muddy.

I think putting it on top of the video would be even less discoverable as well as break expected behaviour of a play/pause button appearing on hover of the video.

What if we could make the Sign Up CTA dynamic (and shorter confirmation copy)? Kind of like this:

[prakhargupta1]

2nd one looks great. Let's do this.

Just giving a heads-up, In the next iteration when we'll update the video with new UI, we'll also bring up the self-host button. https://github.com/mui/mui-toolpad/issues/1132

[bharatkashyap]

To me, these two CTAs are sequential - almost everyone would first want to Try the demo, and only then choose to Sign Up or not. How do we represent this hierarchy in the landing page?

One idea is to only show the "Try Demo" CTA in the first instance, and replace it with the Sign Up CTA once it has been clicked - since the user will be redirected to a separate tab and then only choose to Sign Up when they return to the landing page.

[gerdadesign]

Thanks for the feedback! I talked with Sam about this as well from a copy perspective and I think it comes back to the core issue of hierarchy here. We have two things we want people to do — those two things are both important, but not directly related to one another. It keeps feeling off because these separate asks don't really fit into the usual 2-button primary/secondary pairing since they're about two different things.

It's important to be clear about what the main action is that you want people to take. We have flip-flopped on this a bit, but it seems getting an email sign up is more valuable than someone clicking out to a demo and potentially not coming back to the landing page.

How would we feel about the demo button sitting on top of the video (not on hover, but permanently)? This makes the video itself secondary, but the movement can bring attention to the button. That would also make it not hidden behind hover on mobile as well.

[prakhargupta1]

Permanently showing a button on the video will make the video appear like a GIF that we don't want the user to focus on. I feel we should give 'Try Demo' more importance than 'sign-up' because:

1. If only, users experience and like the demo they would think about signing up.
2. A user who won't like the demo won't sign up anyway.
3. There would be hardly any user who'll give their email ID before checking out the demo. Also, near Try demo we should mention 'No account creation required.'

My suggestion:

1. Show 'Try demo' as primary button. It should not go away after 1st instance.
2. Show 'Sign up' as secondary button adjacent to 1. On hover, it should show email input field (similar behavior on mobile)
3. Copy can be trimmed to: 'Sign up for beta release'

For later, when we'll alter the header bar. 2 buttons in the header bar is a common practice. So in place of the search bar we can show 'Try demo' button and also bring up 'Self host' button as:

1. Search is irrelevant for Toolpad
2. A primary, secondary button pair would look good.

[gerdadesign]

How about this? keeping the email button open and with extra space around Demo to separate the ideas from one another.

I did think that when we initially talked about the v1 of the landing page, we would eventually have an interactive demo within the page that people would not have to click out to a new page. If that were the case, then perhaps the previous version would work better.

[prakhargupta1]

This looks perfect!

[bharatkashyap]

Should we also add a button that links to the GitHub repository alongside the button that takes users to the demo?

We haven't placed any other way to get to the code on the landing page - I think it might go with the idea of being open-source.

[gerdadesign]

I agree that open source is an important aspect to communicate. We have "open-source" written in the intro and below the features, the upvote button leads to github. Is there something outside of these that you feel is missing?

I'm hesitant to add a 3rd CTA in the top header as that can feel overwhelming and confusing — ex. I land on this page to learn about this new thing called Toolpad, read a short summary of what this product is, then see that there are multiple immediate links out of the page, so I may not come back to it.

[bharatkashyap]

I agree that open source is an important aspect to communicate. We have "open-source" written in the intro and below the features, the upvote button leads to github. Is there something outside of these that you feel is missing?

I'm hesitant to add a 3rd CTA in the top header as that can feel overwhelming and confusing — ex. I land on this page to learn about this new thing called Toolpad, read a short summary of what this product is, then see that there are multiple immediate links out of the page, so I may not come back to it.

Fair enough!

Also, do we update the "Want to try it first?" copy on the self-host section now, given that there is an option to try it without self-hosting?

[prakhargupta1]

Also, do we update the "Want to try it first?" copy on the self-host section now, given that there is an option to try it without self-hosting?

Good point! Some suggestion: Liked the demo and want to explore further? Install Toolpad alpha securely. [Self-host]

[gerdadesign]

agreed about updating the copy!

I looked at how retool and appsmith described self-host vs cloud and the mention "infrastructure" A LOT. Perhaps we want to play off the same key word? My (condensed) suggestion:

Try Toolpad on your own infrastructure.

[Self-host >]

[bytasv]

Just a few cents from my own perspective - when I read infrastructure, something more complex comes to my mind, I would never call my own laptop "infrastructure" 🤔 I was thinking that something along the lines of "Setup Toolpad on your local machine" maybe would better indicate that it should be fairly easy? 🤔

[gerdadesign]

Hmm what if we went with a more colloquial header, but kept "infrastructure" as a keyword. I'm honestly not sure if it makes a huge difference in search or ranking, but it's a common keyword (along with "on-premise") I'm seeing across Retool, Appsmith, Budibase, Superblocks, etc so it may be a good word to include for comparison? Interested if there are any data points around this! Would also appreciate if you have any insight, @samuelsycamore !

I'm also noticing that others go in depth about the benefits and features of self-hosting vs cloud, especially for enterprise customers. Perhaps we should build out the page the CTA brings you to a bit: https://mui.com/toolpad/getting-started/installation/

VS https://retool.com/self-hosted/ https://docs.appsmith.com/getting-started/setup https://docs.superblocks.com/on-premise-agent/overview https://docs.budibase.com/docs/hosting-methods

[bharatkashyap]

Hmm what if we went with a more colloquial header, but kept "infrastructure" as a keyword. I'm honestly not sure if it makes a huge difference in search or ranking, but it's a common keyword (along with "on-premise") I'm seeing across Retool, Appsmith, Budibase, Superblocks, etc so it may be a good word to include for comparison? Interested if there are any data points around this! Would also appreciate if you have any insight, @samuelsycamore !

I'm also noticing that others go in depth about the benefits and features of self-hosting vs cloud, especially for enterprise customers. Perhaps we should build out the page the CTA brings you to a bit: https://mui.com/toolpad/getting-started/installation/

VS https://retool.com/self-hosted/ https://docs.appsmith.com/getting-started/setup https://docs.superblocks.com/on-premise-agent/overview https://docs.budibase.com/docs/hosting-methods

I feel like the subtitle here almost looks like a pitch for the enterprise version of Toolpad whereas the intention for us right now is to convert an individual developer who is intrigued enough by the landing page into a member of the community.

So I think, something like "Try out the alpha version on your own infrastructure and start contributing to Toolpad" could make more sense for the subtitle

[prakhargupta1]

Although, Infrastructure is applicable for enterprise companies where they have their own servers on a private network, I think it is an accepted term. Used along with self-host conveys the meaning.

So I think, something like "Try out the alpha version on your own infrastructure and start contributing to Toolpad" could make more sense for the subtitle.

I don't think it is relevant at this place maybe we can write it somewhere else. Also, currently, 'open-source' isn't being shown properly. We can do this all together.

Copy for subtitle: Using Docker, you can host Toolpad on your own secure infrastructure. I mentioned Docker as it quickly explains how you can install it.

[gerdadesign]

updated the copy at the bottom in figma