Pictured: SaaS Dashboard Design UI Kit & Code

Last updated: January 31, 2020

Are you thinking about ways you can implement SaaS design principles that will delight your users and increase retention?

There are so many things to do that it can be easy to be overwhelmed.

After all, you need to keep the UI organized, clean, and easy to use.

One thing is certain: the most successful SaaS products are those that deliver a great user experience.

And great user experiences are built by understanding:

  • Why you’re creating the software.
  • What users expect to accomplish with your software.
  • And what your business can expect to accomplish.

So it all starts with strategy.

As a general “rule of thumb,” The best strategy you can have is empathy.

That’s because most companies are only focused on themselves.

When you’re “me focused,” you’ll wind up building something that people don’t like or won’t be excited use.

But savvy, successful SaaS companies out there know that you need to design with the user in mind.

Since software is used by people, so it only makes sense to give them what they want.

And this is actually doable if you know how to answer these 3 questions:

  • What are they looking for?
  • What do they need to accomplish?
  • How does your software compare to what they are currently using or doing?

However, if all we had to do was focus on the user, this would be easy.

People forget that there are also business objectives at stake.

Business stakeholders also have their own concerns.

So when focusing on SaaS product design, you also need to be clear on the time, money, and energy spent in order to get a good return on your investment.

Before tackling the project, you need to be able to strike a balance between:

  • What the user wants.
  • And what the business wants.

And to do this, you need to be clear on 3 things:

  • What’s important?
  • Why are we building this?
  • What value does it provide?

1. What’s Important?

When we take into consideration what the business wants (and what the users need), it’s easy to wind up with a big list of features and functionality.

With so many things to choose from, it can be difficult to focus on what matters.

It can be very tempting to want to do everything.

Yet, if you choose to implement everything, your software will quickly become bulky and difficult to use.

We also know that it’s not possible to add everything we want, as it takes a lot of time money to accomplish.

So the first step is to get really clear on what’s worth building.

You need to know what’s important and achievable.

Take out a sheet of paper and answer the following questions:

Importance:

  • How does your software fit into their workflow?
  • What are the features and functions that it needs to have?
  • How does it deliver value?

Achievable:

  • What can we realistically build with the time and resources that we have?

Ranking them in order of priority:

Once you create a list of things you think are important and would like to achieve, rank them in order of priority.

For example:

1 – Low priority

2 – Mid priority

3 – High-priority

Low Priority & Low Achievability

If what you proposed is not high priority for users and is unlikely to be achieved with current resources, you can:

  • Postpone it for future projects.
  • Or get rid of it.

Mid Priority and Mid Achievability

If the features you proposed fall in the middle, then it’s very likely that you can implement them.

However, you need to understand that:

  • You shouldn’t focus all of your efforts on these features.
  • They are not what you would consider to be critical, but rather, they’re more seen as “add-ons.”

High priority and high achievability

Any feature that falls into this category needs to be implemented.

These are the functions that deliver real value to users.

It’s what solves their real pains and problems.

So, it is wise to focus on these high priority features first.

What are we building?

When building software, it is a team effort.

This means that everybody will view your project from a different perspective.

That’s because as humans, we all have different mental models.

We all approach work in different ways, and priorities can different from department to department.

As such, people who are involved will view your project according to their role in the organization.

The CEO will look at it from a “systems perspective.”

The marketing team will look at it from a “promotional perspective.”

And the designers will look at it from an “aesthetic perspective.”

You get the point.

With so many different viewpoints, it can be hard to get everyone to agree on anything.

So essentially, it’s your job to make sure that everyone is on the same page.

Before you start designing your SaaS, everyone needs to know what’s being built and why.

If nobody agrees on the overall direction, the final outcome won’t satisfy.

This can cause projects to get off track and problems to arise.

And once you’re off track, it’s tough to get back.

The way we do this is through a simple three-step process.

  • Discuss: Talk about the project and its goals.
  • Agree: Get everyone to agree on core items.
  • Document: Put it in writing as proof that everyone has agreed.

Now, when it comes to documenting, a lot of people get confused.

There’s no need to come up with legal contracts.

Here’s the thing: it doesn’t have to be formal.

Just focus on writing down the features, functions, and content.

It doesn’t matter how this is done. It can be done on paper, email, or heck — even a napkin.

The important thing is that you have these things clearly written down.

It should be available and clear to everyone.

And the whole group should have a common understanding of who’s in charge of what.

This will keep the process organized and flowing smoothly as it progresses.

What value does it provide?

The important thing to know about value is that:

Value is subjective.

Each person will have their own opinion around what’s valuable (or not) in your software.

However, the most important thing to remember is that:

When somebody does use the software, do they have one clear goal?

So we have to get clear on the value it provides to a select group of people.

Here’s how we do this:

  • Who are we building this for?
  • What’s valuable to them?
  • And in what ways does your offer differ from competitors?

Let’s see this in action.

Case Study: MailShake

SaaS design

Mailshake is a SaaS company that helps salespeople with email marketing.

For those who work in sales, prospecting is the hardest part of the process.

Salespeople need to find leads, email them, and follow-up.

Although manual follow-up works fine when reaching out to a handful of people, it becomes much harder when a sales team wants to reach hundreds of people at once.

Before this software existed, people had to send emails and follow-ups one by one.

They had no control over the time it was being sent, and it was almost impossible to keep track of the follow-ups.

They would have to put this data in an Excel sheet manually.

