60 Screen Design Examples: A Visual Guide to SaaS Best Practices

Need some UI inspo? Our UI/UX experts from Eleken (with 9+ years of experience) prepared real screen design examples featuring complete user flows from top SaaS apps with their pro explanations. From smooth sign-ups to efficient filtering, see how the best do it, then make your app shine.

P.S. Feel free to use the table of contents to jump straight to the category that interests you most.

What is a screen design? 

Screen designs, in the context of user interface and user experience design, refer to the visual layout and arrangement of elements on a screen. This could be for a website, mobile app, software application, or any other digital product.

Key aspects of screen design are closely related to basic design principles and include:

1. Layout: How different elements are positioned on the screen
2. Color scheme: The palette used throughout the design
3. Typography: Font choices, sizes, and text formatting
4. Icons and imagery: Visual elements that support the content
5. Navigation: How users move between different screens or sections
6. White space: The use of empty space to create balance and focus

The main goal of screen design is to create an intuitive, visually appealing, and functional interface that helps users accomplish their tasks efficiently while providing a positive user experience. 

So, the goal of the app design screens below is to give you solid inspiration to create aesthetic and functional interfaces for your app. Now, let’s move to the first category.

Sign up

A good sign-up should be quick and easy. It gets you into the product fast, maybe with a "Sign up with Google" button, so you don't have to type much. It usually asks for just the basics - like your email and a password. However, some types of applications have to keep the sign-up more complex due to their specifics. Let's explore how different companies handle sign-up design based on their needs.

Gusto

Gusto offers payroll and HR services, helping companies manage employee and contractor payments, as well as handle important paperwork related to taxes, labor laws, and immigration requirements. That’s why it’s sign-up process requires gathering detailed user information and has to be more secure than other regular software.

So, here’s what we wanted to pay your attention to: 

• Visual design: The layout is clean and minimalistic, with nice illustrations to maintain a friendly, non-intimidating vibe. The spacing is generous, ensuring readability.
• Guided experience: Gusto asks for a lot of info, but still, the process is well-structured and guides the user step by step with clear, progressive fields (that are segmented logically!).
• Clarity of actions: The "Submit" and "Create account" buttons are well-placed and prominent, making it clear when an action is required. 
• Feedback and error handling: There is effective real-time feedback for password creation, including visible indicators of password strength.
• Security focus: The flow integrates security measures like email verification and phone number confirmation in a seamless way, which builds user trust while keeping the process simple.

Grammarly

Grammarly screens design is here to demonstrate perfectly simple, clear, and effective sign-up. Unlike Gusto, Grammarly doesn't need to gather extensive data, allowing for a minimalist and straightforward flow.

What to pay attention to: 

• Clear and minimalist layout that focuses user attention on the main goal without distractions.
• Option for users to choose between creating an account with Google/Facebook/Apple or by using an email address.

Kahoot

Kahoot has four flows for sign-up process depending on the user type that wants to use the app.

Scool

Student

Personal

Professional

Some apps need to tailor the user experience based on different user types. Kahoot, a learning platform, solves this with a smart approach. They use a card-based UI design, asking users to pick their account type. This personalizes the experience while keeping the sign-up process simple and clear. This app screen design is a great example of balancing customization with ease of use.

LastPass

LastPass nails its sign-up flow by highlighting its key benefits without distracting users. They use short phrases and clean design to remind you why you're signing up. As a password manager, LastPass smartly asks you to create a Master password right away. They even provide tips and strength indicators to help you make it secure. It's a great balance of showcasing value proposition and guiding users through an important setup step.

Linear

Linear provides three ways to sign up for their service:

With Google

With email

With SAML

Linear's sign-up screen may seem simple at first glance, but it's well-crafted. It matches the product's clean style and is easy to understand. What sets it apart is the range of sign-up options. Besides the usual methods, Linear offers SAML SSO (Security Assertion Markup Language Single Sign-On). This option provides stronger security and may be attractive for enterprise users.

By the way, we've written an article about Linear's path to success if you're curious to learn more.

Mural

