header design principles for growth

By In Growth Marketing

6 Design Principle for SaaS Growth Marketers ( Part I )

Growth marketers are arguably the trash pandas of the SaaS world.

Our strength relies on our ability to be inventive and scrappy. We constantly have to create something out of nothing (almost) and we collect information from other departments.

We are constantly going in other departments’ “garbage bins”, be it Design, Sales, Customer Support.

In the last couple of years, more dependencies appeared, with Customer Success, Product, Business Intelligence.

Among them, the least scalable and the one that requires the most attention is marketing <> design. 

The most successful SaaS companies today are design-led. The design process and the overall delivered experience is an important factor in business strategy.

It’s also the least automated and repeatable area of the business. It relies heavily on inspiration, creativity and research. It will take a while until we’ll have an AI that can possess those traits. 

This is why I propose to go through some design principles that have applicable use cases in SaaS. This is part 1 of what will be a 3 or 4 part ( hopefully ).

Prospecting for gold

Today’s gold prospecting method are still relying on geology to find this rare and precious metal. Same as a hundred years ago.

Analyzing soil or water from deep underground for traces of gold is still the most reliable way to prospect. But it became an overused method that began to have diminishing returns.

But lately, an idea “birthed” in 1940 but never used until now. You can map out the mineral concentrations in a leaf to unearth the potential that lies beneath.

Simple concept, but ignored for a long time.

It hasn’t captured the attention of prospectors who were confortaable with their returns from geological studies. Until now.

Growth draws its sap from multiple areas of study like design, marketing, and product development. 

Traditional discovered growth methodology still works but it has diminishing returns and true growth needs continuous innovation to be effective.

It’s time for you to search for some growth marketing gold in other areas of expertise.

I’ve prepared 6 design principles that growth marketers can assimilate and implement in their SaaS growth strategy.

1. Hick’s law

The most uncomplicated and most powerful of UX laws in my opinion. 

The time it takes to make a decision increases with the number and complexity of choices.

The more choices you present your users with, the longer it will take them to reach a decision. It can easily be brushed off as common sense but it’s often neglected in the rush to cram functionality or information.

Another issue that’s creeping up with added complexity in decision making is the fact that beyond a critical point, it starts to negatively impact perceived value. 

simplicitycomplexitiy-model
Value / Complexity Model

After a certain point, complexity starts becoming more of a weakness and less of a strength.

It reminds me of a study from Dan Ariely, which looked at two groups of couples. In one group they were asked to say 3 things they loved about their significant one. In the other group, they were asked to say 10 things.

What he noticed was that the people that were asked to think of more things to say struggled and felt incompetent. They started to question their relationship and their feelings.

Adding complexity or information overload toward a simple action. This could make certain important steps in the customer journey like activation or figuring out what plan to purchase seem like complex tasks to perform.

You want to avoid making your users feel incompetent needlessly.

A great example of Hick’s law in action, in my opinion, is the UI of Miro. It just limits the number of actionable elements you can see at a first glance to what’s basic and most common.

They are layering the complexity of the UI.

This strategy helps on making the initial interaction with the interface a bit less intimidating and the initial decision making as simple as possible.

Miro’s user inteface

Another example, Figma has done a beautiful job of minimizing the amount of noise and options a user is exposed on their pricing page.

Figma’s pricing page

Complexity should be hidden and accessible in layers, depending on use case.

In comparison with Figma, the MURAL pricing page looks a lot busier.

MURAL’s pricing page

You have shortcut links at the top that take you to other parts of the page.

There are long lists of features and different visual elements the user needs to pay attention to make a qualified decision.

This deadly combination not only increases the average time spent on page but also adds unnecessary complexity to the decision making.

It’s easy to get caught up in the enthusiasm. All features are important and beautiful.

You need to invest some time into qualitative and quantitative research to find out who’s your ideal customer and what are the top 5 most important features in the moment of purchase.

Of course, designers don’t use Hick’s Law in isolation. It’s always combined with other principles to make it more effective.

2. Miller’s Law & Chunking

The term chunk refers to a unit of information in short-term memory – a word, or a series of numbers. Information that is chunked is easier to remember.

Grouping units of information makes it easier to process and remember.

For example, most people cannot remember a ten-digit number for more than 30 seconds. However, by breaking the number into three chunks ( such as a phone number ) recall performance is equivalent to recalling one 5-digit number.

