7 Useful Tools to Help with Your UX Audit

In a perfect scenario, your users should learn how to use your product without the need to contact customer support. And as a team of product designers, at Eleken we always strive to create simple and self-explanatory UI/UX that helps users quickly adopt the product. Still, there are cases when SaaS is too complex for people to feel its value from the very first interaction. That’s the time we have to think out an intuitive SaaS onboarding process. 

Good onboarding experience that brings value for both users and SaaS businesses should be:

• Unobtrusive
• Have low friction
• Contextual
• Interactive

In this article, we will show you five SaaS onboarding examples featuring the abovementioned characteristics that you can use as an inspiration for your cloud company.

Onboarding examples

Depending on the context and type of a cloud product, each project requires different approaches to onboarding design. And when planned out correctly it positively influences SaaS customer success.

Below we want to illustrate Eleken’s best onboarding experiences and lessons we’ve learned from them so that you’d want to create the one that suits your SaaS best.

Gridle: saving development hours with Intercom code-free product tours

Gridle (now Clientjoy) is a client relationship management software that focuses on helping small companies and freelancers store client data and manage sales, starting from leads and ending with invoices. Considering its target audience, Gridle set its unique value proposition as full client lifecycle management automation and simplicity of use.

Eleken was hired to revamp the look and feel of this SaaS product so that it clearly communicates the core value proposition to its audience. To successfully cope with this task and understand customers’ true needs, we started our design process with user research.

One of the insights we received from talking to users was that the platform should make it easy for newcomers to get started and give them instant confidence that they can succeed. That is, we had to design an intuitive onboarding.

To help the company save time (and therefore money) needed for development, we decided to introduce Gridle to its users with the help of a no-code interactive product tour by Intercome known for its simplicity.

Onboarding starts right after signing up and gently guides the user through the app’s key features, giving them a clear understanding of what to do first.

The main thing about product tours you should remember is that they should be super easy, and illustrate only the information that the user needs to start feeling product value. Thus, for Gridle onboarding, we chose a light minimalist design with a lot of white space that quickly focuses users’ attention on straightforward copy and bright CTA.  

Additionally, to make it even easier for non-experts to get started, we created customizable templates for Proposals and Invoices. Templates reduce the mental effort needed to create a new thing and shorten users’ time to value.

Habstash: making long sign-up process painless

Habstash is a British financial service startup that helps people navigate the savings needed to buy homes. They hired Eleken to turn the existing prototype into a minimum viable product (MVP).

To bring maximum value and show users what type of house they can afford within their current budget, or help them calculate how much money to save up to buy a house of their dreams, Habstash needs to learn user preferences and gather a lot of personal information such as income level, amount of current savings, preferable home location, home type, and so on.

As you may understand, people are often unwilling to enter a great amount of data as a part of the sign-up process. So, our challenge was to create such an onboarding flow that prevents design cluttering and user drop-off.

We made a decision to use the Wizard design pattern, “a step-by-step process that allows users to input information in a prescribed order and in which subsequent steps may depend on information entered in previous ones”, so that novice customers can easily perceive the information.

Habstash onboarding consists of 5 steps, each of which is represented on a separate screen with questions and fields.

The first thing the app wants to know is whether the user is saving alone or with a partner, and what their primary goal is. Depending on the answer, Habstash can show a different onboarding scenario for saving with the partner option. Also, there is a progress bar at the top of each onboarding screen that lets users quickly understand how many steps are left.

As well, the app warns users if they enter the field incorrectly and explains what has been done wrong.

To retain users if they can’t/don't want to continue filling in the information, we added the “Save&Exit” button. It offers customers to enter email address to be able to continue the registration from the same point where they left.

As the last step, the app uses the entered data to form a target plan with an estimated deposit for a dream house and offers the user to create an account to have full access to Habstash features. 

To reduce friction and help users start using the platform faster, when filling in the password Habstash provides a checklist, points at which that fades away once the password matches with the requirements. Note that customers also have an option to create an account with just one click using their Google profile.

Prift: effectiveness because of the simplicity

