What makes good SaaS design?

A complete guide to what makes good SaaS design with real examples.

As a Software-as-a-Service or SaaS design agency we live and breathe SaaS. It’s the reason we get up in the mornings as we are fascinated by the world of SaaS as it continues to quite literally takes over the world. A bit far maybe? It’s certainly fair to say we are all now heavily reliant on SaaS products to work, rest and play – from Google, Slack and Mailchimp to Calm and WhatsApp – software has permeated our lives and become an integral part of everyday life.

We are often asked about what truly makes great SaaS design so we thought we’d put this guide together to answer that very important question.

In this guide

• What is SaaS?
• What is SaaS design?
• What’s the process of creating good SaaS design?
• What are the most important characteristics of good SaaS design?
• Final thoughts

What is SaaS?

Let’s start with the basics – SaaS is an acronym for Software as a Service and is the name given to digital products and services which are often delivered online and paid for on a subscription basis.

This is known as the ‘SaaS model’ which has become so popular as a means of creating recurring revenue for software companies as opposed to the previous way of doing things where software was paid for once and downloaded and installed on your computer (or even bought on disk long ago…). There are those (37 Signals) that still believe that’s the way things should be though.

So essentially we are talking about software – websites, applications, plugins that enable you to complete tasks. Where the functionality is what you pay for and the value you derive is from your ability to complete your chosen tasks successfully.

SaaS products and services exist in all sectors and industries from accounting to zoo keeping as there are tools that exist for almost every market and the number is growing exponentially every year. The global market is said to be worth $3Trillion according to Mckinsey.

What is SaaS design?

So we have our definition for SaaS, but what is SaaS design?

A broader definition of SaaS design includes SaaS branding, SaaS marketing and SaaS product design so let’s look at them one at a time.

SaaS branding

Most SaaS products exist in increasingly crowded marketplaces so branding is a key part of attracting customers to your product.

The components of a SaaS brand are the same as other brands, they include the verbal identity – everything the company stands for – and its key attributes: tone of voice, personality, mission, vision, values and of course the messaging and copy. There is also the visual identity: how the brand translates to every touchpoint visually with key assets including the logo, typeface, colour and imagery.

As a SaaS design agency we are often asked to create or redesign SaaS brands but the branding isn’t just for marketing, it should be reflected in the product as well – a common thread that unifies the entire experience and therefore a vital part of SaaS design.

SaaS marketing

Without customers there is no SaaS so marketing and sales are essential for SaaS companies particularly in today’s competitive landscapes.

SaaS marketing design can include the website, HTML emails, social media, banner adverts, ebooks, print and outdoor advertising and, as we did for our clients EmailOctopus, conference stands, t-shirts and tote bags can all bit part of the mix.

The marketing website serves an especially important function as it is where your prospective customers are likely to learn the most about your product so an important part of SaaS design is designing the marketing website for the SaaS product.

SaaS product design

The most important part of SaaS design is the design of the product or service itself – the user experience (UX) and user interface (UI).

SaaS product design marries some very important approaches and techniques which we will cover in more detail below. What makes it distinct to SaaS branding or SaaS marketing is that the product is often for habitual use and therefore the utility or function and the ability to complete the tasks that the SaaS has been ‘hired’ for, should drive the design of the product.

It almost always has to marry elements of the brand design and marketing, but at it’s core should be a user centred experience and therefore usability and accessibility are key concerns for a SaaS designer.

What’s the process for creating good SaaS design?

For the rest of this guide we will focus on SaaS product design only as branding and marketing deserve their very own guides (coming soon!). Before we get onto what makes good SaaS design though, we need to talk about process. Any design discipline has a process and SaaS design is no different. Our SaaS design agency employees what we call a ‘4D’ process to creating great SaaS design:

1. Discover

The discovery phase is absolutely critical in the SaaS design process – it’s where we learn as much as we can about the product. This includes:

Product deep dive

This might sound obvious but a deep dive into your product starts by using the product itself, undertaking key actions and performing an UX review. This helps us understand exactly what it does and its full capabilities and where and how we might be able to improve it.

UX research

User research to learn about why and how your customers use your product forms a critical part of our understanding. Seeing your SaaS through their eyes enables us to quickly grasp where its strengths and weaknesses might be and forms a priceless component of the design brief. Surveys, interviews and testing are all powerful techniques in the armoury of a user researcher and can be utilised right through the project lifecycle.

Competitor review

No product exists in a vacuum and reviewing competitor products and learning what they do well and not so well should help inform the approach to your SaaS design. There may be a feature that is missing from the competition that we can include that will differentiate the product design – this could be critical when growing the business.

Other key aspects of the discovery phase include reviewing analytics to understand usage patterns and problem areas and stakeholder research for business goals, roadmap and establishing KPIs for the project.