The original estimate of the maximum number of chunks that can be efficiently processed and recalled was 7±2. The modern estimate is 4±1 chunks.

This capacity for keeping ~7 bits of information ‘in the head’ short term, is known as Miller’s Law.

For growth marketers, this type of principle can be applied in so many areas from landing pages, to sign up, onboarding, pricing, and so on.

Trello-Onboarding
Trello’s first step in the onboarding process

Trello’s onboarding process is the best example of chunking the set up of a new account with 5 individual steps packed with actionable information. 

Very simple, guided walkthrough that splits the information so it doesn’t become too overwhelming. 

Human short-term memory is limited, so if you want your users to retain more information, pack information into meaningful chunks.

Let’s look at two examples of pricing pages that use the same layout.

This is the free offer from ConvertKit. There’s a long unordered list of 11 features. 

Some users will have a hard time remembering what are all the different features they get. 

Basecamp did a better job of chunking the various features into clearly defined blocks of information.

And notice they also limited the number of features to nine. 

This improves the clarity and the cognitive load required to remember the offer. 

Chunking your content makes it seem less complicated or confusing, which won’t make the user feel incompetent. 

Chunking is critical for presenting information in a way that users can comprehend and remember easily.

The main takeaway from this principle is that, regardless of situation, if you have ton of useful information it is better to chunk it down.

To improve your user experience you want to focus on:

Layering complexity – Chunking down long or complex processes into screens with fewer options.

Categorizing options – Enabling users to go from a top-level category and work their way to more granular options as they click through. 

3. Von Restorff Effect a.k.a the isolation effect

Designers have been using this one for ages to guide user interactions on web or product UX. 

The Von Restorff effect argues that when a user is presented with multiple similar choices, the one that differs from the others will have a more memorable impact.

Look at the 4 circles above. Out of all the objects, the red circle stands out the most and is the most memorable. 

It has lots of distinctive features from color to additional elements.

The most familiar application of the Von Restorff effect I could give you would be the “Recommended” plan on the pricing page. 

Front’s pricing plans

Front’s pricing plan is a great example of the Von Restorff effect in action. The Prime plan is elegantly pushed forward through the use of distinctive colors.

If there are too many distinctive elements in the same picture, the isolation effect does not apply anymore. 

Have you found Waldo ?!

You can check out the pricing page from Monday.com. The multitude of electric colors and the lego blocks illustration on the Enterprise plan cancels each other out. Their Most Popular plan is not that memorable or noteworthy anymore.

The isolation effect can manifest itself in multiple forms. It can be color, shape, highlight, spacing, or typographic emphasis ( underlining, bold/italic).

The isolation effect can be used to great success in experimentation, in order to focus the attention of the user to a desired action or piece of information. 

Think of it like guidance in an open world game. They can click anywhere on the website or in the app, but you want to highlight certain objectives that are important to their journey.

Notion takes advantage of the Von Restorff effect in their Workspace creation flow.

Creating a new workspace in Notion

You can clearly see Templates is the preferred route to take when you start fresh.

Webflow also makes great use of isolation through icons and color in their template library.

Webflow’s template library

You can use the isolation effect to great success in order to guide the attention of the user to important information or actions.

Overall, I would love to see this design principle used more in onboarding and activation flows. It could be very effective, especially if it’s coupled with other principles.

4. Affordance and Signifiers

In Don Norman’s The Design of Everyday Things (DOET), he argues that objects should be thought of in terms of affordances.

That is, “the relationship between the properties of an object and the capabilities of the agent [ the user ] that determine just how the object could possibly be used.

The fact that a chair fulfills the role of a chair depends if it has the characteristics that are allowing us to sit on it and that those characteristics are equally accessible and intuitive.

Why would you care about affordance?

Simply put, when affordances are good, your SaaS is intuitive and efficient. When affordances are bad, things are hard to use and it results in low engagement and high churn.

In UX design we have a limited array of affordances. Depending on the device you are on you can click, drag, tap or swipe.

There are several types of affordances:

Pattern Affordance

This type of affordance is created by conventions and habit forming. Text that is underlined and sometimes of a different color can be a link, the logo in the upper left side is usually a button for the homepage. If you’ve used a smartphone before you’d probably be familiarized with the swipe motion.

bugsnag pattern affordance link
Bugsnag’s product page snippet

Bugsnag’s product page has almost 9 different features explained. It would look overwhelming and distracting if they would have put buttons to each in order to read more

