In a previous post (a while back) I asked about Diagram's landing page and received a few interesting suggestions. I've worked on them and added a few of my own to make my landing page easier to understand and more pleasant to use.
Here's what I've done.
- Created a product walkthrough. I firstly recorded a screencast of me building a basic API endpoint and then hired a Voice Actor from Fiverr (actually I hired 2 and picked the one that sounded more appropriate).
- Added 4 GIFs to explain the basic features. These were also screencasts but without any audio and very short in duration (7 to 20 seconds).
- Drafted an SVG in Figma with arrows that explain how data are passed over in different blocks.
- Revised SEO title (and description) so it doesn't say Landing page but "Try Diagram - The most complete Nocode API builder".
- Review the product message and improve copy that was not clear. Also sorted out a few typos.
- Remove Pricing from Landing page and sort out testimonials and FAQ
- Added Split testing with Netlify. I know have a version with a video walkthrough and a version with 4 GIFS and the SVG explainer from Figma
- Lastly, I implemented a more contrasting Call-to-action section that stands out betrer and provides more information about Diagram product proposition.
Previous version:
→ https://5f6d11ca90d94b71252ce672--happy-lamport-3e7e2c.netlify.app/
Video Version:
→ https://60515136bb231b000707d651--happy-lamport-3e7e2c.netlify.app/
GIFs + Explainer Version:
→ https://605536e4c6c9f30007463845--happy-lamport-3e7e2c.netlify.app/
So, what problem do you think my product solve? Is any video version better than the GIFs version?
PS. It's the first time I'm doing split-testing and I've used two different branches with Netlify Split testing. I also tracked the branch name in Google Analytics. So far I'm very happy with how it works.