Mural basically follows best UX practices for their sign-up process, similar to those we’ve discussed already. There are two features, however, that grab our attention:

• Appealing illustrations that give the app a lovely aesthetic
• A smooth transition from sign-up to personalization, where users create their workspace

This smart approach means that once you've signed up, you'll see recommendations for relevant templates. It's a great way to help users quickly get started with Mural.

PayUp

PayUp's UX screens were designed by Eleken design agency. And we had an interesting story with the sign-up process. Our goal was to create a positive first impression that encourages users to complete the sign-up rather than abandoning it mid-way.

As you can see now, it strikes a balance between security and user-friendliness. As a financial app, Payup needs to collect sensitive information like account numbers and social security numbers. To make this less daunting, we broke the process into smaller, more manageable steps. This approach resulted in more screens but allowed for better explanations at each stage. By doing this, we managed to make users feel more comfortable sharing private data while still keeping the process smooth.

Shopify

Shopify's sign-up process is a great example of how to guide users through necessary setup steps. 

• They break tasks into separate screens, making each step manageable. 
• Short explanations and tips clarify why each action is important. 
• A progress bar keeps users informed about how far along they are, reducing frustration. 

This approach is ideal for apps that need users to complete specific actions before they can start using the software.

Log in

In most cases, the best UI/UX design practice for logging in would be the same for all SaaS – keep it simple and focused. This includes showing only the essential fields, avoiding unnecessary distractions, and providing clear, specific error messages if login fails.

So, not many user interface screens in this category.

Wix

Wix design demonstrates the basics of good log-in design.

• Clear, descriptive labels for each field to guide users.
• Few necessary fields and the ability to sign in with Google/Facebook/Apple
• Easy-to-find "Forgot Password" link to facilitate recovery without disrupting the process.

Invision

This Invision screen layout design demonstrates the sign-in with the team domain. Nothing much different from a standard practice, but it still demonstrates that there can be different options for this flow.

Onboarding

There are so many different user onboarding UX patterns for SaaS products, depending on your specific case. Below, we’ll try to cover the most popular ones with our UI screen design examples.

Marvel

Marvel's UI screen showcases a smart SaaS onboarding approach: onboarding during sign-up. This works great when you need specific details like company size or user goals to customize the experience. By blending these questions into registration, it feels less like extra work and more like helpful setup.

Marvel takes it a step further. They wrap up the sign-up process by prompting users to create their first prototype. This clever move means new users jump right into the app with a clear next step. It's a smooth way to kickstart engagement and show users the app's value from the get-go.

Framer

Framer web builder uses a video tour as an onboarding for their customers. As for a product whose features are not immediately intuitive, a video simplifies and visually explains the steps and serves its purpose effectively.

Framer’s video tour is well integrated into the app. Users can control if they want to watch it, see the number of steps left and can easily replay the step if needed. 

ProcessPlace

Process Place is a workflow management app for HR professionals for whom we at Eleken created a user onboarding experience in the form of a guided checklist. Here are its main benefits:

• It starts with a choice: follow a guided checklist or explore freely. 
• The onboarding is designed as an engaging to-do list, motivating users to complete each step. 
• Clear instructions and playful elements (like clapping sheep) keep users engaged. 
• After finishing, a congratulatory pop-up appears with suggestions for next steps, smoothly transitioning users from onboarding to active product use. 

This approach balances guidance with flexibility, ensuring users feel supported as they start using the platform. If you like what we did for ProcessPlace, learn more about our UI/UX design services.

Hubspot

Hubspot onboarding shows a well-designed example of an app tour. They offer users the ability to complete eight tasks, guiding them with tooltips. What is important about this design is that 

• Block with onboarding tasks does not overlap the interface
• there’s a progress bar indicating how much work is already done
• users can skip the tour if they want 

Any.do

Any.do chooses to onboard their users with a personal tour that requires getting in touch with a product representative. There are several reasons companies may opt for this type of onboarding:

• Your SaaS offers a range of advanced features or technical tools
• The product has a focus on premium or enterprise customers
• Users need to tailor the platform to their specific business requirements
• You are targeting a new or less tech-savvy audience

