Conversational UI: How to Create а Brisk Human-Machine Dialogue

User experience (UX) focuses on the design and usability of a website, application, or product. Good UX means that the user can solve their problem or fulfill the need without too much difficulty. This leads to greater user satisfaction, a higher conversion rate, and fewer business costs.

Still, we all know that only user decides whether your product has good or bad UX. Then, how to understand that you and your design team are doing everything correctly and the product is going to provide a great user experience? 

UX design KPI examples come in handy here. As Eleken is a team of product designers, measuring KPI performance is one of the components in our work on projects. UX KPIs allow us to measure the success rate of the product in numbers and therefore see how effective the product is. As well, in case we make some changes to the existing design, measuring the right indicators can show whether those improvements work the way we want.

As you may have already understood, in this post we want to discuss what metrics to use to measure user experience and therefore the success of your design solution. 

As well, we'll: 

• explain the difference between the two main types of UX metrics
• provide you with UX metrics examples
• tell you how to collect data for them
• tell how and when to use these design success metrics.

Main types of UX metrics

UX metrics help you to understand the current state of the UX so that you can decide in what direction to make the improvements. Generally, we divide design KPIs into two types: behavioral and attitudinal.

Attitudinal metrics focus on what users think and say about your product, while behavioral ones focus on customers’ direct interactions with your product. Over time, these indicators will help you track and compare the quality of your user experience.

Behavioral metrics

There are many behavioral metrics, this list will provide the most helpful metrics to measure and track changes in the quality of the user experience:

1. Pageviews

Pageviews is an engagement metric that shows the number of pages the user has viewed on your site over a time period. It shows if your users are interested in some content on the website, or vice versa have trouble finding certain information. To add the context to this metric it’s best to combine it with other metrics we will discuss next.

2. Time per task

Time per task determines how long it takes for the user to complete the task. To get the average TPT score we add the results of each respondent and divide it by the total number of respondents. In most cases, the shorter it takes for the customer to succeed, the better UX your product offers.

3. Task Success

This KPI shows the percentage of customers who have successfully completed a specific task (for example, complete the profile, fill in the billing information).

How to calculate:

The more respondents you’ve got, the more accurate the result of Task Success is. As well, take into account if the user completes the task for the first time. This way you can track how their experience changes over time.

4. Errors rate

Error rate shows how many times users enter incorrect information (make mistakes while completing the task). It allows you to understand how user-friendly your product is. 

There are two ways to calculate the errors rate:

• If it is possible to make one error per task (or there are many error opportunities but you want to track only one) we calculate the error occurrence rate:

For example, three out of twenty users made a mistake when entering their password. We calculate the error rate as follows:

3/20=0,15x100=15%

• In case it is possible to make several errors per task you can calculate an average error occurrence:

For example, 5 users were filling in the billing data, this task has 6 error opportunities. User 1 made one mistake, user 2 - three mistakes, user 3 made no mistakes, user 4 made two mistakes, and user 5 - two mistakes. And we calculate the average error occurrence rate: 

(1+3+0+2+2)/6x5= 0,26x100=26%

5. Bounce Rate 

Bounce rate shows how often users give up on a task, for example filling out payment details. To learn the reason why users bounce, you should combine this metric with some of the attitudinal metrics we are going to discuss below.

Collecting data for behavioral metrics is quite easy. Moreover, in automatic mode, without involving an interviewer or observer in the process. You can collect data for behavioral metrics in web analytics and application analytics, based on user sessions on the site, search history, bug tracking, and so on. So this is an easy and inexpensive way to start tracking UX metrics.

You can also track these metrics with the help of other UX research methods: observation, A/B testing, eye tracking, usability testing.

All these metrics are, of course, important, but they do not give a complete picture and understanding of why you are getting these numbers. And this is where attitudinal metrics come into play.

Attitudinal metrics

Attitudinal metrics measure what people say and how they feel about your product. There are fewer of these indicators than behavioral ones, but they are not of less importance. Here are some of them:

SUS (System Usability Scale)

This metric is widely used among UX designers and researchers. It is based on a survey that aims at evaluating the ease of use of a site or product. The survey consists of 10 questions, which the user should answer with a score from 1 to 5 (ranging from strongly disagree to strongly agree).

You can also use this metric to compare your product with competitors’ or with your previous version before improvement. For this purpose, you take each score from respondents, add them together and multiply by 2 to get from 0 to 100 points. The average SUS score is 68. 