2. Define

We don’t want to drown in documentation and just like the original agile manifesto we believe in ‘working software over comprehensive documentation’ but capturing requirements in some form is incredibly important and is the main purpose of the define phase. Key outputs include:

Customer experience (CX) and user journey mapping

Having an in-depth view of what your customers are experiencing by undertaking the full journey and then mapping it is a great way to learn and solve problems with a product. It highlights the good and the bad and helps us think about opportunities for improvements which we can then explore and test with user journey maps and wireframes.

Wireframes

Wireframing is an important process as it enables us to test ideas quickly without having to layer on brand and hi-fidelity design elements. We can also prototype with wireframes to test usability so it can be a very efficient way to spot issues early on in the SaaS design process.

3. Design

This is the exciting bit in most projects and the culmination of all the hard and valuable work of the discover and define phases. The design phase is where we visualise what your SaaS will look like.

Ideation

The early stages of visualisation can include mood boards and style tiles as well as sketches to help iterate early ideas quickly. It’s also a great way to involve you as the client in the SaaS design process with a group sketching exercise. We firmly believe collaboration is key to a successful project!

Brand 

Each element of a visual identity needs to connect with the essence of the company and its brand. That can include logo, colour, typography, imagery, motion design and voice and tone. The brand should be reflected in the product design, not just in colour and logo – but through every aspect from the microcopy to the feature UX – brands aren’t just for marketing, they should translate right through to the product too.

UI

In product design the UI design should marry brand, UX and product design best practice to create a perfect interface that connects with the customer and allows them to complete their chosen actions successfully. If it can bring delight through lovely interaction and motion design as well then you are ticking a lot of boxes and likely to have very happy customers.

4. Deliver

Build and handover

Building the front-end or the full functioning SaaS application is a complex process and more than worthy of its own blog post. What’s important to understand in terms of successful SaaS design is that design files – be they Figma, UXD, Sketch or other – on their own only tell part of the story. In order to fully realise those designs they need to be accompanied by notes to explain how they will work. This is especially important with behaviours and interactions which may require additional designs, links to examples or even videos created to explain exactly how they should work. A full handover with the development team – going through each design in a Q&A session is invaluable too along with regular check-ins throughout the build. 

Design systems and guidelines

Design systems have become a hot topic in the last few years – we no longer just design SaaS product interfaces, it’s a system of layouts, blocks, components and styles that should be flexible enough to work across a all the product screens and as further features are added, adapt and flex to those needs as well. Combined with solid guidelines provides power, flexibility, control and confidence to maintain and extend the product interface over time.

Enablement

Good SaaS design needs to last beyond the launch phase. Teams should feel like they have ownership in the design and as they develop the product, to evolve the design accordingly. ‘Enablement’ is a combination of creating the design system and guidelines detailed above and combining it with training and support to help nurture and grow the SaaS over time. The more empowered the internal product owners, design and development teams feel, the better the evolution will stay faithful to the original designs.

What are the most important aspects of good SaaS design?

We’ve covered the key definitions, concepts and crucially the process which means we’re now in a position to answer the most important question in this guide: what makes good SaaS design? Let’s look at 12 key aspects of great SaaS design with real examples.

1. A user human centred approach

The bedrock of great SaaS design is putting the humans that will be using your SaaS first. It sounds obvious, they are your customers and by keeping them happy you are fulfilling a core function of the product but it’s not the only consideration. There are commercial goals, technical constraints and of course timelines and budgets are key factors. 

Successfully navigating those other aspects whilst delivering a UX honed to the needs of your customers can be challenging but there is usually a balance that can be struck between these often competing interests.

Typeform has balanced the needs of all stakeholders well with its SaaS design and has created a unique UX with its form flow that has become so distinctive that you recognise a Typeform straight away.

2. Sign up and onboarding for customer success

The beginning of your customer’s product journey is the sign-up flow and a seamless sign-up – yes we’re talking O-Auth – enabling customers to use their Google, Facebook, Apple or other credentials to sign-up and login – is an essential part of the product experience. It’s pretty much table stakes now.

What happens next should be a well designed onboarding flow which teaches your new customers how to get value from your product as quickly as possible. The flow should:

• Educate by showing how to use the core functions
• Orientate through indicating where everything is
• Inspire by highlighting what’s possible with the product

For a deep dive into onboarding read our post here. Key onboarding design approaches include introduction slides, product tours and gamification ‘to do’ lists. The UX of the onboarding is essential to get right and should reflect your product’s ethos and follow best practice. One essential tip: try and tailor to user needs i.e. ask who they are. It’s a great way to give a relevant onboarding experience and personalise the product as a whole.

