Stripe 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, 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 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.

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) — 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 — 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 — MILLIONS of users who use their products 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 it gets, or show off every single product feature it can think of. These things almost have the 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 I had worked out in my head before even starting. Stripe’s actual hero is notoriously cool, especially with the wave animation. But I really wanted to communicate something more… human? As I mentioned, 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 “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 — I started with a more true rendition of Stripe’s design, 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. 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 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 a concept — 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. One section I loved was “The backbone of global commerce” — I always scrolled back to that one. So I essentially rebuilt it in my version and turned it into a nice editorial-style section.

The particle animations surprisingly weren’t too hard to build, and they’re pretty close to the quality of Stripe’s. I picked one backdrop I really liked and ran with it — 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 rectangle framed onto the page, and I thought it was beautiful. A happy mistake. Last was to add in the text elements, the cherry on top — a mix of inspiration from Apple, OpenAI, and modern print editorials.

Okay, finally we’re at the end. This section wraps it all up and acts as the final CTA 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 we earned their trust.

I had an idea for a “sandwich” layout 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 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 made for some of the notable companies using Stripe — realistic images with the parallelogram shape snuck in. This one was made for Hertz, but I used it as the hero image and framed the CTA inside the logo.

You’ll also notice the brazen logo carousel. I did feel we should include a more obvious, trust-building carousel somewhere — I tucked a small one in the main hero, and a larger one felt right at the bottom. And the footer… I didn’t do much work on it, but it’s at least better than that encyclopedia Stripe has on theirs.