How I Copied My Favorite SaaS Landing Page 👀

I've got some bad news...

The landing pages for your SaaS aren't finished yet. 😭

Well that's because they are never finished. 😮

As your solution grows and solves the problems of your customers, things will change. The more you talk or write about your business, you will understand how to better sell it. You will continue to add new features and refine your copy. Over time you will start to be more concise in the explanation of the benefits it provides. You stumble across new ways to present your SaaS that you haven't considered. There are endless iterations of improvements to make based on the stage of your business.

What if your target market shifted and you needed to appeal to a different demographic? Undertaking a redesign like that is more than just changing a screenshot and a couple sentences. This is where I was with my B2B SaaS, Curate, made for helping Instagram Business users with organic growth.

I was kind of happy with the current landing page that I had. It was already the 3rd iteration and I felt like I had achieved what I was going for. There were two problems though. One was that all of the screenshots were depicting the old app experience and it was just completely redesigned. The other problem was that the branding was catering to the wrong market. Previously the branding was playful, loud and less refined. It was meant to cater to the "Influencer" demographic on Instagram. Although at its core, the copy and message were clear.

It needed to appear more sophisticated, more professional and slightly enterprise to fit my new target customer. Some of the lengthy wording needed to be simplified so I could let the message speak for itself. It was also important to have a better foundation to be able to rapidly add more "landing page" style content such as use cases, feature deep dives, user interviews, competition comparisons and more.

One of the motivators for taking on this redesign challenge was that I found so much inspiration in one of my favorite SaaS companies that I follow, Canny. They help other SaaS companies track feedback to build better products. They aren't anywhere close to being the same space as Curate but I love the presentation, simplicity and effectiveness of their landing pages. The way that they present what their SaaS does is great, so great that I decided to "copy" it! Using their website as a template, I was able to go from my first commit to the production deployment and redesign all my landing pages in just 5 days.

Here are some tips for how to "copy" your favorite landing pages for your own landing page redesign.

I was introduced to a great book early in my career, The Non-Designers-Design-Book. It explains the basic principles and patterns of design, including the 4 core concepts of contrast, repetition, alignment and proximity. Understanding and recognizing these 4 principles is so helpful as a "non-designer". Even if I think I know these principles well, it's hard (impossible) for me to create beautiful landing pages and web experiences from scratch. What it does allow me to do is recognize how these principles are applied in other designs by a "designer".

Let's walk through some examples by breaking down Canny's main landing page. I study the way their video, CTA button and social proof contrast with the background. I see how they repeat the same style of subtext and helper messages throughout the site. I recognize how the alignment of the screenshots guide my eyes as a viewer. I understand the purpose of the whitespace and how the proximity of sections relate. These are simplistic examples but these principles can be applied with many different interpretations.

You aren’t really copying their branding but rather how they applied these core design principles to their landing pages. Looking at the web through a lens focused on these principles will help you recognize "good" design. It's how you can also find great examples like Canny to inspire your next redesign.

Typically when you are "copying" someone's landing pages, they are at a stage more mature than you. We can assume they have thought though everything and had at least one other person on their team review it. With this in mind, let's try to understand the intent behind their decisions. Why did they choose to have the button this big compared to the title text? Why is the contrast on the text this way for subtitles? Why did they phrase the call-to-action sentence that way?

Here is the main Canny feature page. If we break this down by the intent, you can see start to see the mentality of the designer. Each section, its look and its placement has a reason and it relates to other items on the page. It creates a natural flow for a viewer and let's you control the narrative of selling them on your solution.

Knowing the intent will make writing the copy for your particular SaaS much easier too. Selecting the best screenshots or graphics to use becomes obvious. Are they showing off a fancy screenshot to entice users to scroll down more or are they highlighting a particular feature in part of the screenshot? What emotion does it invoke when you see a particular icon they used? Are they using opacity to convey a certain message? Focus on the intent of everything.