Any.do implemented a modal window letting users easily schedule an onboarding session in two quick steps, providing a smooth user experience.

Tana.inc

Tana.inc has a thoughtfully designed onboarding experience. While the instructional banner takes up a significant portion of the layout, it strategically avoids overlapping any essential UI elements. The copy and icons create an engaging atmosphere, effectively guiding users through the process and encouraging them to follow the instructions.

Change password

The main requirement for changing password flow is to be straightforward and secure. It’s usually no place for creativity. Let’s see how SaaS businesses are designing displays for this purpose.

HotJar

HotJar provides users with a smooth and well-structured process of changing their passwords. 

• It’s ​​easy to find in account settings
• It has clear labeling (like Current Password, New Password).
• Password criteria are displayed upfront (length, special characters).
• There’s a “Confirm New Password” field that reduces errors.

The overall user interface screen design is minimalistic with no distractions, which is suitable for this specific flow.

MeisterTask

Super easy and minimalistic change password UI screen with just two fields. We also like the way MeisterTask gives feedback as the user types whether the password is weak or strong enough. 

Any.do

Any.do provides an interesting way to change user password. Instead of the usual process, they send instructions straight to your email. This skips the extra step of confirming your identity since you're already in your email account. Plus, they've made sure the settings are easy to find in the app, so you're not hunting around when you need to make changes.

Harvest

Harvest takes a similar approach to password changes, but with a nice design touch. When you request a password reset, they immediately show a notification confirming that instructions have been sent. This small but thoughtful feature reassures users that their request went through.

Reset password

Users frequently forget their passwords, so as a business founder, your goal should be to provide a quick and effortless password reset process. Here’re some screen design examples for your inspiration.

Oku

Oku uses a common design pattern for Reset Password flow, allowing users to request a reset with just their email. They also do a great job at showing short message at each step informing users what's happening and what they need to do next.

Qwilr

Qwilr is one more example of a classic reset feature with a smooth flow, a prominent CTA button, and a clean design.

MailChimp

MailChimp's password reset process might look similar to others at first, but it has some smart features that stand out:

• They show password strength requirements, guiding you to create a secure password.
• Users can toggle between hiding or showing their password, making it easier to avoid typos.
• For added security, MailChimp includes a "I'm not a robot" verification step.
• The process ends with a clear, prominent success message.

SEOCrawl

Lastly, let's look at a Reset Password screen design created by Eleken for SEO tool called SEOcrawl. This design stands out in two key ways:

1. The reset link in the email is prominent and easy to spot, reducing user frustration.
2. Clear instructions are placed on the left side of the page, guiding users through the process step-by-step.

These design choices make the password reset experience straightforward and user-friendly.

Adding

In this section, we showcase various common adding actions users perform when using a SaaS product, like adding a link, or a new team member.

Attio – add a link

Attio demonstrates a standard "add a link" flow in their interface:

• Select the text you want to link
• Click on a familiar link icon (typically a chain or globe symbol)
• Enter the URL in the pop-up field

This approach follows user expectations, making the process intuitive and efficient. And we recommend sticking to this familiar pattern in your product as well.

Copy.ai – add a workspace

Creating a new workspace isn't a frequent action for most users, which is why Copy.ai smartly places this option in the sidebar alongside other features, without drawing excessive attention to it. This placement ensures the function remains accessible without cluttering the main interface.

When users do need to create a workspace, Copy.ai makes the process intuitive:

• A modal window appears with a blurred background, focusing attention on the task at hand.
• Users only need to fill in one field, keeping the process simple.
• A prominent call-to-action (CTA) button guides users to complete the action.

Craft – add a comment

For applications that have collaborative features, adding a comment function is a must-have. Craft designed comments sidebar that allows to add new and manage existing comments in an intuitive way. 

Prift – add pension

Prift, a personal finance management app, is one of Eleken's clients for whom we helped create an MVP. The app allows users to add their current pension savings and predict the size of their pension investments by retirement. Users can connect to their pension provider or enter the information manually.

