<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=2354469448132396&amp;ev=PageView&amp;noscript=1">

Growth Driven Design: Treating SaaS Website Design Like It's A Product

How do you increase the performance of your website? Growth driven design is an agile approach to development. Treating your SaaS website design like a product will increase your conversion rate
Written By

John Aikin

Published On

February 19, 2020

Copied!

Most of the people that we talk with day in and day out are VPs of marketing, marketing directors, or startup CEOs for SaaS companies. John recently sat down with Luke Summerfield from HubSpot, pioneer of Growth-Driven Design, to chat through how to treat your SaaS website design like it's a product, utilizing your website across multiple departments, and more. Here are some of the highlights!

What Is Growth-Driven Design?

Luke: We've talked a lot in the past about Growth-Driven Design. For those of you not familiar with growth-driven design, it's a modern playbook for building a peak performing website. And that all came about before my time at HubSpot from another marketing agency I worked at who was also working with SaaS businesses. Every single time we were just running into problems with the website getting delivered late, taking forever, going over budget, etc.

And so I thought about it like "man, why is it an industry standard to have all these problems with websites," and "What's the root cause of some of those things," and "What other industries might have figured those things out already."

The answer you're looking for has already probably been answered somewhere else in some other industry, you just have to go find it. And so in this case, the answer was actually quite easy to find. I started thinking about the world of software and the world of the 1990 software where you're, you're basically building CDs, right? So you would have a big, a big team working their butts off for 1-2 years to release Microsoft 95. And then you'd shoot the thing out the door and you'd go back into your little backroom bubble and start chugging away on Microsoft 98. And that was how software was made.

For those of you living in the SaaS world today, we understand that is the worst way to build software these days. You know we are much better off building something, hosting it online, continuously improving it, getting a minimum viable product out there, and then adding to it over time.

Building Your SaaS Website Like A SaaS Product

And so in the software world, in the early 2000s, of course we made the shift to a SaaS based model. And that also sparked a lot of change in how teams are structured, how we thought about collecting data, what data could we collect, and how do we use that to inform what we build next from a product standpoint. So in looking back, there are a lot of parallels with how great SaaS website design is treated compared to the world of building CDs in the software world.

A lot of what growth-driven design is, is just simply inspired by the things that we've learned in the software world - that means treating your website just like a software product.

For many SaaS professionals, you have a product manager, you have a tech lead, you have a lead designer. In your product design, you typically do UX research, you're continuously iterating on your product, you launch betas, and more.

All of these things that we've learned like how to structure teams, how to treat products, how to use the backlog, how your product manager should own that backlog... We can apply to a website, thinking about your website like a product itself.

And so that's what you see with a lot of the high performing software companies these days. This is how HubSpot treats their website. This is how, you know, obviously Google and Twitter are treating their content as well.

Here's the interesting thing though: the lines between what a website is and what software is, is blurred. They're blurring. I think there's a pretty good case on whether certain websites are a website or are they actually full blown pieces of software. Even down to the languages that the coders are using. Everyone's moving to JavaScript now where you have, you know, the front end is all built out on node JS, whether it's a website or whether it's a software.

Using A Design System To Unify Your Brand Experience

John: We talk to people all the time about that, like that user experience of the way people perceive your brand and experience your brand prior to becoming a customer. It should be a seamless process once they start using your product. And so I think companies like Spotify and HubSpot and some of these bigger companies, they do a great job of that.

You can explore their website, but you feel like you're on the app itself. You feel like you're using their product and it's like it's no different. You enter the product and you just feel like you've been a part of that same experience. That's extremely critical for customers to feel that. You can start with product screenshots, matching consistencies with design elements like buttons, colors, fonts, etc., and so much more. 

Luke: Yeah and one of the things that we did on that topic specifically that really turned the corner in terms of that experience was about three years ago we (HubSpot) invested in really heavily aligning all of our design teams. That's the marketing design team - That's the software design team - Everyone across the board to rally around building a design system, which we call ours canvas.