You will naturally want to copy most things. It's easy and we know we already like it (since we picked it to copy in the first place). You shouldn't copy everything though. You want your website to have its own personality. Tweak the parts that make sense as you go along and over time it will develop its own identity. It can be something minimal like the font or the footer style. Small changes add up quickly and that's how you begin to diverge so you don't end up with the same exact website.

For Curate, it was important to keep the playful nature of Instagram and social media while increasing the professionalism. I decided that instead of using a subdued primary color like the blue that Canny uses that I would use a more vibrant purple color. Instead of thin outlined icons to describe the features, I went with using bolder Emoji's as the descriptors. Little tweaks like this help you create your own patterns to use that are more inline with your specific goals and target audience.

After a while your landing pages will develop their own voice and look. When you start to refer to how you do things and not how your initial inspiration does it then you know you are on the right track.

With most SaaS businesses, you have the main landing page, an about-us page and some feature pages. On top of that you might have a pricing page, blog, help sections, FAQ, user guides, use case examples, etc. This list can go on and on.  It's important to not try to mimic the entire website and replicate every page. Note down what new pages and sections make sense to add in the future, set them aside for now and naturally cut them out of your design.

Simplicity doesn't only come to whether or not to include additional pages. It can be the Javascript effects that a website may use or even more complex CSS styles. Don't spend a lot of your time working on making it identical to the site you are referencing. This is another way to make sure that you don't completely replicate your reference and ensure that you develop your own style.

Not getting caught up on complex visuals and staying away from adding extra pages lets you complete the redesign rather quickly. It's important to get feedback and iterate on your landing pages instead of investing a ton of time up front on something that may not pay off. If I get stuck on something for more than 30 minutes then I try to move on. After you are sure that your new landing pages are effective, you can double down and invest in adding those additional enhancements that are worthwhile.

It would be a shame if you knocked out of the park with your new design but no one saw it. If you are working on your landing pages then hopefully you have read a thing or two about SEO. You will already be in the mindset about thinking how to convert a potential customer with your copy. It's the perfect time to bake your keywords into the phrases you use.

Make sure to cover all of the usual SEO topics such as having attractive page titles, length optimized descriptions, proper header tag structure, all the right meta tags, alt properties and appropriate file names for your images, littering your keywords in the correct places, having a valid sitemap, and optimizing your loading time. I use the suite of Mangools SEO tools to help me with all things SEO like keyword finding, backlink analysis and ranking tracking.

SEO should be more of a "double check" at the end of the redesign instead of a major effort. It's important to not have a ton of bloat when it comes to copy on your website either. Everything should provide value and bring your potential customer one step closer to converting. When the viewer has many places to view the same information reworded different ways, you give up control on which way they ultimately consume it. Write a single effective explanation and guide the potential customer down the path of conversion.

If you are afraid to "copy" someone else you shouldn't be. To be honest, I didn't ask for permission prior to using my inspiration. I also didn't use any of the same icons, logos, colors, fonts or images (I would advise against ever copying assets like that). Do they look a bit similar and does some of the copy have a similar tone? Yes, but that's okay. Curate now has enough of its own style that will continue to evolve.

I would hope that if anything it's flattering. By writing about it, I get to give them props for their amazing work and maybe send some people their way that may not know about them. Canny is a fun startup to root for who are doing all the right things. I even sent this article to Sarah, one of the founders of Canny. Of course if there was anything they weren't comfortable with then I would change it immediately. They are all about helping other startups and I truly appreciate their team and product.

Next time you are browsing the web and see a really spectacular landing page then maybe you can "copy" it for your next project. With these tips in mind, you can spot the right ones and break down how to do it in no time. Don't get discouraged if your first attempt isn't pixel perfect. Having a short turnaround time gives you a chance to do it all over again if you find better inspiration in the future.

Who knows, maybe you will do such a great job that someone will "copy" you.

Good luck! ✌️