Prift is a personal finance platform that helps people cope with money issues and quickly achieve their financial goals.

Eleken’s task was to design a simple, accessible, and intuitive MVP, and as Prift’s target audience are people over the age of 30, we opted for light minimalist UI and avoided overusing gamification.

Just like in the Habstash case, we used the Wizard design pattern to create onboarding flows.

Onboarding steps are designed with a light-blue and white color palette which aligns with the overall product style and makes the information on each screen easy to read.

To encourage users to go through all stages of onboarding we added a small note on each screen that explains the importance of filling in more fields, designed a progress bar, and showed newcomers how many steps are left. As well, we added a “Cancel” button, so that the user can quit the onboarding anytime.

In case some specific issue arises, the “Support” button in the top right corner is always there to contact Prift users with a customer support representative.

To help newcomers effectively use your product, you should define which functions in your app are essential for reaching customers’ primary goal and, more importantly, teach users how to use them. 

Thus, to fully benefit from Prift, users should fill in the information about their property and pension. To simplify these processes we designed an opportunity to either enter the data manually or by adding an address (for property)/by connecting to a pension provider (for pension pot).

As a result, we got informative onboarding that is effective because of its intuitiveness and simplicity.

SEOcrawl: combining in-product and email onboarding

SEOcrawl is an all-in-one SEO management tool that came to Eleken for UI/UX overhaul. As a part of the redesign, we had to create a new onboarding sequence.

Product tours are great for quickly communicating essentials to users in a simple and understandable way. Email marketing perfectly engages subscribers and users check their inboxes more often than the app they’ve just signed up for. Therefore, we decided to combine these two types of SaaS onboarding. 

Welcome email

After signing up for SEOcrawl users receive a welcome email in their inboxes. It suggests novice customers watch a 10-minute onboarding video to learn how to make the most of SEOcrawl and offers them to make the first action (add new project) by clicking the CTA button.

We made sure that the text in the email is readable, the CTA is clearly visible, and the overall design matches the product’s style.

As well, to make the email more trustworthy and attract users' attention to its content, we added a funny photo of SEOcrawl’s CEO who welcomes newcomers.

Product tour

SEOcrawl’s in-product onboarding consists of just three easy steps so that users don’t get bored but vice versa, are kept engaged and interested.

Each onboarding screen contains minimum text and bright CTAs that leave no questions on what to do to proceed to the next step. Also, there is a progress bar for users to track their progress. When one step is completed a checkmark appears, which motivates users to complete the next tasks.   

The onboarding process starts right after the registration. When an account is created, the platform asks the user to take their first action - add a project. This way, newbies get not just a theoretical walkthrough, but a practical task.

We made adding a project just a piece of cake for SEOcrawl's users. There are only two fields to fill in.

The last step is for syncing the API (application programming interface). Not to scare users away at this stage and add credibility, we decided to put text with a privacy policy that states that all data from the user’s project is completely confidential.

Finally, users see the screen that notifies them that the data uploading is in progress. Not to lose a user at this point, SEOcrawl promises to send an email notification when all the data is ready.  

Process place: fun and engaging onboarding

Process place is a workflow management application that aims to bring clarity to all business processes. One of the main issues the platform deals with is helping HRs onboard new employees. Thus, the onboarding we designed for Process place is teaching users to kick off new workers.

Onboarding flow starts with a pop-up window that welcomes newcomers and offers to “start exploring from completing the kick-off checklist”. Note that it’s always important to give your customers the ability to omit onboarding. Thus, the user can either click the green CTA button and proceed with an onboarding checklist or close the pop-up and explore the product on their own. 

By nature people don’t like leaving lists of tasks uncompleted, so we decided to design the onboarding in a form of a to-do list that users have to cross out task by task.

As well, it’s important that the checklist creates a sense of progress. After completing one action the user should receive clear instructions on what to do next. This way, we engage customers and encourage them to explore the product further. 

To entertain users a bit, at the last onboarding step, we decided to add a funny image of sheep that clap their hands and a short instruction of the final task.

When the user completes the whole checklist, they come across a congratulation pop-up. And, lastly, not to leave novice users alone in an app, it’s important to give them a direction on what they can do next to start using the product on their own.

