October 6, 2022
mins to read
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.
FAQs
How would you describe a good user interface? ›
The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging. Create consistency and use common UI elements. By using common elements in your UI, users feel more comfortable and are able to get things done more quickly.
What is SaaS design? ›What is SaaS design? SaaS stands for “software as a service.” It is a way of licensing and providing cloud hosted software as a subscription. Like all computer software, SaaS programs are designed. The functionality, user experience, and user interface of the SaaS environment must be carefully considered.
What makes a good app interface? ›Keep mobile UI design user interface clutter-free. Clarity is an important characteristic of a good mobile design. Too many design elements like buttons, images, and text can make any phone app complicated and unable to use. Clutter is one of the worst enemies of UI design.
What is UI design with example? ›User interface (UI) design is the process designers use to build interfaces in software or computerized devices, focusing on looks or style. Designers aim to create interfaces which users find easy to use and pleasurable. UI design refers to graphical user interfaces and other forms—e.g., voice-controlled interfaces.
What are the top 3 most important things in a good UI design? ›The UI design principals are:
Place users in control of the interface. Make it comfortable to interact with a product. Reduce cognitive load. Make user interfaces consistent.
- Command Line Interface.
- Menu-driven Interface.
- Graphical User Interface.
- Touchscreen Graphical User Interface.
- command line (cli)
- graphical user interface (GUI)
- menu driven (mdi)
- form based (fbi)
- natural language (nli)
The 6 principles of user interface design are Structure, Simplicity, Visibility, Feedback, Tolerance and Reuse.
What is SaaS application example? ›Google's G Suite, also known as Google Workspace is a popular example of a SaaS. Google Apps consists of Gmail, Contacts, Calendar, Meet, Chat for communication, Drive for storage, Currents for employee management, Google Docs Suits for content creation, and education edition.
What is SaaS company example? ›Also called cloud computing, SaaS is actually one of three main categories of cloud computing. The other two are infrastructure as a service (IaaS) and platform as a service (PaaS). Email services that you commonly use like Gmail and Yahoo are probably the best examples of SaaS companies.
What is SaaS easy explanation? ›
What is SaaS? Software as a service (or SaaS) is a way of delivering applications over the Internet—as a service. Instead of installing and maintaining software, you simply access it via the Internet, freeing yourself from complex software and hardware management.
What are the 4 types of app components? ›- Activities.
- Services.
- Broadcast receivers.
- Content providers.
- Get to grips with UX.
- Design for inclusivity and accessibility.
- Explore (and learn from) different design systems.
- Practice as much as possible.
- Seek out and embrace feedback.
- Experiment with different tools.
- Take inspiration from UI Design and tech trends.
The difference between good app design and a poor one is usually the quality of its user experience. Fast loading times, ease of use, and overall customer satisfaction during an interaction should be integral parts of your design. Great app design is clearly laid out, efficient to use, and aesthetically pleasing.
Which software is best for UI design? ›- Balsamiq. ...
- Proto.io. ...
- ProtoPie. ...
- Figma. ...
- Webflow. Best for designing websites with a visual canvas. ...
- Sketch. Best for a fully-collaborative design process. ...
- Adobe XD. Great for creating highly-realistic UI/UX designs. ...
- Bubble. Best for no-code web app design.
Adobe XD is considered by many as the go-to design tool. It's fast, it's powerful, and there's not a lot you can't do with it! From early ideation and low-fidelity designs, right through to impressive animations and true-to-life prototypes, Adobe XD will see you through the entire UX and UI design process.
What are design examples? ›Typical examples of designs include architectural and engineering drawings, circuit diagrams, sewing patterns and less tangible artefacts such as business process models.
What are the 4 main aspects of good design? ›Effective design centres on four basic principles: contrast, repetition, alignment and proximity. These appear in every design.
What are three 3 qualities a good design should have a good design should? ›Good design makes a product understandable. Good design is honest. Good design is unobtrusive. Good design is long-lasting.
What is the golden rule of design? ›A good interface should be designed to avoid errors as much as possible. However, if something goes wrong, your system should make it easy for users to understand and resolve the problem. Simple ways to deal with errors include displaying clear error notifications and descriptive hints to resolve the problem.
What are the 3 main user interface types used to interact with a computer? ›
User interfaces may be of three types- command line interface, graphic user interface and menu-driven interface.
What is the most popular interface? ›- Audient iD4 MkII. The best audio interface for smaller budgets. ...
- SSL 2+ audio interface. Get 'that SSL sound' at an amazing price. ...
- Focusrite Scarlett 4i4 3rd Gen. ...
- Universal Audio UAD Apollo Twin MkII. ...
- Native Instruments Komplete Audio 2. ...
- Arturia Minifuse 2. ...
- Audient Evo 4. ...
- Black Lion Audio Revolution 2x2.
UI is created in layers of interaction that appeal to the human senses (sight, touch, auditory and more). They include both input devices like a keyboard, mouse, trackpad, microphone, touch screen, fingerprint scanner, e-pen and camera, and output devices like monitors, speakers and printers.
How many types of software interfaces are there? ›There are five different types of interface that might come with an operating system. These are: Graphical User Interfaces (GUI) Command Line Interfaces (CLI)
What are the 2 most common types of user interfaces used in computers? ›- Graphical User Interface.
- Touchscreen Graphical User Interface.
- Menu-Driven Interface.
- Command Line Interface.
- Conversational UI.
What Are Three Main Types of UI Design? There are various types of UI design, but three of the most popular are graphical user interface (GUI), voice user interface (VUI), and menu-driven. In GUIs, users interact with information by manipulating visual objects on a digital screen using a device or touch.
What are four phases of UI design? ›The UI/UX design phase in software development usually involves a pre-design stage, design research, and four other main stages: sketching, wireframing, visualization, and slicing.
What are the five objectives for designing user interface? ›Below are the major objectives in constructing a UI: consistency, usability, navigation, visual appeal, interoperability, performance, and accessibility.
What are the eight main guidelines for user interface design? ›- Strive for consistency. ...
- Seek universal usability. ...
- Offer informative feedback. ...
- Design dialogs to yield closure. ...
- Prevent errors. ...
- Permit easy reversal of actions. ...
- Keep users in control. ...
- Reduce short-term memory load.
- Google Workspace (formerly GSuite)
- Dropbox.
- Salesforce.
- Cisco WebEx.
- SAP Concur.
- GoToMeeting.
Is Google an example of SaaS? ›
From a network that spans the globe to innovative solutions that transform organizations, Google Cloud has SaaS built into our DNA.
Is Google Apps example of SaaS? ›Google Apps is a Web-based and collaborative Software as a Service (SaaS) solution that customizes the proprietary Google platform and brand for businesses of all sizes, including large enterprises.
What are SaaS tools? ›What are SaaS Tools? SaaS (Software as a Service) is a cloud computing system or software distribution model in which a cloud provider hosts apps and makes them available to you over the internet.
Is Netflix an example of SaaS? ›First, let's cover off the question in this title: yes, Netflix is indeed a SaaS company that sells software to watch licensed videos on demand. It follows a subscription-based model whereby the customer chooses a subscription plan and pays a fixed sum of money to Netflix monthly or annually.
Is Facebook a SaaS? ›Also, it is a digital platform for communication not a publisher or media platform. Hence, Facebook is not an example of SaaS.
What is the 3 benefits of SaaS? ›Advantages of SaaS Technology
Accessibility: Ability to run via an internet browser 24/7 from any device. Operational Management: No installation, equipment updates or traditional licensing management. Cost Effective: No upfront hardware costs and flexible payment methods such as pay-as-you-go models.
Software as a Service and Industry Growth
SaaS is defined as a cloud-based subscription service, which makes software easily accessible over the internet. It removes the need to download software onto your computer, and thus is able to provide regular updates and support.
SaaS can be especially advantageous for small businesses because it provides access to expensive, high-powered software that might have been otherwise unobtainable through conventional purchasing methods. Also, the subscription based method eliminates the extreme financial risk of expensive software.
What are the 5 elements of good design? ›The Elements of Design are the things that artists and designers work with to create a design, or composition. The Elements are: line, shape, space, value, color and texture.
What are the 4 basic design rules? ›Effective design centres on four basic principles: contrast, repetition, alignment and proximity. These appear in every design.
What are the 6 principles of interface design? ›
- Clarity. In UI design, the term clarity means using recognizable features and elements that are intuitive to interact with. ...
- Consistency. Consistency is essential in design for building trust. ...
- User Control. ...
- Comfort. ...
- Ease of Use. ...
- Accessibility.
- Get to grips with UX.
- Design for inclusivity and accessibility.
- Explore (and learn from) different design systems.
- Practice as much as possible.
- Seek out and embrace feedback.
- Experiment with different tools.
- Take inspiration from UI Design and tech trends.
Adobe XD is considered by many as the go-to design tool. It's fast, it's powerful, and there's not a lot you can't do with it! From early ideation and low-fidelity designs, right through to impressive animations and true-to-life prototypes, Adobe XD will see you through the entire UX and UI design process.
Which are the 3 Golden Rules of user interface design explain in brief? ›Mandel's Golden Rules
Place Users in Control. Reduce Users' Memory Load. Make the Interface Consistent.
Types of user interfaces
graphical user interface (GUI) command line interface (CLI)
There are 10 principles of design in total! They're also known as the elements of visual design, and are: movement, balance, contrast, proportion, repetition, rhythm, variety, emphasis, harmony, and unity.
What are the 7 elements of great design? ›The elements of design are the fundamental aspects of any visual design which include shape, color, space, form, line, value, and texture.
What are the 8 elements of design? ›All visual designs are composed of eight elements (Point, Line, Shape, Form, Tone, Texture, Color, and/or Text). These elements are combined and arranged to create a desired visual appearance.
What are the 12 principles of design? ›Understanding the basics
There are twelve basic principles of design: contrast, balance, emphasis, proportion, hierarchy, repetition, rhythm, pattern, white space, movement, variety, and unity.