I've seen many people talk about how good Stripe's landing page has always been and it's been a source of inspiration for many.
In today's teardown we'll learn about Stripe's landing page and see what pointer's we can implement on our landing page as well.
Suggestion: If possible try to open the respective landing page simultaneously which you can refer while reading this newsletter.
#1 Header/Hero Section
The landing page of Stripe begins with a strong header section with the headline "Payments infrastructure for the internet", if you read it carefully you'll notice that it targets the whole digital business space and not some small niche.
Next in the sub-headline section, it starts with a creditable statement which subconsciously tells the visitor about Stripe's creditability.
Also in the end there isn't just one CTA, they have a quick sign-up button for people who already are impressed and "contact sales" for big-ticket clients of those who still have doubts.
#2 Top Users
Just on a minor scroll, you'll find a stack of logos from various well-known businesses in the industry.
This again helps Stripe to build creditability by showcasing that brands like Slack have found Stripe to be a perfect solution for them.
#3 Body (about products)
This the part where they showcase and talk about their service as a payment gateway. Also, they try to portrait that they have a wide acceptance of payment solutions.
If you notice the illustrations carefully then you'll see that they have used the logos of their users here as well, this done to show the visitor that how their solutions look at the users(customer) end.
#4 Body (developer-oriented)
Stripe has always been the first choice of developers and it's a known fact that they want to retain that position.
The section begins with a tiny text which specifies the target audience for whom the section is intended for.
As it's oriented to developers, the CTA here is a link to their docs(which again is the best in the industry), they also provide a glance of how their API works so developers can have a rough understanding.
#5 Body (why Stripe)
Whenever people buy some product or service, they all have one question in common. "Why this provider and not the other", though Stripe is a leader in the industry it still has to answer it so people don't start looking for other options.
#6 Body (abilities and creditability)
This is the final part of the body which gives the final touch to all the information regarding their capabilities, reach and presence.
Have a look at the image below for a better understanding.
#7 Pre-Footer
I remember reading Rob Hope's book on landing page and it said that this section should be reserved for pre-purchase questions.
Stripe kind of does the same thing.
They link to their landing page for "Payments" and also link to their pricing and docs which people can refer to before on-boarding.
#8 Footer
Stripe has the most basic footer, something I like to call vanilla footer. It's no bs and just data and links.
This is a nice move as this acts for the navigation section for people who have scrolled this far.
The designers at Stripe understand that if someone has scrolled this far then they surely are looking for some more data.
Summary
Stripe is a giant and one simply can't just copy everything neither do I suggest that but there are surely some pointers one can note down.
Write a bold and clear headline.
Add logo or testimonial of top customers(use tools like Testimonial or VideoAsk for that).
Add actual product images or illustrations about the offering.
Use the footer as navigation if you want to keep your navbar clean.
Hope you guys have loved this week's teardown and feel free to reply with your thought on the same.
Also if you want to suggest a website for our next teardown then do let me know by replying to this e-mail.