Convertkit uses a to do list to help get the new user started – challenging them to complete the tasks which ultimately will see them reap the value of the product.

3. Intuitive information architecture

Information architecture is a core consideration for any size of product as it effects:

• Navigation. The main UI for moving through a SaaS
• User journeys. How a customer interacts and completes key tasks
• Page structure. The order in which the information is presented
• UI placement. Where in the flow of information do buttons and controls go

Some products have relatively simple structures or rather that they’re deceptively simple. You can navigate them without thinking about it and if that’s the case the UX designer or Information Architect (either they one and the same or they work closely together) have done a great job.

Trello is a mature project management tool and has always been incredibly simple to get started with. It has a simple layout and the board creation flow is as simple as it gets.

It also has many layers of complexity. Sure creating boards and cards on a Kanban is easy but there is so much more you can do beyond that and very cleverly at card level the controls appear so the board remains relatively clean. Just want you want from a project management interface!

4. Useful and engaging dashboard

Most products have a dashboard but not all of them get it right. And please don’t call it ‘dashboard’ – it’s ‘Home’ or may not even have a name and just be linked to from the

A dashboard is the control hub of the product and should function exactly like you would expect. A good way to think about it is if the whole interface was touch screen, could you get a quick sense of your status i.e. metrics, navigate easily to the core functions, and be visually compelling.

Key aspects that go into great dashboard UX:

• Relevant information, based on their use of the product
• Scannable with clearly defined containers, data and CTAs
• Functional if there is data displayed, the ability to manipulate it on that screen

An example of a dashboard that manages to do this well is Mailchimp which has become a hugely complex and multifarious tool but reduces the cognitive load on the user by showing the most important information to them whilst allowing access to the rest of the features via the left hand menu.

5. KISS – keep it simple stu…

It’s taken me this long to mention the long held cliche of UX – KISS. We’ve mentioned it above but to reiterate it here – to get your all important customers to engage and adopt your product it really is a case of the simpler the better.

Even with relatively complex SaaS, having a simple UX can make or break it when it comes to your customers.

We’ve talked about how a simple information architecture is vital but having a simple interface and therefore SaaS design is integral too.

EmailOctopus is an email marketing platform which we redesigned and when they added an automation feature and asked us to design the UX we knew the key was to continue the simple UX approach we had used for the rest of the SaaS design.

Simple controls, large buttons, clear text and short user flows with feedback from the system throughout to complete actions help to make a sophisticated feature easy to use.

6. Personalisation

If you want to take your SaaS product design to the next level then personalisation is a useful area to focus on.

Tailoring aspects of the interface to the specific needs of the individual user will make the experience much more engaging for them. Commons SaaS design strategies for personalisation:

• Dashboard metrics. Providing a snapshot of what the users key metrics are as soon as they login is 
• Custom homepage. Allowing users to choose screen they see when they login is really useful as different types of users will have different needs e.g. for an email marketing tool a content creator may want to see email creation screen first whereas a marketing executive might well be more interested in the reports section
• Tailored to team or role. Setting up the interface based on the needs of the user e.g. if it is a design tool asking if the user is their job role could show them a set of tools based on their experience and needs

Hubspot is vast in its features and functionality so presenting a single dashboard view that provides the same utility to all its users would be impossible. It offers a very useful personalisation feature that allows the user to set their own homepage e.g. if the ‘Deals’ section is most important to you then when you login that’s what you’ll see. It’s a great piece of UX, saving clicks through to that screen every time.

7. Admin is important

The account screens are an essential part of a SaaS product as it’s where customers will manage their billing and depending on the type of SaaS, team members, upgrades and other key aspects that directly affect the customers subscription.

For this reason, the area should demand the same level of care and attention to the UX as the core product but often it doesn’t, adopting poor user journeys such as sending the customer out to the marketing site to begin an upgrade journey instead of keeping them within the product experience.

Example

8. Help-fully designed

The UX design for a SaaS product’s help and support section has mostly been outsourced to a small number of vendors such as Zendesk or Helpscout. 

The pros are the functionality a 3rd party can offer is likely to be much more comprehensive then what most SaaS providers could reasonably budget within their SaaS design and build budget and therefore a great and cost effective option. The cons are the same as any 3rd party in that you are constrained to their UX and this can lead to compromises that may make the help and support less than intuitive. 

