DoP Deep - Homepage UX explored
How modern tech companies like Intercom, Grammarly, Linear, OpenAI, ElevenLabs and others are crafting homepages
🔒DoP Deep goes deeper into the concepts and ideas that are covered in the Weekly Briefing to help you learn lessons from the experiences of top tech companies. If you’d like to upgrade to receive them you can do so below. Or you can find out more about what you get as a paid subscriber here.
Hi product people👋,
Intercom recently won lots of praise for the rollout of its modern, fresh homepage. And despite the rise of keyword optimised landing pages and content marketing as the first entry points to many products, a well crafted homepage is still the most powerful way to create a first impression.
In this Deep dive, we’re going to explore in-depth the homepage UX of top tier tech companies including the registration methods they offer, navigational styles, components, button CTAs and more. We’ll also aggregate some of the key new design trends and patterns across the companies we feature.
If you’re working on a homepage refresh for your own product, you can use this to help shape the direction of your own homepage, too.
Coming up:
Assessment criteria explained - how this analysis is structured
A deep dive into the featured homepage examples including: Intercom, ElevenLabs, Figma, Linear, Rippling, Grammarly, DuoLingo and others
How to design a homepage in 2024 - key takeaways and trends explored
The homepage analysis for all 20+ companies featured in full
How this analysis is structured
To help us understand how companies are designing their homepages in 2024, we’ve structured this analysis to include various different attributes.
The attributes chosen for each of the homepages includes:
Hero headline text - how are companies articulating their value propositions in their hero sections? These can be used as inspiration for your own product’s hero headline where necessary.
UX components - what are the UX components of interest that are used on modern homepages? Autoplaying video embeds, interactive product feature demo components, carousels, homepage sliders and more. We’ll take a closer look at some of the more innovative ones worth knowing about.
Navigation styles - what navigational styles are companies using? The so-called ‘pill’ design for navigation has become popular recently, for example. We’ll categorise navigational styles including: pills, sidebars, sticky, transparent, horizontal and whether the navigation disappears on scroll.
Sign up / registration options - what options are companies using to allow users to sign up with? The number of sign up options used by companies has grown significantly over the past few years to include: Google, Facebook, Apple, Amazon, Stripe, Slack and more. Each company’s sign up options are included to help you understand what some of the most popular sign up options on the market are today.
Primary and secondary button CTAs - what language is used as the primary and secondary CTAs? Some companies have started experimenting with putting product pricing inside the CTA, for example. We’ll share the new trends worth knowing.
Live chat - some companies offer live chat on their homepages - we’ll tell you which ones do and which ones don’t.
New design patterns and trends - what are some of the interesting design patterns companies are deploying? This includes things like: the use of generative AI, animated gifs, textured backgrounds, scrolling marquees and more.
As well as specific breakdowns for each homepage, we’ve summarized some of the key takeaways for product teams to help shape building your own homepage.
The full list of each of the featured companies with examples of their homepages is available at the end of this post.
Company homepage deep dives
Before we dig into the first company, a quick note on companies we’ve chosen.
In this deep dive, we’ve chosen top tier tech companies across a wide variety of industries with a mix of B2B SaaS and B2C consumer products to get an understanding of some of the different tactics deployed by each company.
Let’s start with Grammarly.