Stripe Landing Page Redesign (Unofficial)

Original Redesign

I’ve fallen in love with web design, and crafting/tailoring a web experience that users will resonate with and enjoy. I take a lot of pride in capturing the essence of the company, person, whatever I’m designing the website for.

After building Bird Dog and UI Playground, and realizing how much I loved product/web design, and I really wanted a challenge. I wanted to take something that was widely considered “perfect” or “the gold standard” and see if I could do better… and I think I did.

I knew that in the tech/startup space - Stripe was considered THE BEST website/landing page. I had seen plenty of videos online of design walkthroughs etc. of Stripe’s website, and witnessed all of the tech nerds drooling over it. So I went to their site to take a closer look, and wouldn’t you know… they just launched a fresh redesign… perfect timing. And now my challenge just became even harder, but onwards I went.

So above is Stripe’s fresh new landing page… what is widely considered to be the gold standard for a SaaS landing page. If you’re not in the know, startup founders’ kryptonite is making a landing page that converts, it’s like a big deal… for real.

My initial reaction to the site was genuinely that it was way too overwhelming and that I had no idea what Stripe actually was/did after scrolling through. Obviously I know what Stripe is, but when I try to look through the lens of someone with little to no prior knowledge of the company, I was shocked at how little the site actually serviced them. It is an endless pit of attention grabbing animations (impressive animations tho) and information dumps, etc.

The main issue in this regard is that Stripe has become something HUGE. They have so many products and offerings (good for them) that it’s almost impossible to make a landing page that can communicate all of it effectively, and identify what YOU as the user are even looking for. It’s a mess.

The other main issue, and this one is particularly interesting, is that Stripe becoming the gold standard for a SaaS landing page has started to actually become an issue for them. Other SaaS companies have taken notes from the Stripe playbook (blurple, logo carousels, animations, etc.) — so much so that every SaaS nowadays has a landing page that looks like an offspring of Stripe’s… My thinking was “Stripe’s landing page looks no different than a small, new SaaS startup’s landing page…”

The last issue I have energy to write about right now is similar to what I just said - A company as big and successful as Stripe SHOULD NOT HAVE A WEBSITE THAT LOOKS LIKE ANY OTHER STARTUP! I mean seriously, Stripe’s whole landing page is full of things that say “look at me!” “Look at what I can do!” “Spend money on me!” - Cmon… we’re past that now.

And don’t even get me started on that horrible footer.

Okay, now that all of that is off my chest, we can get into my redesign.

There are a few “pillars” I wanted to work around:

1. Make the landing page simpler, but still capture Stripe’s playfulness.
2. Emphasize the human element! Stripe has what no fresh SaaS has… they have MILLIONS of users who use their product(s) every day in so many cool and different ways - let’s highlight that.
3. Trim the fat. We don’t want a bottomless pit of info and animations. Reduce it to what is necessary to communicate what Stripe is, how Stripe can help you, and convert the user.
4. Whisper, don’t shout. A company like Stripe does not need to flaunt logos every chance they get, or show off every single product feature they can think of. Yes, you want to convince a potential customer, but these things almost have an opposite effect when you reach a certain level of growth… ya know?

I think the final product came out really good. Take the time to open the actual site and scroll through it! There’s some fun little easter eggs.

The hero section was naturally the first idea that I had worked out in my head before even starting. Stripe’s actual hero section is notoriously cool, especially with the wave animation. But I really wanted to communicate something more… human? As I mentioned before, one of Stripe’s most powerful assets is that they have millions of REAL users who use their products every day. Highlighting “Stripe moments” felt like a good way to connect to a potential user. Maybe they could see themselves reflected in one of the clips.

I love the animation of the “Get started” button - I really took a liking to Stripe’s parallelogram logo and wanted to incorporate it in some fun ways.

I put the “Trusted By” section tucked away on the bottom right because this is where the concept of “whisper, don’t shout” comes into play. It’s there, people will see it and be impressed, but it doesn’t need to do the work for us.

The “Why Stripe?” Section took me the longest, even though it looks the simplest visually. I had originally built out a section very similar to Stripe’s bento style section under their hero, with a bunch of animated cards. That sucked. And that is where this airy, light design framework was really born from. I started with a more true rendition of Stripe’s design, and then ended up going the complete opposite direction, and I’m happy I did.

The job of this section is to literally answer “why Stripe?”

It can be applied to whatever you’re building: a SaaS, an on demand product, e-commerce, etc.

It works at 10 customers, and it works at 10 million.

And we know you’re worried about the things that might go wrong… but we already thought of those and handle them ourselves.

This was all meant to almost read the user’s mind… “will this work for X?” “what happens if Y?” “Can it handle Z?” I tried to answer all of those questions before the user can even finish their thought.

I love the airy design of this section. The mix of images, editorial style text, and animations (that were incredibly hard to build lol) all tie in together really well. I also really enjoy the scroll triggered color fill of the globe, and how the GDP stat line sort of slots right in at the bottom.

The integration section was a surprising win - I really struggled to think of an idea/concept for this section. All I knew was that I wanted to communicate that with one simple integration, you had access to a whole suite of products.

After mulling ideas over for a day or two, I decided to just go to the source. Even though I had criticisms of Stripe’s site, there were some really well done elements and sections. One section in particular that I loved was “The backbone of global commerce” section… I always scrolled back to that one. So I essentially rebuilt that section in my version and turned it into a nice editorial style section.

The particle animations surprisingly weren’t too hard to build and they are pretty close to the quality of Stripe’s. I decided to just pick one backdrop that I really liked and run with that - and I landed on this “sunrise” color palette.

The funny part is that when building this section I accidentally made the canvas too small… the whole thing was supposed to be full bleed across the page, but it came out as this sort of rectangle framed onto the page, and I thought it was beautiful. A happy mistake.

Last was to add in the text elements, which was the cherry on top. I feel like I got a lot of inspiration from a mix of places like Apple, OpenAI, and modern print editorials/magazines. It’s tough to pinpoint, but the text elements sort of just came to me, I sketched it out, and felt it was perfect.

Okay finally we’re at the end. This section is supposed to wrap it all up and act as the final CTA (call to action) for the user. We had our initial CTA in the hero, but maybe they weren’t convinced and wanted to scroll… this is where we try to convert if they feel like we earned their trust.

I sort of had an idea of a “sandwich” style layout for the site that I feel like I don’t see often. Most sites have a hero, sections to scroll through, and then a lousy closing section. What if we added in a really nice closing hero? I love it, and I don’t know why it isn’t more common.

On Stripe’s site I also really enjoyed the images they had made for some of the notable companies using Stripe. They were realistic images with the parallelogram shape snuck in there. This one in particular was made for Hertz, but I decided to use it as the hero image and frame the CTA inside the logo.

You’ll also notice the brazen logo carousel… I did feel like we should include a more obvious, trust-building, carousel somewhere in the landing page. I tucked it away in the main hero, and I did end up feeling that a larger carousel felt right at the bottom of the page.

And the footer… I didn’t do much work on the footer, but it’s at least better than that encyclopedia that Stripe has on their site.