This design simplifies a complex, secure process, making it intuitive and user-friendly. To enhance convenience, we included logos of different pension providers, not just their names, so users can quickly recognize and select the right one.

Freshsales – add a new contact

The Freshsales UI screen example demonstrates effective placement of an "add" function in tables with extensive data. In the "All Contacts" tab, the "Add Contact" feature is prominently displayed, as it's the primary action users are likely to perform. Freshsales emphasizes this button by highlighting it and positioning it above the table containing all contacts.

DocSend add an agreement

DocSend's example illustrates an effective design for introducing an "add" feature to new users or those who haven't used it before. They use an empty state design with a prominent call-to-action (CTA) button and concise copy that guides users on how to add their first agreement. As well, DocSend offers options to upload agreement or use templates.

Shopify – add a product

When you need customers to input a significant amount of information, it's crucial to make the process as user-friendly as possible.

Shopify's design shows how to make complex data entry easier:

1. Clear layout: Information fields are grouped into logical blocks, making them easier to understand.
2. Helpful feedback:some text
   • Error notifications explain how to fix mistakes
   • Success messages confirm when the process is complete

This approach makes it simpler for customers to add lots of information, even when the task is complex.

Zendest – add team member 

Here’s what we like about this design: 

• A clearly visible "Add team member" button
• Showing the number of steps the user would have to go through to complete the flow
• Users are asked to input basic but relevant information

LastPass – add a new folder

LastPass shows how you can differentiate between several adding options. Users can choose to "Add item" or "Add folder" using intuitive icons paired with clear written descriptions. This design helps users quickly understand their choices and take action. The folder-adding process itself is straightforward, further enhancing ease of use. 

Editing

People make mistakes, and that's okay. In software design, we give users a way to fix these mistakes. This is called editing. Let's look at some common ways to add editing options in SaaS.

Discord – edit message

Discord showcases a typical message editing flow found in many chat applications. It includes:

• A clear edit icon
• Options to cancel or save changes
• A label indicating that a message was edited

This design makes editing messages easy and transparent for users.

Airtable – edit field description

A popular and effective way to include edit functionality, especially in table views, is to place it within a three-dot menu (also known as an ellipsis menu).

Harvest – edit project details

Harvest's example demonstrates how to design edit functionality for multiple fields:

• Users select the project they want to modify.
• An "Edit Project" button allows changes to any information.
• For potentially problematic changes, a warning pop-up alerts users.

This approach makes editing complex information easier and safer.

Deleting

Depending on what the user has to delete, screen designer has to come up with different user experience and ensure different level of security and avoid accidental mistakes. 

Figma – delete account

Account deletion requires extra security measures to prevent accidental loss. Figma demonstrates a simple yet secure design for this critical action. When users initiate account deletion, Figma asks them to re-enter their password. This confirmation step ensures the action is intentional, not accidental. By implementing this approach, Figma balances quick action with necessary security for such an important operation.

Qwirl – delete page

When designing delete functionality, it's crucial to ensure users understand the consequences of their action. Qwilr shows this with a prominent pop-up warning message. This message clearly explains what will happen if the user deletes the page and asks for confirmation before proceeding. By providing this information upfront, Qwilr helps users make informed decisions and prevents accidental deletions.

Teachable – delete a student

Teachable uses a similar approach to Qwilr but adds an extra layer of security. In addition to showing a warning message, Teachable requires users to type "Delete Users" to confirm the action. This two-step verification process further reduces the risk of accidental deletions by ensuring users are fully aware of and committed to their decision.

Airtable – delete atask

Airtable shows a nice example of deleting low priority element, simply putting the cross icon that to delete a task without any confirmation needed. This design doesn’t require taking much space and is quite intuitive.

Ricochet-360 – delete lead 

Ricochet-360 is Eleken’s client for whom we did redesign of their CRM platform. So, here we’d like to show the “Before-after” result of our design work.

Ricochet's new Lead Management screen has a smart way of handling the delete option. Before, the delete buttons were big and red, which wasn't a great idea. We've hidden these buttons, and here's why that's better:

• It's safer: You're less likely to delete something by accident.
• It helps you focus: Without big delete buttons, you can pay attention to more important stuff, like adding new leads.
• It looks cleaner: The screen isn't as messy or confusing now.
• It makes more sense: Most people come to this page to work with their leads, not delete them.

By hiding the delete option, we made Ricochet screen easier to use and safer. It still does everything user need, but now it's set up in a way that matches what most people want to do when they use it.

Upgrade plan/subscription

When designing the "Upgrade Plan/Subscription" functionality, it's crucial to get it right. This feature is essential for business growth, so it must offer clarity, ease of use, and an intuitive flow for users.

Chargebee

In some cases, the product specifics require talking to sales to upgrade a new plan. Make sure it’s such an upgrade process is as simple as possible. Users should be able to schedule the call within a few clicks, without filling out complex forms or navigating away from the main page.

Gusto

What we appreciate about Gusto's design, beyond its intuitive and clean interface, is the inclusion of a progress bar. This feature is particularly useful because their upgrade plan process might be longer than some users anticipate.

Any.do

The Any.do subscription upgrade design is straightforward and user-friendly, making it easy to choose between monthly and annual plans, with clear savings highlighted for the annual option. We like the way they managed to place both plans benefits and billing information fill in on one screen without overwhelming it. 

Share

For an effective Share functionality design, the main thing is to use clear, recognizable icons and ensure users can easily find the share option. Offer multiple sharing methods (e.g., email, social media, or direct link) and make the process quick with minimal steps. Now, let’s move to screen examples.

Piktochart

The sharing option is easily accessible and visible. We also like the use of toggle switches for sharing settings ("Public on the web" and "Privately with password"). It provides immediate feedback on the current state, making it easy for users to adjust settings.

Mailchimp

This design example is interesting because of the security they add to the sharing process. A password adds an extra layer of protection, ensuring that only authorized viewers can access sensitive information. This is particularly crucial when reports contain confidential data about campaigns, audience engagement, or other metrics.

Loom

For the Loom screen recording tool, sharing functionality is crucial. They've excelled at putting numerous sharing features into a single, clean pop-up window. Users benefit from clear instructions for adding viewers, the ability to include a message for recipients, options to choose video-sharing methods, and easy link copying. Despite these multiple features, the interface remains intuitive and uncluttered.

Slack

Slack's message-sharing functionality is user-friendly and intuitive, allowing users to perform the needed action with just a few clicks. Additionally, the option to add context or comments when sharing a message helps clarify the purpose of the shared content, promoting better communication.

Invite team members

A straightforward process for entering email addresses, clear instructions on the invitation steps, and effective feedback upon sending the invite – it seems like that’s all a good design needs. Let’s see how popular SaaS copes with designing this flow. 

Flowxo

FlowXO offers a streamlined process for inviting team members. Users only need to click the CTA, enter the new team member's name and email address, and choose the role. This design focuses on the essentials, prioritizing simplicity and efficiency.

Hotjar

Hotjar features a clean, aesthetically pleasing user interface for inviting new team members. The design intuitively guides users through the process, ensuring they can efficiently complete the task.

Github

Here’s what we like about Github’s design:

• Clean and accessible UI
• Visible CTAs
• Notifications that tells users if something goes wrong in the process
• Visually highlighted added user

Search & filter content

Search and filter design can have so many various types depending on the specific needs that we can compose a separate article on this topic (and we actually have one dedicated to SaaS filter examples). So, let’s see the most widely used and interesting design decisions for this functionality.

ADPList

ADPList is a global community with about 30,000 mentors, so search and filter has to work well for them. 

Search

ADPList has a clearly visible search bar with a small hint that tells users in what categories they can search which is quite helpful.   

Filter

As for the filters, ADPList provides immediate access to them, placing them right next to the search bar and making all filtering options always visible to users. 

Gridle

The image shows the Customer tab of Gridle, a platform that helps businesses manage their clients. We designed this page to make finding client information easy. Here's how it works:

• Search bar: If you know who you're looking for, just type their name. The search even helps by suggesting names as you type.
• Filter option: Sometimes you might want to sort through clients in a specific way. We added a filter button for this. When you click it, it shows the most common ways to organize your client list.

