Closed prakhargupta1 closed 1 year ago
@apedroferreira Are you expecting design for this or do you have something in mind? CC @gerdadesign
@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.
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.
Seems like it can be easily overlooked. Another option could be: we put it as a CTA that comes onhover on the video?
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:
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
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.
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.
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:
My suggestion:
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:
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.
This looks perfect!
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.
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.
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?
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]
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:
[Self-host >]
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? 🤔
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
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
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.
updated the copy at the bottom in figma
Duplicates
Latest version
Summary 💡
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.
Add Google Analytics to this button.
Example
https://usefathom.com/