Devtool home pages - 10 best practice approaches

Devtool home pages - 10 best practice approaches

We see a lot of developer tools at Console. We get to try out hundreds of interesting products each month, and that also means we land on stacks of landing pages for products targeting developers each month.

While a great landing page won’t improve a poor product, a bad landing page can seriously impact the trajectory of a good tool. An underwhelming or confusing home page can mis-sell a product or worse drive a developer or prospective VC away.

There’s no raw data behind these recommendations from specific A/B or multivariate tests. Optimising your landing page over time is good practice, but having somewhere to start is important too! These are the things we consistently see successful dev tools adopting, and some of the approaches we’ve seen applied by some of the most popular dev tools we’ve featured on Console.

Know your audience

You’re targeting developers, but what type of developer? A CTO or a junior engineer? A developer looking to solve an internal problem quickly, or perhaps someone looking to integrate your product into the core of their business. Every decision you make planning your home page should be through the lens of the persona for your target audience, aligning your messaging and branding to fit your target customer.

Rowy (one of our investments) offer a low-code backend on Google Cloud and Firebase. Clearly outlining what they do, leaves engineers in no doubt what to expect.

Keep copy simple

Your tool may be super complex but aim to keep your messaging simple. Clearly outline your product’s core proposition. Is your product a pain killer of a vitamin? State what you do and what makes you unique. The fewer the words the better. Above all explain concepts in simple terms, and create a hierarchy for your messaging keeping your core selling point and call to action above the fold.

Datadog has a lot of complicated products but manages to distill its core offering in just a few words.

Vercel pitches its product in just three words.

Invest in design

How does your home page make an engineer feel? A good landing page should immediately excite and engage.

Branding within the dev tools space has come a long way in the last few years. The quality of your design reflects the quality of the developer experience. A polished design builds trust in your product.

Similar to consumer markets, design trends tend to converge on similar styles that become the predominant aesthetic for a market and become self-reinforcing. Love it or hate it, these trends inevitably need to be respected as developers come to your product with pre-defined expectations. No surprises, but dark mode is a major trend within the dev tools community that should be respected.

Lastly, check your analytics, but my guess is most of your traffic is on desktop.  The dev tools space is one of the few parts of the web where your website will receive significantly more traffic on desktop compared to mobile. Ensure your landing page is mobile-friendly, but design primarily for desktop users.

Read more about our thoughts on shaping your brand identity here.

Warp's clean fonts, smart product demo animations and rich dark mode aesthetic is a masterclass in elegant dev tools design.

Show your personality

Don’t be afraid to inject some idiosyncrasies and personality into your landing page, so long as it is true to your brand. This can be through your copy or design. This is particularly important for tools in oversaturated categories where standing out can be more challenging.

Check out this copy! Atlassian's home page copy has oodles of personality.

Snaplet's (one of our investments) idiosyncratic design is fun and memorable.

CTA's everywhere

Your landing page should be directing a developer towards a single action - typically to sign up and start using your tool. Your design should place a focus on your primary call to action (CTA) above the fold with clear instructional copy.

Leave nothing to guesswork. Incorporate further CTAs throughout your landing page, leaving no doubt what the next step is and how to action it. Always include a recovery CTA at the bottom of your landing page.

Hashicorp's Terraform Cloud product offers a clear and prominent CTA on their landing page.

Clear supporting navigation

While the primary goal is to get an engineer straight into your product, they may want to do some extra research before committing. With this in mind, make it easy for developers to access your:

• Documentation
• GitHub profile (where appropriate)
• Pricing information
• About page
• Community support

This is the information developers will prioritise when researching your company, as such, aim to include this within your primary navigation.

Clean prominent navigation from Replay to the information most sought after by developers.

Keep it moving

Few developers will ever read your entire landing page. Rather they will start to scroll (quickly), and in the few seconds they scan your page build a sense of what you’re about and what you offer.

With this in mind, try to incorporate visual indicators that continue to draw the eye downwards. These cues can include literal pointers like arrows as well as animations that provide dynamism to your page.

Start scrolling on Strapi's homepage and it is hard to stop thanks to their interactive UI.

Preview your product

Most developer tools are a black box. Until you create an account, it is hard to know what to expect. Providing a product walkthrough or demo on your website is useful, but on the homepage, you should focus on giving just enough flavour of your tool to excite a developer.

Provide screenshots or short animations of the product that start answering some of the immediate questions an engineer might have about your tool. What does the interface look like, and how does it deal with common problems your tool solves? Where possible, try to incorporate real screenshots or your product rather than abstracted images.

Liveblocks (one of our investments) provide a simple but effective preview of their product

Build trust

Give an engineer confidence that your product works and that they are rational in their decision to invest time or money in your product.

Incorporate trust signals into your landing page that help tell the story of your product and business that gives an engineer the confidence to invest their time or money in your product. No one trust signal will convince a developer to sign-up but layered together across your landing page, they compound to present a coherent and reassuring picture of your product and company. Smart approaches include:

• Showcasing companies that use your product.
• Revealing the number of people that already use your product.
• Publishing the number of stars you have on GitHub.
• Providing case studies or testimonials from customers.
• Promoting awards that your tool has received.
• Include third-party ratings and reviews.
• Showing off your expertise in your category through white papers, technical posts and content marketing.
• Creating communities for developers such as Discord or Slack channels.
• Referencing major fundraising rounds.
• Including easy access to customer support contacts.
• Providing clear navigation to your company mission and team profiles.

GitHub showcases some impressive statistics regarding the size of its audience to build trust with new site visitors.

Sourcegraph prominently shows off some of its biggest clients.

Don’t forget about SEO

Whether your devtool fits within an established category with a mature level of search traffic or within an emerging category with a small but growing number of searches, you’re going to want to benefit from search traffic over time.

Ensure you follow SEO landing page best practices, aligning your h1 and intro paragraphs to match a developer's search intent. For a good primer, check out Brian Dean's on-page SEO guide.