We kept the design simple. The search bar is always visible, but the filter options are hidden until you need them. This keeps the screen clean and easy to use, while still giving you powerful tools to find exactly what you need.

Okta

Here’s an example of an advanced search and filtering. Okta needs it to efficiently manage large user directories, enabling quick access to specific individuals or groups. This is crucial for organizations with many employees, as it streamlines processes like onboarding, user management, and collaboration.

Though, using it can be complex, having a clean layout and providing immediate visual feedback, such as the number of results found, helps users understand the effectiveness of their search.

Notion

Notion is a versatile productivity and collaboration tool that combines note-taking, task management, project planning, and database functionalities. So, naturally it contains loads of data of different types that users need to filter to have their jobs done.

Filter

Notion’s filters are powerful. Here’s what we like about their UX design: 

• They are customizable: users can create filters based on various properties, such as tags, dates, or statuses, allowing them to display only the relevant information they need at any given time.
• They have multiple criteria: users can apply multiple filters simultaneously, which helps refine searches further and enables complex queries to find specific entries quickly.
• They update in real-time: changes made to filters are reflected in real-time, ensuring users always see the most current information without needing to refresh or reload.

Search

Global search design is interesting because it has not only regular search bar, but also latest search list, which helps you quickly repeat recent lookups and extra options, like Created by, or Date, that serve to enhance the user experience by providing targeted search capabilities.

Todoist

Todoist shows a great global search design.

• It is easy to find
• It has Recently Viewed searches
• It autocompletes as users type

Customize profile

Why should we care about creating proper design for this type of functionality? Customizing profiles enhances user personalization and engagement by allowing individuals to tailor their profiles to reflect their unique preferences and identities.

Proto.io

Proto.io's Edit profile page design offers two main benefits. First, the feature is easy to locate, ensuring users can quickly access their profile settings. Second, the page layout is clean, with ample white space. This minimalist design approach reduces distractions, allowing users to focus on editing their profile information without clutter or confusion.

Awwwards

We think Awwwards design is effective for several reasons: 

• Minimalist aesthetic: The layout uses a minimalist design, emphasizing essential elements without unnecessary clutter.
• Clear hierarchy: Information is organized into clearly defined sections (e.g., personal details, social links, preferences). 
• Prominent CTA: The "Save Changes" button is clearly visible at the bottom, encouraging users to finalize their updates. 
• Input field design: The input fields are well-spaced and labeled, providing a user-friendly experience.

Zenefits

Previous examples were for customizing personal profiles. Zenefits demonstrates how it differs for a company profile editing.

Splitbee

Splitbee is one more example of customizing a user profile with an effective input field design. We love the way their interface uses negative space and block layouts to simplify the process of entering information. Additionally, they incorporate visually distinct warning messages where necessary, enhancing user understanding and interaction. 

What are the screen design standards?

If we have to summarize what made all the UI screens we saw today so effective, it would probably be

• Consistent and organized layout. This helps in aligning elements, ensuring a cohesive design across different screen sizes.
• Enough spacing between elements for clarity. Avoid overcrowding the interface to improve readability and focus.
• Legible fonts that are easy to read on various devices. Typically, sans-serif fonts are preferred for digital screens.
• Consistent hierarchy in font sizes for headings, subheadings, and body text. 
• Consistent color palette across the interface to create a cohesive design. This includes using primary and secondary colors consistently for branding and navigation.
• Use of colors that indicate functionality, such as green for success, red for errors, and blue for links.
• Intuitive navigation. Place navigation elements (like menus, buttons, and links) in familiar positions, such as top or side navigation bars.
• Clear hierarchy to guide users through the interface. Key actions should be prominent, while less important options can be minimized.
• Error, warning, and success states presented clearly, using appropriate colors and messaging.
• Notifications that appear in a timely manner and give users enough time to read them before they disappear

That’s all for now. In case you need even more screenshots for UX design inspiration, check our video on best dashboard design examples.

And if you need experienced UI/UX designers to ensure your interfaces are created with best practices in mind, contact us today.