And here was the pain point for them: Salespeople would spend more time doing administrative tasks than selling.

So, Mailshake created this simple software that automated the process for them.

Although Mailshake clearly solves a painful problem for their target market, they probably wouldn’t have the same astronomical success had they not invested in great design.

That’s because SaaS product design plays a huge role in a company’s growth.

A good or bad user experience can make or break a business.

Since they are a company that has put thought into creating a great user experience, we analyzed their software and would like to show you some of the SaaS design principles they used in their product:

1. An easy signup process that eliminates obstacles

These days, many SaaS companies offer free trials.

It’s a very compelling offer and instills trust in the user before they make a buying decision.

The challenge, however, is actually getting people to sign up in the first place.

Do you really want to fill out a huge online form just to try something out?

That’s what many companies do.

They make signing up a pain.

As a matter fact, manyh people will look at that long form and give up. They don’t even want to try anymore because of all the hoops and hurdles they will have to go through just to be able to see if the software is right for them.

Some businesses try to get as much information from the client as possible.

Savvy SaaS businesses aim to do the opposite.

Focus on getting only the essential pieces of information needed to sign up.

For SaaS, here is the only information you need initially:

  • Name
  • Email address
  • Payment method

Anything else will only slow down the process.

Mailshake does a great job with this.

Their signup process is quick and intuitive.

As soon as you log into their dashboard, you’re greeted with a message that gives you clear instructions. It directs you to the lower right-hand corner and explains how to connect your email account to their software.

SaaS UI

You can then integrate your Gmail account and sign up with one click.

2. The onboarding process is simple and clutter-free.

The main reason people sign up for your service is that:

  1. They think you have a solution to their problem
  2. They want to make a positive change

That being said, if it’s too difficult to use your product on the first day or first week, they won’t be as likely to buy from you.

It’s already hard enough to make a change.

When people are used to doing things one way, it’s hard to transition and do things another way.

That’s what you need to make onboarding simple.

When you can make that transition as smooth as possible, you’ve won.

Mailshake does a great job with that.

They provide step-by-step onboarding instructions on how users can create their first email campaign.

You will notice that:

  • There are no more than two actions to take on any given page
  • Each part of the campaign is separated
  • There are clear instructions every step of the way

onboarding SaaS

The first thing you’ll see when creating a campaign is a section for the title and choosing your “from” email.

There are only two things to do on this screen, and only one button to click after that.

This ensures that things are kept simple and clutter-free.

SaaS UI design onboarding example

The next page is where you’ll upload your list of leads.

You just drag the file onto the page or click “choose one” to upload it.

SaaS ui

Once it’s uploaded, we tell Mailshake where the name and email section is located.

compose

Then you compose the emails.

Notice that it has a simple interface that is similar to what the salesperson is already used to.

So even if they’ve never used the software before, they’ll be able to write their emails because it works just like their regular email account.

replies UI

In order to solve their most challenging problem (follow-ups), Mailshake has included a button below that says “+ add a reply.”

It gives you the option of:

  • Choosing the number of days to reply after the initial email.
  • To reply unless you receive a response.
  • And text box to craft your message.

And to do this again, all you have to do is click “+ add reply” in the new email you wrote.

So you can follow up automatically as much as you’d like.

outreach UI

After you’ve written all your copy and made follow-up tweaks you click “next” to preview and personalize each email.

campaign send design

You can schedule when the emails go out and to see when people click on your links.

outreach UI

And that’s it.

As you can see, they’ve kept the onboarding process as simple as possible.

In just a few minutes, someone with no tech savvy skills can create an automated cold email campaign, from scratch, with no outside help.

Showcase visual data

design steps

In sales, there are a few key things that you need to track.

These are the number of messages:

  • Sent
  • Opened
  • Replied
  • Clicked on
  • And bounced

A salesperson can come in contact with hundreds of people a week.

It can be hard to keep track of these metrics the more you reach out to people.

Mailshake does a great job with this by providing a summary of this data in the dashboard.

They showcase all the relevant stats in a single page.

So optimizing campaigns and keeping track of performance is easy.

So what can we learn from Mailshake?

They knew who they were building for: Their software addresses a pain for a specific group of people. This allowed them to understand their customers on a deep level and create something that’s tailored to their exact needs.

They knew what’s valuable to them: Salespeople want something that’s easy to use. They don’t want to send out emails manually, so they created software that sends them automatically and at scale. The target user, salespeople, also need to keep track of their metrics, so they automatically track the numbers that are important to them, which are:

  • Sent
  • Open
  • Reply
  • Clicks
  • And Bounces

When salespeople know their numbers, they can optimize their process to achieve better results for themselves. So having this tool will make their jobs easier and to become better professionals.

Their offer differs from competitors: A lot of their competitors focus on enterprise-level customers. They have fancy software with hundreds of functionalities. Yet milkshake stands out because they focused on the handful of things that matter and delivered a great user experience to the people using their software.

The design is clean and consistent:

  • They don’t use multiple colors.
  • They don’t use more than 2 fonts.
  • Their headlines and body copy have a consistent size and style on each page.

The UX is simple to use: What makes them stand out is their simplicity. Mailshake guides users throughout the whole process. There are clear instructions on each page. And there are only two options available at all times. This makes their experience intuitive and in a way that “anybody can use it.”

find design development talent

Leave a comment

Sign in to post your comment or sign-up if you don't have any account.