From ordering food or calling a taxi and ending up with taking notes or relaxing with meditation applications, we rely on cloud apps in most of our daily activities. Therefore, people want to have understandable and fast services to resolve their everyday issues. That is why the role of UI/UX design in an application is to make the process of completing any task simple, convenient, and quick.
At Eleken we specialize in designing cloud-based applications of different scales for various industries. To create consistent experiences and aesthetically-pleasing interfaces, we get inspired by many great SaaS products and take the best out of them.
In this blog post, we want to show our favorite SaaS application interface design examples created by popular cloud companies from which you can adopt something useful for your business.
Examples of great SaaS designs
Just like each person has their own exceptional talents, each example provided below stands out because of its specific characteristic. So, we will focus this section on the best UI/UX design features that we can observe within one specific SaaS app.
Toggl’s product onboarding
Toggl is an easy-to-use time-tracking software that helps individuals and teams see where their work time goes, set billable rates, view reports, and so on. The main benefit of this app is that it takes minimum effort to use.
Their onboarding flow is not an exception. Toggl even mentioned simple onboarding as one of their main advantages on the “Our mission” page.
The onboarding itself starts with a modal window that offers new users two options: start the guide or explore the product on their own. As well, there is a note that in case users want to omit education they can always get back to onboarding with the help of a button in the navigation menu.
The guide consists of 6 steps in a form of tooltips that teach the user how to deal with the platform’s key features.
Finally, the user sees a modal window with congratulations on going through all onboarding steps. And again Toggl gives newbies the same choice as at the beginning: to continue the product tour and learn how to use some more features or start tracking projects on their own.
What we can learn from this SaaS design
We think Toggl’s design is a good SaaS onboarding example as it teaches to:
- Shorten time to value. Toggl decided not to overload users with too much information at once and divided its onboarding process into short tours that teach to use key features. Onboarding flows with a few easy steps help novice users quicker understand how they can benefit from this product therefore they retain.
At Eleken, we often help users feel the benefits of a product quicker by using Wizard, a design pattern that simplifies complex processes. For example, for Habstash we divided the sign-up flow into several separate screens not to place too much info on one screen and make it easier to perceive the content.
- Add reminders. Modal windows that contain reminders about how to get back to onboarding let users learn when it’s convenient for them.
- Allow users to skip onboarding. Each tooltip and modal window allows users to skip onboarding which reduces the friction and makes the educational tour unobtrusive. Users should always feel that they control each function in an application.
For instance, here’s a tooltip we designed for Process Place (a workflow management platform) that has a cancel option.
- Mind accessibility. The content in each tooltip is easy to perceive as it’s big enough and the text contrasts well with the background. This ensures that users with different abilities can complete the onboarding.
Headspace’s accessibility options
Headspace is a cloud-based app for meditation that helps people manage stress, relax, find concentration, and stay healthy overall. One of its distinguishing characteristics is the design for accessibility.
To ensure all their visitors can equally use the website, Headspace launched an accessibility menu, a widget that helps people with disabilities easily perceive the content.
The menu is launched with one click on the “Explore your accessibility options” button.
The widget offers people to adjust the color, contrast, font, spacing, and more for those who have issues with their eyesight.
As well, there is a possibility to adjust the navigation. For example, users can search for the needed content with voice commands and listen to it with a text reader.
What we can learn from this SaaS design
Taking care of accessibility is a must for any modern business as it allows a wider audience to obtain the information on your website/app and stay inclusive.
Headspace not only provides sufficient contrast, clear navigation, and well-labeled buttons that allow users easily interact with the app, but they also created the whole menu to help people with different abilities adjust the content on their website as they wish.
From our personal experience, our designers are always super attentive to accessibility in design. When we were conducting a UX audit for TextMagic we analyzed each interface element to make sure the app is easy-to-perceive, the content is readable and legible.
Figma’s landing page
Figma is a digital UI/UX design tool for individuals and distributed teams’ online collaboration. Eleken’s team admires this platform a lot and we think their SaaS landing page is worth your attention.
The first thing that catches the eye on Figma’s landing page is the headline that communicates the product's main value proposition and an interesting font that is used for this heading.
As well, Figma acquaints its prospects with the app interface by presenting the use cases right on their landing. And in general, the page is full of interactive elements that encourage visitors to explore the website.
What we can learn from this SaaS design
- Eye-catching typeface. Appropriate size and a unique type of fonts help to highlight the information on a website and make visitors’ feel that this design was made for designers.
- Presentation of how the app works. Placing real use cases on the page allows visitors to understand different ways of how Figma works without the need to read long copies.
- Creating consistent brand identity. Figma’s target audience is people who prefer perceiving visual information. Thus, the way Figma’s team incorporated animation, colors, and shapes into the website’s interface allows them to create a non-boring user experience and consistent visual language for website visitors.
Typeform's template gallery
Typeform is a SaaS platform that helps users create engaging and interactive online forms and surveys to get more responses. To make this process fast and simple, Typeform provides a vast gallery of survey & questionary templates from which people can choose the one that suits their ideas best.
Once the user gets to a template gallery they can search for the needed questionary within the list of categories, by typing the keyword in a search bar, or by scrolling through all templates manually.
When users choose to preview some specific template there will be short info about the purpose of this form, the number of questions, and the approximate time needed to fill all the information in.
As well, all templates are customizable. Customers can adjust them to their needs with ease.
What we can learn from this SaaS design
The use of templates decreases the mental effort people need to take to create something new, and therefore users can quicker reach their goals and start benefiting from the application.
Typeform’s templates have all characteristics needed to shorten users’ time to value.
- They are easy to browse and well-structured. Because of a clear list of categories and a search bar, it’s a no-brainer for a person to find the needed template as fast as possible.
- They have a minimalist design. There are no useless elements in Typeform’s templates that exist only for visual beauty. Each interface element and piece of content has its purpose. The right use of white space and sufficient contrast focus doesn’t create distractions for the user and make templates light, and easy to perceive.
- They are easy to edit. The template editor’s design is intuitive, as each button has a clear copy so that even new users can quickly understand how to make changes and customize forms according to their needs.
At Eleken we also had the experience of creating a template gallery with a minimalist design for Process Place, a workflow management application.
Asana’s celebrating user’s success
Asana is a SaaS work management platform that helps teams effectively manage their projects and tasks.
Managing regular work tasks isn’t that fun, therefore to somehow make this routine process more engaging and cheer up users as they succeed with another task, Asana came up with celebration creatures. If enabling the celebration feature in the Profile Settings, users will see a unicorn, yeti, narwhal, or phoenix congratulating them on completing a task.
The creatures appear randomly, not each time, but the more tasks are completed the higher is the chance to meet them.
What we can learn from this SaaS design
Of course, it’s not a typical feature and not a compulsory one. Still, we believe that adding such fun and engaging design elements is a great way to improve UX and cheer people up through their busy workday. Besides, we think that such small but interesting design ideas help the app stand out on the market.
For example, for Process Place, we decided to add a funny image with applauding sheep that users see once they completed an onboarding sequence.
Buffer’s upgrade prompt
Buffer is a cloud social media management tool. And as many SaaS products on the market, it works on a freemium pricing model, that is, Buffer provides its users with a free trial period. The goal of the trial is to show users the value of the product and then convince them to upgrade.
UI/UX design plays an essential role in prompting users to buy a premium subscription. Buffer starts encouraging free users to upgrade from their first interactions. Once the user signs up for a free trial, they’ll be sent to the “My Organization” page to connect their social media accounts. Right there, they’ll see a bright blue “Upgrade Now” CTA and the number of days left in trial. As well, Buffer shows features available for premium users only (connecting Pinterest account) to give more reasons to upgrade.
An upgrade reminder stays available at the top of the Dashboard screen so that users keep this option in mind during their free trial.
The pricing tier of the Pro Plan itself also has a great design. It presents the plan’s advantages in a bulleted list that is easy to read. As well, it highlights the annual plan to attract users’ attention to it.
What we can learn from this SaaS design
- Good location of the CTA button. Placing an upgrade button on the top of the screen is a great idea as it is easy to notice, but at the same time doesn’t distract users from completing their tasks.
- It’s easy to upgrade the plan. Users don’t have to spend their valuable time searching for the CTA, it’s easy to notice and quick to access. Once they choose to upgrade, there is a modal window with key information only and one field to fill in.
- The annual plan is highlighted. It’s important to highlight the plan that would bring the most value to the majority of your customers. And that’s what Buffer does with its annual subscription.
Invision’s error prevention modal window
Invision is a no-code cloud-based design platform used by designers and developers to create and manage prototypes.
Though it’s quite easy to create a prototype with the help of this platform, it still takes precious time and effort. Therefore, to prevent users from accidentally deleting the prototype, Invision’s design team decided to create additional friction in this process.
To completely delete a prototype the user has to manually put checks in three boxes. This way, they make sure their customers think twice before getting rid of their creation.
What we can learn from this SaaS design
To make the user experience better and customers more satisfied, it’s important to help users avoid making mistakes. Invision’s error prevention window copes with the above issue very well as:
- It eliminates user frustration. Intuitive design helps people quickly complete their tasks, but sometimes relying on automated thinking can lead to making irreversible mistakes and unhappy users. Asking people to confirm the action ensures they read the information next to the checkboxes and gives them a chance to stop the wrong decision.
- It has a great visual design. The modal window has the warning icon, sufficient contrast, clear and straightforward copy, a CTA that stands out from the rest of the content, and a greyish background that helps attract users’ attention.
- The use of checkboxes ensures that users take action and therefore clearly understand what decision they make.
To sum up, we want to say that error prevention methods in design can be different. For example, for the Habstash project, in the “Create an account” screen we added a list of password rules, points that fade away once the password matches with the requirements to prevent users from making mistakes and explain what we expect them to do.
Blinkist’s card design
Blinkist is a SaaS book summaries platform that quickly explains key insights from non-fiction books. The app focuses on the mobile format and has a great mobile app card UI design.
Cards tend to bring better scrolling rates in comparison to lists. Therefore, Blinkist uses card design to present a brief book overview. They feature the book’s title, image, author name, a short description, and CTA buttons.
What we can learn from this SaaS design
- Cards make Blinkist more responsive. Cards suit the mobile design well because of their rectangular shape which is highly transformative.
- Cards help to attract and keep users’ attention. They have bright image element that grabs attention and contain small pieces of information which makes them easy to read and understand.
- Cards create consistency. All cards are unified by the same concept and similar visual design which makes the app looks neat and consistent.
We also use card design at Eleken for the same purpose. For instance, when working on Tendrx, a freight tendering platform, our designers chose cards to represent tenders which are central elements of this cloud service.
Evernote’s new feature presentation
Evernote is a SaaS application that helps businesses and individuals capture and organize their ideas with the help of notes. And the feature we want to discuss here is the way this note-taking application presents updates to its users.
Once the user wants to learn what updates the app has prepared they can click the “What’s new” button and see a popup with the list of new features.
When the user chooses the specific feature they want to discover, they are shown a tooltip with a short description.
In case this short explanation is not enough, there’s a “Release notes” button at the bottom of the “What’s new” modal window that provides a detailed description of each update.
What we can learn from this SaaS design
- The use of a checklist. Presenting updates in a form of a checklist allows Evernote’s team to clearly inform users about the number of new features released and let them explore them in portions at a convenient time. As well, by checking the boxes it’s easy to track what news is left to discover.
- The division of the “Release notes” section into “new” and “fixed” features. Creating these two categories lets users quickly and easily perceive the information.
- The use of patterns. Evernote uses such UX design patterns as tooltips, checklists, and hotspots to drag users’ attention to the needed info. UX patterns are reusable solutions to common problems and implementing them in your design helps users quicker adopt the product.
We also use them widely in our projects. For example, for Hirerise, an applicant tracking system, our designers used a calendar pattern similar to the one used by Google. That’s how people can immediately understand how to interact with it.
Hootsuite’s net promoter score survey
Hootsuite is a social media management platform that automates the process of planning and scheduling your daily posts. And as every successful product, Hootsuite wants to grow and improve to meet its customers’ needs.
Therefore, when they launched a redesign of Bulk Message Uploader, this SaaS company decided to learn their users’ opinions with an NPS survey.
Users were shown the survey in case they chose to get back to an old version. Here’s how it looked:
What we can learn from this SaaS design
- Survey appears at the right time. Hootsuite chooses to ask users for feedback when they want to return to the Bulk Message Uploader's old version and catches them at the right moment which increases the chances users will explain the true reason for their decision.
- Good copy. The text inside the survey is brief and on point. Hootsuite states that the survey lets them become better and encourages readers to help them by filling in the survey.
The key principles that make SaaS design great
Researching SaaS competitors is an important part of the product design process and its main purpose is to single out the best design decisions and adopt them in your product. Therefore, here are 5 main lessons we can define from all the above examples.
- Mind simplicity in your design, do not overwhelm the interface with unnecessary elements.
- Never forget about people with different abilities.
- Use common design patterns to help users quickly adopt the product.
- Offer users ready-made templates to shorten their time to value.
A well-thought-out user experience and user interface is a powerful tool for any application to deliver the necessary message to the end-users. With effective and eye-catching UI/UX design, your customers are sure that the product you are offering is practical and provides efficient ways to complete their tasks.
Contact Eleken to help you with building a unique SaaS application with effective and meaningful UI/UX design so that the customers can make the most of your service.