They’ve decided to highlight the links more elegantly through a different colour and an additional element.

Another pattern used in design quite frequently lately is giving the logo the affordanace to take the user to a default page.

Explicit Affordance

Actions that are pretty obvious because they offer enough signifiers to communicate the expected action from the user – a button of a distinctive color labeled “+ invite members”.

Trello’s board UI

From this screenshot of a Trello board, you can clearly see that the plus element, the text “add another list”, suggest the button can afford clicking to create another list like the ones before.

False Affordance

False affordances are misleading in the actions they should perform or having no affordance at all. Usually, an element should convey a single affordance. 

Usually, you can see it on sign-up pages that have the sign-up button accessible and pushable. It would convey the affordance of being pushed but you would not get anywhere because you might have entered or missed vital steps in the signup process.

chartmogul-admin-page
ChartMogul’s Admin page

You can’t really get to the dashboard easily from the Admin page in ChartMogul

That could easily be fixed by offering the logo image the pattern affordance of taking users to the default dashboard.

Here are some common scenarios of false affordance:

  • an element that looks like it can be actionable or it’s traditionally actionable, but can’t be;
  • a logo image that does not return the user to the default page/state;
  • a word that displays the pattern affordances of a link but it isn’t a link;
  • a green button or checkmark (a pattern to signify the affordance of creating something) actually has the opposite effect;
  • A cogwheel icon, which seems to afford accessing the settings page, actually opens up your email client in order to contact support.

To find false affordances in your product, try using click tracking heatmaps. That way, you’ll identify potential elements that users click on that have no affordance. 

Remember, most customer misuse come out of your pocket.

Having false affordances or unintuitive points in the customer journey creates frustration and decreases the chances that the users will be retained. 

Hidden Affordance

You need to hover over the specific element to uncover the set of actions you can perform. These types of actions are secondary to the rest of the explicit affordances in the UI. 

It’s a clever way of prioritizing the focus in a complex user interface and you don’t want to overwhelm the user ( especially if the SaaS product has horizontal adoption in a company, wink wink productivity tools ).

In their onboarding set up, Notion cleverly hides functionality by using the hover-over effect on checklist items.

Negative Affordance

This is used to emphasize the lack of affordance of an element; an inactive button or link that is grayed out. The most common use case is the sign-up button that is grayed out until fields are completed.

Amplitude’s sign up modal

Another use case is to up-sell on extra functionality in the case of freemium and free trial SaaS products. You can expose the user to the existence and place in the UI of certain features that are not available on the current plan.

The title wasn’t coincidental. I insisted on adding signifiers because I feel like they are as important if not even more important than affordance.

Also, while researching this topic I found a lot of confusion among UX designers regarding the relationship between affordance and signifiers.

Signifiers are labels, colors, and icons that surround and bring the affordance to life and give it meaning and purpose. I recon, signifiers play a huge role in SaaS as ways to increase adoption and engagement.

signifiers-and-affordance

Also, signifiers should be a great part of your growth experimentation going forward.

Labels are text that signifies an element’s purpose. Think of button CTAs – “get started”, “try for free”, “learn more”, “add filter”

Color is used to put emphasis on an actionable element, so it is distinguished among other elements without affordance. You should be consistent with the color patterns that signify affordance through the platform. 

TravelPerk’s sign-up page

In this example from TravelPerk, you can see the sign-up form displays a different color for steps that are already complete and uneditable.

You can also use pattern recognition in signifiers to trick people as well. As we can see in this example from Letsbuild.

signifier-letsbuild-notification
Letsbuild’s homepage

Green is the go-to color for most of their desired actionable elements on their website. And I’m 99% sure it’s not their purpose to make people avoid their own notifications.

They are banking on years of pavlovian conditioning to avoid the desired action and go with the other option when it comes to notification allowance.

Icons create pattern recognition and communicate an explicit affordance for a certain element. Icons also give you the ability to communicate multiple affordances.

In the case of Asana, affordance of the element is to click and create a new project and there are 2 signifiers to suggest that action, a label and an icon.

The dotted line rectangle is a common pattern used to signify placeholders and the plus sign nudges the user towards adding something.

Leadfeeder’s homepage

You can see in the case of Leadfeeder, they are using a combination of color, label, and icon. The red dot reminiscent of the notification for new messages or social interactions appeals to our instincts from years of habit-forming on Facebook.

Overall, you can use this knowledge of affordance and signifiers to remove and simplify potential hurdles in the signup and activation process.

