DevTools Website Design Principles

How to Design Your Homepage and Navigation to Maximize Conversions

A DevTool startup’s home page serves as its front door, providing the first impression to potential customers. Effective website navigation is crucial for ensuring visitors can easily find the information they need on the homepage, leading to higher engagement and conversion rates.

However, many startups struggle with designing intuitive navigation structures. Common issues include overly complex menus, poorly organized content, and a lack of clear pathways for different user personas. These problems can frustrate users, causing them to abandon the site and, ultimately, the product.

So, how can startups create a navigation structure that is both simple and effective, catering to the diverse needs of their users?

Gonto provides principles for crafting effective website navigation. Drawing on insights from top DevTools websites and practical examples, Martin outlines strategies and tactics that can help startups design navigation systems that enhance user experience and drive engagement.

1. Design the Homepage for All Users

Your homepage hero should cater to a wide audience, including developers, and decision-makers from potential customers. The navigation is critical, as it is the first thing people see and interact with. Therefore, when designing the homepage, it should be structured to ensure that it addresses the needs of everyone who visits. This means providing a comprehensive overview of your company's work while directing users to specific sections tailored to their unique roles.

The idea is that the hero section targets everyone broadly  —  both developers and directors of engineering, or any of your target roles within the organization  —  but each subsequent section should focus on ONE specific persona. 

For example, If you target developers, there must be a section that includes code. The higher up, the more you show you care about them; because they’ll see content that includes code snippets and API calls, demonstrating that their needs are understood and prioritized. Then, the following sections might focus on high-level benefits and more relevant features for decision-makers.

Stripe’s homepage exemplifies this approach beautifully. It is designed to speak to a broad audience by showcasing how the app looks and works, which appeals to a general business audience. It also includes sections highlighting specific functionalities and code examples, catering directly to developers. 

The inclusion of interactive elements and animations engages users, while different sections focus on varying user needs — from detailed product information to high-level overviews suitable for directors and managers. By ensuring that every part of the homepage is tailored to a different user group, Stripe effectively communicates its value to all visitors.

2. Show Programming Language and Framework Fit

Displaying which programming languages and frameworks your tools support is crucial for developers. From my experience, 50% of a developer tool’s Product Market Fit is Programming Language and Framework fit; so you better show it, high on your homepage!

Developers buy products so they don't have to implement them themselves and do it faster. Having a good Programming Language and Framework fit makes them feel a lot more confident that they'll be able to accelerate using this product. Whether featured in the navigation or prominently on the homepage, this detail can significantly enhance your conversions.

Developers primarily care about two things once they understand the cool features of your product: compatibility and ease of implementation. They want to know if your product works well with the specific programming languages and frameworks they use. Examples of companies that do this well include Algolia, Vercel, and Strapi.

For instance, if you visit Vercel's website and scroll through its pages, you'll find templates for technologies like Svelte, Next.js, and others, clearly showcasing the supported frameworks. On their rendering page, Vercel uses logos of the technologies, which developers instantly recognize, to indicate compatibility.

Similarly, Strapi's website prominently displays the technologies it supports as you navigate through the homepage. This visibility ensures developers understand which frameworks and languages are compatible with Strapi from the get-go.

Algolia also excels in this area. Despite having a more enterprise-focused site, Algolia lists the main technologies they support, showing how their product integrates with various frameworks. This approach reassures developers about the ease of implementation with provided SDKs.

Including this information either on the homepage or in the navigation helps clarify your product's focus and compatibility. It's also beneficial to demonstrate how easy it is to implement your product with SDKs. Algolia, for example, effectively shows implementation details, helping developers visualize how they can use the product within their tech stack.

3. Product or Platform Sections Target Developers

When designing your menu navigation, you must always include a section specifically labeled "Product" or "Platform." While the terminology may vary, the focus should remain the same — targeting developers and showcasing your product. This section should never be aimed at decision-makers but should instead cater to the quick-scanning nature of developers. They need to understand at a glance what your product offers.

As we mentioned before, developers often "hover" over website sections, looking for specific technical details rather than reading through extensive text. I’ve learned about this behavior from watching hours of FullStory and Hotjar web recordings. 

It’s also because devs are productivity- and time-obsessed, and they hate to switch between mouse and keyboard. That’s why developer-first tools like Raycast or Linear have built-in keyboard shortcuts

This behavior underscores the importance of designing product sections that are clear, concise, animated; and provide quick links to essential docs and technical specs.

First, developers hover around the whole page to grasp the whole of the product and then dive deeper if they feel it's a fit for them. That’s why having a product or feature name with explanations hidden behind a click is not "hover" friendly, as you’ll force developers to click to learn more.

Strapi’s navigation is an excellent example of this principle in action. Their product section is meticulously organized to address developers' needs efficiently. Each product offering is accompanied by a brief description, allowing developers to quickly grasp what each component entails.

For instance, a glance at Strapi’s site reveals that they offer a community edition that is open source, an enterprise solution, numerous integrations through a marketplace, and a hosted solution. Developers can easily identify key features such as roles and permissions, content translation, and a UI builder.

Need help to create your DevTools website? Our team has led marketing at the likes of Vercel, Strapi, MotherDuck, and more! Let’s work together on your Developer Marketing strategy.

4. Solutions Pages Target Decision Makers