The idea of a design system is that you have a unified set of elements that roll up to content blocks, that roll up into pages, that roll up into websites. Those same elements roll up into areas within the product and within the tool itself.

So we're using one standard set of elements between multiple teams, and we just have the standard canvas system. For those who know of Invision App, they do a ton of really good stuff around design system. I think I just saw on their website they're now positioning their actual app as a design system management app.

It's worth it three years later to see the impact that building this design system has had in terms of the consistencies between teams and then extending that through to our brand team. They then take that design system and turn it into PowerPoint slides and into CTAs and campaigns and just keeps everything super consistent.

John: I actually love Invision. I think they're just a brilliant company and one of the best examples of using nurturing in their marketing. I love their emails. I think they are so clever and they're filled with great information. Talk about understanding your buyer persona! They put out just amazing content, and I want to read every email that comes through!

Launch Early, Fail Fast, And Iterate On What You Learn

John: Let's talk about the importance of launching early and failing fast. That's a "mantra" we say in our studio. It's really important for us to not get caught up in perfection. And some of our clients find that this concept is hard for them because they see their website as their brand and it's like their baby. But we have to always remind them that you want to know if what you're doing is gonna work or not. So do you have anything you can add to that?

Luke: I think the takeaway that everyone should have is that we just gave you a little tactic, kind of, on the "design system" thing. Here's the actual concept: I would implore everyone to shift the way they think about their website, and go sit with your product teams to learn how they build this peak performing product within your company, and I would apply those principles to your website.

When you talk to your product team, they probably don't wait until the thing is absolutely perfect before they push it out into the user's hands. And the reality is, you're never going to get to perfect. The only way to get even close to perfect or even make progress towards perfect, is to get it out there and then iterate off of it afterwards.

So, very much like your product team who's building the software product, getting it out into the hands of users and having a continuous roadmap over time that's prioritized as they work on the software is how you have to think about your website.

And the cool thing about that is if you approach it with that mentality of "Hey, we're going to get this first version out, and we know it's not going to be perfect but that's okay. We know we don't have to get everything in there, but we're working and operating in a system that allows us to continually improve it over the next 3, 6, 12 months." That relieves some of the anxiety, pressure and need for it to be perfect out the door.

We see that with traditional website design. You know, traditionally when you build a website it's this huge 6 month, 8 month long project that goes over budget. You launch the thing and then you're like, "all right, I'm done. We're moving on to all this other stuff." We've kind of trained ourselves to have that level of anxiety that it needs to be absolutely perfect and all the features need to be built right out of the gate. Otherwise we're never going to get to them or we're going to have to wait until our next redesign. We have to shift the mindset on how you think about the website and hopefully that will alleviate some of the anxiety of it needing to be perfect out of the gate.

Secondly, it really comes down to having a stellar strategist or product manager who can advise on what that right mix is to start with and why you're consciously deciding to wait until the first month or the second month to tackle the next thing on the wishlist. It takes a good product manager or strategists to understand that you have the business objectives on one side and you've got user pain and what the user's trying to do on the other. They have to balance both

John: We do a lot of migrations to HubSpot, and that migration might be a part of a bigger website project. Phase one might be a brand new user experience on the homepage and a demo page, but it might also include all the migrated content which is now branded with the new header and footer. Maybe we just stylized the fonts and other CSS concerns.

Lot's of room for improvement and words of advice from a SaaS website design agency

So that about does it for Growth Driven Design! This is not just about SaaS web development, either. If you're doing ecommerce web designs or even just a Shopify homepage, it's important to understand the components of an agile approach and how it will benefit your brand. And if you're working with distribution through social media software, how can you start to incorporate social into this world? Start adding things to the backlog of your product management software, and really kick this into high gear!

These SaaS website examples are just the start... This is only part 1 of the interview with Luke Summerfield. For the full interview, be sure to listen to the podcast on Spotify and Apple Podcasts. And