If you get 68 and more points then everything is OKAY with the usability, in case you’ve got lower than 68 - your product requires optimization.

CSAT (Customer Satisfaction) 

It is often important to be aware of the overall level of user satisfaction concerning everything from features to app functionality. UX satisfaction can be measured using the CSAT - Customer Satisfaction score.

CSAT can give you a general idea of ​​how users feel about your product, or it can provide you with more detail on specific features or stages of the customer journey. Typically, the CSAT is based on a scale from 1 (very dissatisfied) to 5 (very satisfied) and asks a question “How satisfied are you with the service/app?”. 

But you can also be more specific and ask something like “How satisfied are you with finding the desired good?”, and such

To calculate the percentage of satisfied users, divide the total number of satisfied users (those who voted 4 or 5) by the total number of respondents and multiply by 100.

(Satisfied users/Total number of respondents) x 100 = percentage of satisfied users

NPS (Net Promoter Score)

If users tend to recommend your product, app, or website based on their experience, then your UX is probably good. 

To track the NPS you need to ask users only one question: How likely are you to recommend this service/app/website to your friends and colleagues?

Users put the score from 1 to 10, where one stands for “not at all likely” and ten means “very likely”.

According to the results, we divide users into three categories: detractors (those who put from 1 to 6 points), passives (7-8), and promoters (9-10). And calculate the NPS by subtracting the percentage of detractors from promoters.

How to collect data for attitudinal metrics

There are many ways to measure attitudinal metrics but the most popular are polls, user interviews, and widget buttons.

Feedback button

The easiest, most efficient, and least time-consuming way to collect this kind of data is with a CTA you place on a website or app. Users click it whenever they want. You can install such CTAs along the entire user journey or in its specific part.

Targeted polls

Polls, unlike a button, are not activated by users, but by your app/website. They tend to be highly targeted, allow you to ask more questions at a time, and segment your respondents.

The two most popular types of polls are slide-out (slides out to the side of the screen) and full-screen (appears right in the middle of the screen). They are also used to recruit users for in-depth interviews or surveys.

User interviews

User interviews are an easy and effective way to get data/feedback from the customer. During the interview, you ask a user questions on a certain topic that you’ve prepared beforehand.

This method helped us a lot when we were working on the redesign of Gridle, a client experience platform. We conducted six interviews to gather information about their needs and priorities. We transformed the insights from these interviews into an empathy map (you can see it below) to get a deeper understanding of customers.

Remember that quality metrics are not enough to make UX improvement decisions. You will need to "enrich" this data with context and details that are missing. Behavioral and attitudinal UX metrics alone cannot provide answers to all questions.

At the end of surveys, ask open-ended questions so that users can justify their answers and give you more information. This is the only way to understand what experience they received, at what point it was good, and at what point something went wrong.

How to choose the right UX metric

It is impossible to create an objective list of, let us say, "5 best UX metrics to track". There is only a classification into behavioral and attitudinal KPIs for user experience. And first of all,  when choosing what to track we should take into account what is important for your customers, your business, and the user experience that you want to measure. And with everything else, Google’s HEART framework will help you.

In 2010, Google experts wrote an article about the framework that helped them choose the right metrics for 20 different products. The essence of Google HEART is to effectively combine behavioral and attitudinal metrics.

HEART stands for Happiness, Engagement, Adoption, Retention, and Task Success. If you look at the description of each item below, you will realize that each of them is either behavioral or attitudinal:

• Happiness includes attitudinal metrics: CSAT, NPS, and SUS.
• Engagement includes usage metrics such as visits per user per week, number of photos each user uploads per day, average session length.
• Adoption and Retention include metrics such as the number of unique users over a while (to differentiate new (adoption) and existing/returning users (retention).
• Task success includes behavioral metrics such as task success rate and error rate.
  

All of these metrics are useless if they are not tied to some kind of user goal. For example, if your site visitors spend a lot of time on your website, this does not mean that your UX design is good. On the contrary, it can mean the opposite - they spend a lot of time just to complete a simple task.

So, firstly define the user goal (What do users want to achieve? How does the product help them reach their goal?) and following it choose the appropriate metric.

“If you cannot measure it, you cannot improve it” – Lord Kelvin

Without constantly tracking user experience KPIs, it's difficult to understand if you're on the right track and that the work you do is meaningful and rewarding.

Don't miss the opportunity to use real-time feedback from users. Use both behavioral and attitudinal metrics to measure, compare and track the quality of the user experience over time. UX metrics will also allow you to see how product changes affect customers and the business itself.

And of course, measuring the success of the user experience alone won’t help to ensure that your business is doing great. Read about key SaaS metrics to measure the right indicators and keep your business on track.

When it comes to refining SaaS products only sky's the limit. Even the most successful companies need a redesign to stay competitive and meet their client’s needs. 

As a design agency, we at Eleken have discussed in our blog that any UI/UX design services should take into account both business goals and customers’ needs and should be based on thorough research. The redesign is not an exception. 

But we know that very often it is difficult to understand how to make the first step towards revamping your product. Learning from others can be helpful in this case. For that reason, in this article, we are going to discuss some of the best SaaS app redesigns that can motivate you to get started right.

And before seeing what popular SaaS companies can teach us, we want to share our experience of UI/UX redesign projects with you.

Griddle

Griddle (now Clientjoy) is a client experience platform that helps small businesses manage their customers.

When Gridle came to Eleken they were already seven years on the market and of course, both the look and the feel of the app needed dramatic refreshment. Our task was to make a redesign so that this cloud software would provide a better user experience and clearly communicate its value proposition.

As we always do, we started the redesign process with the research. We analyzed which product features users use often, and which they tend to omit to understand what improvements the user interface needs. As well, we conducted six user interviews to clearly understand what Griddle’s audience expects from the app.

The research helped us to come up with the following insights:

• The app needs an intuitive user onboarding 
• Users want to see an improved workflow that would allow them to manage their clients easier and faster
• Users want the product to solve their issues in just a few clicks
• We should minimize the use of design elements that don’t serve any practical purpose 

Clear user onboarding

We chose a minimalistic design with a lot of white space and short easy-to-understand statements to design an interactive product tour that shows the user how the app operates and promotes them to make the first step.

As well, to help new users feel completely comfortable using the app we added a short product tour to the Dashboard.

Simplifying the workflow

• Proposals. To simplify the process of creating proposals we designed several proposal templates. The user can choose the one they like, quickly edit and send it.

• Invoices. To create and send invoices in just a few clicks we created customizable invoice templates.

What lessons can we learn from this story?

• To come up with effective design solutions you should base each of your decisions on the insights you’ve found in the research.
• Teaching users how to quickly and efficiently reach their goals is especially important for complex SaaS products; that’s why you should strive to create an intuitive and unobtrusive user onboarding.

Slack

In March 2020 Slack introduced its biggest redesign yet. The story of revamping this cloud business messenger is not about launching new cool functionality, or completely changing the UI of the application, it’s about bringing the order to the app and making the experience of interacting with the application smoother and more approachable.

Make it easier for newbies

Slack was working on its redesign when the pandemic burst out. Many people were sent to work remotely and Slack acquired a lot of new users that hadn’t used this app previously. Such circumstances made the team reassess everything they’d already done once again to make an extra focus on the ease of use and increased productivity.

Though Slack is known for its powerful user onboarding, they noticed that when a new person starts using the messenger, they feel a bit disoriented (users are unaware of many features and don’t use the software to its fullest). The solution was to make the app more organized, and the first step was to optimize navigation. 

Here are the most essential changes Slack launched with this redesign: 

•  Top navigation bar

Slack decided to put some essential functions up in the navigation bar: 

The redesigned interface of the navigation bar now contains a big search field that helps you to easily browse through the organization, a “history” button, and arrows to go back and forth in your recent activity. In general, this updated navigation bar resembles a familiar for everyone design of a web browser. This way newbies intuitively know what functions this bar performs.

• Sidebar

Now you can put your messages/channels/apps in order and group them in accordance to different projects, teams, etc. The ability to build sections and put priorities makes interaction with the app easier and more effective.

•     Compose new letter

At the top of the sidebar, you can find compose letter button. With the help of the “New letter” button, the user can start writing a message with no need to specify where and whom to send it first. In case you want to continue writing the letter later, it will be saved in draft. 

The field of composing a new letter looks like an ordinary email that we all got used to. Such a design makes newcomers feel more comfortable using Slack.

‍Easier access to tools

One more reason why people love Slack so much is the fact that it integrates with different useful tools that make the work process easier (e.g. Google Drive, Freshdesk, etc.) The problem was that very often users didn’t know how to access those tools from this cloud messenger.

The design team added a small icon of the lightning right in the field where you are supposed to write a message. Now all these features are more understandable and approachable. 

Click the lightning icon to see the list of actions you can take with the applications you’ve installed in Slack.

What lesson can we learn from this story? 

• Getting inspired and adopting some popular design elements from other apps/services is not something you should be ashamed of. The vice president of design in Slack, Ethan Eismann, said about the redesign process: “One important principle that started to emerge was not reinventing the wheel”. 
• Navigation is an essential part of the design. With its help, users find what they need and reach their goals. That’s why when improving your SaaS make sure your navigation is intuitive and not cumbersome.

Uber

The first thing we want to mention about Uber’s UX and UI redesign case study is that though it is a popular and successful app, it also had its ups and downs when refining the UI/UX. 

Redesign 2016

In 2016 Uber had a rebranding campaign aimed at repositioning itself from simple ride-sharing software to a more solid technology organization.

For this purpose they presented:

• An animated video that communicated their new mission. It features bits and atoms that stand for technology and people
• The new logo that replaced the letter “u” with the symbol that resembles the backward letter “c” 

This campaign failed as people found the message in the video too complicated and the new logo difficult to find on their mobile screens when they were in a hurry. Moreover, there were many memes on the Internet that the new logo has been likened to…well... “a butthole based on bathroom tiles".

Still, not everything was so bad. Besides working with brand identity, Uber improved the feel of the app which brought positive results. 

“Where to?” button

Previously, Uber app was super simple, you could have your ride with only one tap (no need to choose a destination or opt for different products). Over time the interface had to somehow accommodate more than eight options in one place plus the schedule function. Naturally, it caused much confusion.

To find the right solution, the design team conducted solid UX research which included lots of user interviews and prototype iterations. Again and again, they iterated prototypes until the right answer was found. 

The solution was to start from the end: firstly the user chooses the destination and only then they can decide how to get there, while you are picking how to get from point A to point B the app searches for the most suitable pick-up location.

As well, user research allowed designers to identify the problem with pick-up points. 

• Drivers don’t set their exact location but expect the app to choose it by default
• The location that users set is usually not the pickup location but just the address of a building
• Selecting the optimal location of pick-up involves clarifying through the phone call, walking the extra distance to the car, and so forth.

After the redesign, Uber’s app:

• Selects the optimal pick-up point based on the user’s personal data
• Provides customers with the fastest walking route to the spot
• Gives the customer complete control of this process if needed

Redesign 2018

In 2018 to completely win back customers’ trust Uber’s team started with studying their audience. 

Logo

Conducting customer research helped them to come up with the following key points:

• Add more contrast with black and white colors
• Use the word instead of a symbol in the logo
• Bring back the letter “u” 

All these insights contributed to creating the following result: 

It’s bold, clear, and easy to notice, so people like it.

What lesson can we learn from this story? 

• First of all, you shouldn’t neglect the principle of simplicity when it comes to designing (or redesigning) SaaS products (though the product is complicated, the design must be simple). 
• Secondly, always research the target audience and test your ideas until you find the right solution.

G Suite

In 2015 Google announced the redesign of their Google apps as G Suite to keep consistency within each of its tools and overall brand. 

As the company grew, they regularly added new services such as Google Drive, Hangouts, Sheets, and so on. Over time, Google’s team noticed that all their applications look completely different.

Of course, each application serves its purpose, but the problem was that as a user moved from one Google app to another, they had to get accustomed to the different user interface over and over again. And the goal of the redesign was to make all services feel like they are a single service with a connected experience and a consistent look. 

During the UI redesign process, Google’s design team cleaned up the interface of each service and added design elements that extend from one application to another making them all one whole.

To explain the reason for the redesign, Google introduced a detailed case study of their redesign to stay transparent with their audience.

What lesson can we learn from this story?

• Take care of consistency. Over time your brand will grow and evolve, new tools, features, or even products may appear. That’s why it’s important to have a design system that will allow you to keep the interface clean and intuitive and your brand message clear and understandable for each of your customers.
• Explain your design decisions. Talking with your clients about the results of a redesign will show them the “why” behind each change. 

There’s always room for improving your SaaS

Based on lessons we’ve learned from each of the above examples we can formulate the following design principles for SaaS applications:

• Strive for simplicity
• Base each step of your product redesign on the research
• Improve information architecture
• Don’t try to reinvent the wheel
• Keep consistency as your brand evolves
• Always test your design decisions before launching them

In case you need some help with rethinking your SaaS application, you can find some useful information in another blog post on how to redesign an app or contact Eleken’s team to have all your questions answered.