Support queries can be the bane of any SaaS, particularly start-ups so a little more investment in the help and support design can be dividends by freeing up time and budget to focus on SaaS design and development (https://www.helpscout.com/helpu/saas-customer-support/#8-saa-s-customer-support-best-practices).

Some key things to consider when designing your SaaS’ help and support section:

• Document first as 70% of customers prefer to answer their questions themselves so having a well thought out information architecture and powerful search function for your help docs is paramount to keeping your customers happy
• Discoverable through several means – not just a single link in the navigation but links and snippets from the help section should appear through the product so user
• Multichannel so that your customers can help themselves by accessing documentation, escalate via a support ticket or get immediate help from a support agent via chat

Zapier offers a range of support channels to suit the differing user needs from raising a helpdesk query to hiring a ‘Zapier Expert’.

9. Responsive

Ethan Marcotte published his seminal “Responsive Web Design” book in 2011 and for web design in 2024 it seems a given that you will design a website to work across a range of devices and screen sizes.

SaaS design has lagged behind in this regard and sometimes for good reason: a lot of SaaS products require larger screens to accommodate their interface – think about an email marketing platform where you need to create the email using a drag and drop interface. That would be very difficult to adapt to smaller screens and therefore many tools don’t provide this as an option.

Many could though and for those that can’t offer the full experience on mobile they should certainly try and offer as many of their screens as possible on mobile and politely ask the user to use desktop for the non-responsive screens.

10. Accessibility

One of the founding principles of the internet that Tim Berners Lee espoused was that it should be inclusive and accessible to all and SaaS design is no different.

The basics of accessible design should be in place – fantastic usability, colour contrast, clear typefaces are all paramount and the foundation for good design for all but there are also some specific  considerations for accessible SaaS design that product teams need to consider:

• Assistive technologies such as screen readers and magnifiers can play a huge part in the lives of people with disabilities
• Keyboard shortcuts should be available particularly as many SaaS products are for habitual use and therefore
• Contextual help where it’s needed – there might be complex processes or visualisations that require greater explanation for those who perhaps can’t see it properly so help them as much as you can

11. Design to Delight

In the hierarchy of SaaS product design needs, delighting is somewhere near the top of the pyramid but if you’re a mature product or trying to break into a crowded market, these touches can really capture the attention of your customers and make them feel a warm glow towards your product that can go a long way in staving off the dreaded churn.

‘Delighters’ can be incorporated into your SaaS product design in a few different ways:

• Animation and motion design from button behaviours to loading animations are the most common way to add delight to your product
• Humour in illustrations and micropy 
• Empty states are a great opportunity to show your brand working hard to keep your customers happy by providing an entertaining image or message
• Personalised messages from the SaaS team or even a video that

Slack has been around for so long it’s become a verb and love it or hate it you’re probably on it most of the day. The Slack product team are acutely aware that their customers will be staring at their SaaS for much of the day so they have incorporated several ‘brand moments’ or ‘delighters’ into their SaaS design.

For example, when you get to inbox zero you’re shown a cute animation of a home plant… and there are multiple kinds of plants presented at random. Most products overlook these empty screens or go totally over the top with confetti, rainbows or silly images of a holiday beach. Slack however hits the perfect tone of voice for someone staring at a laptop screen all day long… It’s polished and cute but unassuming.

12. AI…

Last but not least we can’t talk about anything tech related without mentioning AI and in the context of SaaS design, how AI is integrated into the UX of the product.

At time of writing AI integrations hugely vary in their effectiveness both functionally and in the interface. It’s a big section of your product roadmap but the gold rush has lead to a loss of focus for many teams with the AI element slightly unpredictable….

Otter is a good example of AI done well and here’s why:

• Identification: AI detects who’s speaking and tells you what they’ve said and how much they’ve talked. 
• Summarisation: AI splits the call into topics/titles allowing you to quickly find parts of the discussion. 
• Keywords: AI gives a list of words you can use to search and check specific parts of the conversation. 
• Chat: you can ask AI for things like ‘What are the action items from this meeting?’ and get them without having to listen to the entire call.

Most AI tools rely on you knowing how to ask the right question (aka prompt engineering). What I like about Otter is that it combines the chat UX with automated AI outputs (e.g. summarisation). This means users can reach the ‘aha’ moment without potential frustration in asking the wrong questions.

Final thoughts

Great SaaS design is a complex blend of so many different competencies but if there are 3 key takeaways which we would like you to take from this guide it’s these:

1. Your process will give you the greatest chance of successfully delivering a SaaS design that meets the needs of your customer, competes in the marketplace and balances the needs of key stakeholders
2. The usability – UX – for your product really is paramount. You can spend a fortune on sales and marketing channels but if your new customers struggle to use your product then it will be a waste of time as they will churn
3. Your ‘hello’ – i.e. your sign up, onboarding and the first home screen your customers see when they login will have a huge bearing on your customers so make sure you get those initial interactions designed perfectly and loaded with value

Ultimately the success of your SaaS design will depend on your customers’ ability to do the job they hire your product to do so make sure you get that right.