Updated my new landing page — Is it clear what React Milkshake really is?
Recently I launched React Milkshake (a React boilerplate), but some people told me that it wasn't really clear for people what was included in the boilerplate. I have updated the landing page and deployed previews to make this more clear. What do you think?
Splash screen feedback
Above you said you’re a boilerplate, yet your subtitle says “skip the boilerplate”. I’m not a react dev, so I’m not sure if it’s clear to your target audience, but as a UX designer I’d say I wouldn’t expect your business to be providing me with a boilerplate tool. (After reading just the splash screen content - which is what 99,9% of visitors will do before anything else) I’d work with a wording such as “much faster boilerplate” or something.
UNLESS your message is actually supposed to be “skip the boilerplate”
If that’s the case, then I’d still make some adjustments to improve the information flow:
Include the word “react” in the main title. Something along the lines of “build great ideas in react faster” and remove the React mention from the subtitle. (“ Skip the boilerplate setup and build your app faster in React Milkshake” would be a killer subtitle imo)
This way you will make it much easier for the user to understand that he’s looking at a tool which makes it easier to set up his react project faster. The first thing the user is trying to figure out when they land on your page is IF your product can get their job done.
Assuming that your target audience are react devs (and not e.g. angular devs), they’ll be able to gain trust in your website faster if you include the important pieces of info in the title, rather than if they have to fish it up from the subtitle.
—
Anyways - below are some tips you can apply no matter what the scenario above is:
CTA button “get it” needs a different label
Get it... Get what? This is making me think, trying to figure out what does it mean, which costs me time and energy I could be otherwise spending on clicking the button.
I understand that “get React Milkshake” is rather long label, so at least “get the tool”, “download demo”, “watch demo” or something more concrete would improve your click through rate.
“new firebase edition” label needs to move lower on the page
Reason is simple: the current architecture shoves this in my face before anything else - even before the title - so when I read it I don’t even know what’s it supposed to mean. And at that point frankly I don’t care. And if I don’t care, it’s annoying, costing me energy and making me more likely to click away.
Why? Because as the first thing on the site, as mentioned above, I’m asking if your tool can get my job done at all. When I figure out that it can, only then I’m asking if it can get my job done really well / better than alternatives.
You answer the question about “IF” in the title and subtitle, so I’m only interested to read about “how well” after I’ve already seen the title and subtitle.
Conclusion
I’d rate your splash screen at least 8/10, so it’s still above the average... so what I suggested above are nice finishing touches making the site more digestible. They won’t make you a millionaire, but they won’t break your business if not fixed either. However if your conversions suck anyways, I’d get back to the trenches and speak with existing and potential users to see what they are actually looking for and why they use your product and why they love it - and then use their words in your landing page content - there’s no better way of putting together amazing website copy than to learn what already made some users convert and then just wrap their words in a nice packaging.
Wow, thank you so much for this great advice! Your suggestions make so much sense. And thank you for the explanations you provided, very interesting. I'm definitely going to implement your feedback!
I like the design overall. My suggestions:
It's still not super clear what's included to me. I did the see the section where you included some features but this is the most important thing to me (and probably most devs) when choosing a boilerplate. I would move this section higher in the content hierarchy given that's the most important thing. Or you could just include some call to action that links to that section specifically and that stands out.
But making this section standout more with bigger fonts etc would help as far as clarity.
Check out this page as an example: https://pixinvent.com/demo/vuexy-vuejs-admin-dashboard-template/landing/
Thank you for you feedback! Really helpful. I will take another look at it and try to make the features more clearly. Thanks for your suggestions!
np! good luck!
Oh! Another thing you could do is under the buttons in the hero; maybe include some text that tells you what's included in a non-intrusive way. Maybe in smaller lighter text. Just some random thoughts off the top of my head
Or actually, just include in the sub-text under the headline. You could change up the copy to account for this. This way as soon as I land on the page it shows it may have what I need at first glance without having to dig that further. At that point it will have my interest.
I fear (as a developer who uses react in many scenarios) that this tool is not aimed for the correct audience. I did not look into how you were trying to create income, but many OSS devs have already claimed this space IMO. I could be wrong, but is your service to make it easier for devs to create an app, or a business? I've been in discussions about how to choose the best boilerplate , and with the Facebook team having CRA and similar boilerplate setups I am not understanding who you are trying to help.
Thank for your reply! Every time I started a new react project I was doing the same thing (setup redux with redux-saga & redux persists, routing and code splitting, etc.) and that's why I created a boilerplate (initially just for myself) that has all these things set up. I also created a simple CLI to generate most of the redux boilerplate code for me, so by running "npm run make:feature books getBooks" it will create a new "books" directory inside the "features" direcoty that has the action, reducer, saga, and service generated for me. This saves some time and in a lot of cases, this works better than typing everything yourself.
Because I found it very helpful myself, I thought there might be more people who like to save some time and start focusing on the product from day 1 when starting a new react project. Maybe it's not for everyone, but it might help some people get their project of the ground quicker.