5. Cognitive dissonance

Cognitive dissonance appears when someone’s values, beliefs, or behaviors contradict each other. From the homepage and sign-up up to payment and renewal, you will have to find and resolve cognitive dissonance in your funnel. 

For example, there’s cognitive dissonance between wanting to create an account for a freemium product and being uncomfortable with a sign-up form that requires too much personal information.

Front’s sign-up page

Front’s sign-up page is trying to remove possible cognitive dissonance create by the added requirement of the phone number by adding copy meant to reduce friction – length of the trial, no cc, cancel anytime.

I don’t think you can ever completely remove cognitive dissonance, but you can lower it. Especially in the most common places in the funnel that are inherently riddled with cognitive dissonance. 

cognitive-dissonance-customer-journey

When users get into a state of cognitive dissonance, they try to bridge this gap between incompatible ideas or beliefs.

You can look at your customer journey as a roller coaster of cognitive dissonance and identify areas where you can intervene to lower the friction.

6. Aesthetic-usability effect

Simply put, aesthetic things are perceived to be easier to use than ugly things. This is something we recurrently see in SaaS that rocks the freemium strategy. 

It’s important to note that this is a subjective rating, given that this usability advantage is PERCEIVED

“In short, users have a positive emotional response to your visual design, and that makes them more tolerant of minor usability issues on your site” – Nielsen Norman Group

three levels of design appeaal

According to Don Norman’s 3 levels of design appeal, aesthetic-usability effect appeals to the user at a visceral level and allows for a quick, subconscious response. 

This effect was proven by Masaaki Kurosu and Kaori Kashimura, researchers at the Hitachi Design Center.

The first studies on this effect were performed in 1995, by asking 252 participants to rate 26 variations of an ATM UI design on ease of use and aesthetics.

They discovered a very strong correlation between perceived ease of use and the ratings given for aesthetic appeal. 

The conclusion of the study was that aesthetics play an important role in any given UI, even in situations where users are trying to evaluate the underlying functionality of the system.

Aesthetic designs, in general, look friendlier and easier to use and have a higher probability of being used, whether or not they actually are easier to use.

In contrast, a SaaS product that is more useful and reliable but doesn’t have a strategic focus on design may suffer from a lack of widespread acceptance in the market. 

Miro aestethic design
Miro homepage

The first example that comes to mind is Miro, a very aesthetic SaaS brand from their landing page to their platform UI.

You can feel throughout your journey on their web and app that they have invested and prioritised on having a very aesthetic design.

Another example that evolved and thrived in the crowded space of project management and ended up becoming a leader is Asana. The underlying functionality of a project management system doesn’t change at its core, but the attention to aesthetics gives it an allure hard to resist.

Many growth marketers tend to overlook aesthetics when they are doing experimentation.

In some cases, it can influence the outcome of an experiment. Especially if there is a big discrepancy between the experimented elements and the rest of the brand.

But at the end of the day, remember the words of Jony Ive – “A beautiful product that doesn’t work very well is ugly.”

Conclusions

I’d highly recommend to take a look at some of the SaaS companies that you are following and watch for examples of design principles. Good or bad.

And share them with me . I’m always curious to find out more examples!

If you watch closely most of these design principles overlap in their influence. And it’s usually the case that designers use them together.

You’ll have greater success if you manage to creatively combine multiple design principles in your experimentation.

Hope you enjoyed PART I of this articles and you’ll stay tuned for part II where I’ll talk about serial position effect, mimicry, law of proximity and many more.

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

2 Responses to 6 Design Principle for SaaS Growth Marketers ( Part I )

  1. Great post, Mihai! Really informative, well researched, highly detailed, and best of all, plenty actionable. I stumbled upon this post by chance through Growth Hackers, and it couldn’t have been more serendipitous- I’m in the middle of rethinking our pricing page as we publicly launch it (https://www.voicevoice.com/pricing) and have been trying to squeeze a bunch of feature differences into the various plans to highlight some versus the others, but in the process, I’ve ignored Hick’s Law and Miller’s Law AND haven’t done enough with the isolation effect to really get our main plan to stand out. So I’m gonna be using this post and will apply the learnings here to a total revamp of our pricing page. Appreciate the help, Mihai!

  2. […] I’ve written about this in my article about reducing friction by leveraging cognitive dissonance. […]

Leave a Reply

Your email address will not be published. Required fields are marked *