Solutions sections on your website should be designed primarily for decision makers such as directors of engineering, VPs of engineering, and other similar roles. The key focus here is on relatability rather than discoverability. Instead of crafting content with the sole intent of making it discoverable in Google, or having some specific SEO Keywords, aim to make it highly relatable to the specific needs and challenges faced by these decision-makers.

When a developer sends a link to a director of engineering or a VP, the recipient should immediately see how your product addresses real-world problems relevant to their industry and use case. Again, this is not about having the right keywords for search engines, but about showcasing relatable examples and success stories that resonate with developers. Because developers want to feel that your product is tailored SPECIFICALLY for them.

Vercel provides a great example of this approach. Their solutions pages emphasize different business challenges tailored to their target industries, making it easy for decision-makers to see how the platform can benefit their specific operations. For instance, when you navigate to Vercel's solutions section, you can find examples such as support for Web Apps, platform engineering teams, composable commerce for e-commerce, building AI applications, and providing multi-site insights. This clear categorization helps potential clients quickly identify the value Vercel can bring to their specific context.

By highlighting how your product helps companies similar to theirs, whether through industry-specific solutions or use-case examples, you make it easy for decision-makers to envision your product as a fitting solution to their problems. Additionally, including a variety of specific industries and use cases can further enhance relatability and make your solutions pages even more compelling.

5. The Need for a Developer-Specific Section

When designing your navigation, an important question to consider is whether developers are your main persona. Based on this determination, you can decide whether to include a dedicated developer section in your navigation. 

If developers are your primary audience, particularly in the early stages of your company, it’s better not to have a dedicated developer section. This approach signals that your entire site is tailored to developers, ensuring they don't feel sidelined by having to navigate to a specific section just for them. Instead, content relevant to developers should be seamlessly integrated throughout your site, making it clear that developers are your main focus.

However, if your company has grown and moved upmarket, targeting enterprise clients alongside developers, including a developer section can be beneficial. This dedicated section provides a clear and convenient place for developers to find all the technical resources they need, such as documentation, APIs, SDKs, and other developer tools. It also indicates to developers that, while your site caters to a broader audience, their needs are still a priority.

Examples illustrate this approach well. 

LaunchDarkly effectively targets developers on its homepage, focusing on feature flags and continuous delivery without isolating developer-specific content into a separate section. 

On the other hand, companies like Storyblok initially did not have a dedicated developer section reflecting their primary focus on developers as their main audience.  Since then, it has evolved to include a developer section as it expanded its target market to include more enterprise clients.

In another case, even when the developer remains your main persona, you might "forget" about them as you grow and target enterprise customers. NewRelic is a good example of how they unconsciously forgot developers are the main persona and their entire website changed based on that.

For companies where the developer is not the main persona or where the focus has shifted, having a developer section helps organize the content. When a separate developer section is absent, it's common to have navigation items like "Docs" or "Resources," which developers can use to access the necessary documentation, APIs, and SDKs.

6. Maintain Transparent Pricing

Transparent pricing is a cornerstone of building trust with potential customers, particularly developers. When developers visit your site, they want to see clear, straightforward pricing information to quickly understand the cost and value of your product. Without transparent pricing, developers may become skeptical about your product's credibility and hesitate to adopt it.

It’s important to note that while you don’t need to display your enterprise pricing, you should at least provide clear details on your self-service or credit card pricing. This transparency reassures developers that your product is accessible and within reach, making them more likely to consider it for their projects. Pricing should be easily accessible from the main navigation, allowing developers to find this crucial information without hassle.

For example, Vercel’s pricing page is an excellent model of transparency. It clearly outlines the costs associated with different tiers of service, from free plans to premium options. This straightforward approach allows users to quickly grasp the value proposition and decide which plan suits their needs.

By placing pricing information prominently in the navigation, you ensure that developers can quickly access and evaluate it. This practice not only builds trust but also facilitates quicker decision-making, as potential customers can immediately understand what they are committing to financially.

7. Design as a Feature

The design of your homepage and website should be a standout feature in itself. A visually appealing, modern design can significantly enhance user engagement and perception, making your product more attractive to potential users. In recent years, the trend has leaned towards cool and futuristic designs, exemplified by websites like Upstash and ScaleAI, which use striking colors and sleek layouts to create a high-tech feel.

However, as this trend becomes ubiquitous, it may no longer differentiate your site as effectively. Instead, consider adopting a unique design approach that sets your site apart. For example, MotherDuck has successfully bucked the trend by opting for a vintage aesthetic. This distinctive design evokes a sense of nostalgia and uniqueness, making the website memorable and engaging for developers. It’s reminiscent of a spaceship or retro sci-fi theme, providing a refreshing contrast to the typical futuristic designs.

Moreover, it's crucial to embrace the principle of "show, don't tell" in both your navigation and homepage design. This means demonstrating how things work through visuals and examples rather than just describing them. For instance, use interactive elements, animations, and real-time demonstrations to show your product's capabilities and features in action. This approach is far more effective in engaging users and helping them understand your product's value.

Snyk’s homepage is a prime example of leveraging sleek, modern design to capture attention and convey a sense of innovation and reliability. By incorporating these design principles, you can create a homepage that not only looks good but also provides a compelling user experience.

Closing Thoughts

In conclusion, Gonto's advice on structuring website navigation for startups focuses on simplicity, product-focused organization, prominent use cases, clear visuals, skimmable content, interactive case studies, strong visual hooks, adaptability to different user needs, and consistency. These strategies help create a user-friendly and effective website navigation structure.