In Process Place, we offer new customers to start building their own processes from scratch or with the help of customizable templates.

What helps us design effective SaaS onboarding

Based on the cases described above, we can single out the following characteristics that help create good SaaS onboarding.

1. Thorough user research. To create the onboarding that helps your customers, you should identify what problems they want to solve and focus your efforts on what makes sense to the user, not what you want them to do.
2. Personalized onboarding. If your onboarding aligns with different types of buyer personas, they are more likely to feel the value, and therefore start paying for your SaaS. 
3. Creating a few onboarding steps. Define how many steps the user needs to perform the first task. Remove all unnecessary elements to reduce friction and create a smooth user experience. Make sure each step of your onboarding has its clear purpose and brings customers use.
4. Identifying the Aha-moment. Users come to your application not because of the beautiful design or the great number of functions it offers. They want to have their problems solved. The sooner you will show them the value of your solution, the more chances they will retain and pay for your app.
5. Offering templates. Performing an action or completing a task is easier if you have a suggested example of how it can be done. Therefore ready-made templates educate users and save them time.
6. Showing the progress. As users move from step to step, they should understand how long the education is going to take and what their current results are. Showing the progress promotes newcomers to take further actions and prevent them from dropping off.

Want to learn more about how our designers can help you create great experiences for your customers? Schedule a call with us.

Did you decide to conduct the UX audit? Congratulations! You’re really serious about your business. Many SaaS entrepreneurs realize the importance of a seamless user experience for business growth. However, significant time and money spent make most of them keep this thought laying on the shelf.

I wouldn’t say that the UX audit, if being appropriately done, is a no-brainer. The good news is there are a few online UX testing tools you can use during your audit and benefit from them. In this article, we’ve prepared a list of UX tracking and analytics tools that proved to be helpful and insightful.

1. Google Analytics

Using Google Analytics for the UX audit may seem a bit of an unexpected solution. This tool typically comes to mind when we’re talking about market research and the digital marketing area. Yet Google Analytics can efficiently serve as a UX analytics tool, providing you with valuable insights regarding your website visitors, which you can utilize for user experience improvement. 

Conversion is the most important indicator of website performance, and it’s not a secret that a great user experience has the power to make people take expected actions - leave their contact data, subscribe for a newsletter, or purchase. Based on various metrics, you will be able to better understand your audience’s behavior from the first minute they land on your website. For example, Google Analytics data will tell you where your potential customers come from and how long they usually stay on your landing page. 

Behavior reports help you answer the questions:

• How many unique visitors visited your website?
• What were those CTAs customers reacted to?
• Which page performed the best in terms of customer engagement?

Data like demographics, interests, locations, languages, and devices let you adjust your user flow, CTAs, and overall UI. Our designers know that even the smallest detail in a page design can be a turning point leading either to checkout or to leaving a site. 

By understanding users’ behavior, you can enhance a customer journey and ultimately lead more people to conversion.

As for mobile devices, Google offers mobile app analytics for Firebase that provides insights on mobile application use and customer engagement, being a good tool for UX audit.

2. Mixpanel

Unlike Google Analytics that tracks website visitors and is great to have a general understanding of traffic, Mixpanel is focused on actions users take on your webpage. This tool helps receive answers to questions like “how many users pushed the CTA button from the pricing page,” for example. The results may hit designers upon an idea of what needs to be changed in UX to improve conversion.

However, Mixpanel insights may be too one-sided, being based mostly on UX researchers’ assumptions. Thus, it would be more effective to compare Mixpanel with other analytical tools data to reach unbiased conclusions.

3. Kissmetrics

Kissmetrics is one of the most expensive web analytics tools, but it is definitely worth every penny. The tool offers robust analytics and customer behavior reports that help UX designers better understand customers and improve user experience. 

The Kissmetrics functionality allows to:

• Find out what features customers use the most
• See key business metrics (churn rate, MRR, subscriptions, new trial starts)
• Identify the most viewed webpages
• Track the best customers and cohorts behavior
• Discover weak points in the onboarding funnel

Being not as detailed as Mixpanel but undoubtedly more profound than Google Analytics, Kissmetrics provides an effective mix of raw and interpreted data. Just press the “Analyze customers behavior” button and get insights helpful for your design audit.

4. HotJar

If you want to understand what people are doing on your website and what elements and information attract them the most, you can have a sneaky peek at their behavior. Nothing illegal, just a smart digital tool! Hotjar creates interactive heat maps of users’ clicks, scrolls, and moves to give you an idea of how users interact with your website. 

Hotjar’s line-up consists of four products: heat maps, session recordings, surveys, and real-time feedback pools. However, heat maps are the product Hotjar is mainly associated with. The “heat” is a color scale highlighting the most popular “hot” webpage areas with red color and the least interacted or “cold” - with blue color. 

Click maps show which CTAs users click the most. Also, you can find out that some non-CTA UI elements attract more attention and draw users away from taking expected actions. Being aware of these nuances, you’d probably decide to rearrange important buttons to improve user experience and increase conversion.

Scroll maps show how deep to the bottom of the page your website visitors usually go. If users don’t scroll down, it means they can miss some information you want them to know. 

Move maps track mouse movements without clicking or scrolling. It can tell us what information a user finds interesting to check on your webpage.

Hotjar has a decent competitor with even more robust functionality to facilitate the UX audit.

5. Crazy Egg

Crazy Egg offers five reports analyzing users’ behavior from different sides. There are no chances something will remain hidden after Crazy Egg’s behavioral analysis. 

Heatmap report highlights with different colors the most and least popular areas of your webpage. You can track whether the area where you place your CTA button falls into users’ attention.

Scrollmap report shows how far to the page bottom your website visitors go. If you think about putting your important CTA button somewhere close to a footer, you’d probably change your mind looking at the report’s results.

A lovely Confetti report displays each user’s clicks instead of a total number of clicks. You can create 22 customer profiles to have deeper insights into how each customer segment is performing.

Overlay report filters clicks by various criteria like new and returning visitors, device type, UTM campaign.

List report shows you the percentage of users who clicked on each clickable element on the webpage. 

With the help of CrazyEgg UX testing, you can get a comprehensive picture of users’ interaction with your website and think about customer journey enhancement.

6. UXCam

“UXCam is the market leader in app experience analytics, empowering mobile teams with fast, contextual, and high-fidelity insights,” - states UXCam on the official website, and we have nothing to object to. This tool does have excellent capabilities for app analytics. Session recordings, heat maps, crash logs, and even integration with Firebase, a Google platform for creating mobile and web applications, makes UXCam a great addition to your UX audit toolkit.

Here is what UXCam can help you with: 

• Record, analyze, and share sessions and events to identify if there are any users’ behavior patterns
• Track screen flow to overview how users interact with your app and what frictions they have
• Create heat maps to find out whether users encounter complication while using an app
• Log app crashes and UI bugs to communicate the issues to the product team to make necessary adjustments for the next app releases

The last tool in our list seems to be the greatest one as not figures, but real people tell you the truth.

7. UserTesting

UserTesting is not a conventional review site. It’s a platform where you can get prompt customer feedback on websites, mobile apps, and prototypes user experience.

You receive audio and video messages from your target audience once they will test your product and accomplish another task you assigned to them. Also, it’s possible to schedule live conversations, put questions, and get insightful answers with the help of which you can:

• Сheck market feedback on your design decisions before the product development stage
• Detect the bottleneck in user experience that causes frictions when using your product
• Make clear your customers’ needs

Small startups and large enterprises like Facebook and Grammarly are among UserTesting clients, so you can be sure it’s worth trying this tool for your UX audit.

A final word

UX audit can be a complex and time-consuming process, but with the right tools, it will reinforce the manual job your team or a third-party consultant does. However, it’s crucial to choose the tool that will serve the best to your project and accomplish the correct interpretation of findings. 

We at Eleken have profound experience in doing UX audits for our clients working with various tools. Drop us a line if you ever need our assistance. Also, learn how to conduct a UX audit in our next article.