/
Design process

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

0

mins to read

In my childhood, impressed by Star Wars, I dreamt about having robot friends like R2-D2 and C-3PO. Could I ever have thought that we would become a bit of Luke Skywalker chatting with machines in less than two decades? 

Yet not so smart and empathetic, chatbots help businesses boost customer engagement and increase work efficiency through close-to-natural communication with users. On the other hand, it turns into quite a frustrating experience when a conversation with a chatbot hits a dead-end. 

To create an effective conversational interface for customers, Eleken designers meticulously searched answers to critical questions. How can we make bots act more humanlike? What differentiates a quality chatbot from those that spur customers to abandon a dialogue? What challenges do chatbot developers face and how to create a conversational user interface that will benefit your brand? 

If you feel like this is what you need to know, keep reading this post. 

And may the Force be with you ©

What is conversational UI?

Simply put, it’s an interface connecting a user and a digital product by text or voice. Conversational UI translates human language to a computer and other way round. This became possible due to the rise of artificial intelligence and NLP (natural language processing) technology in particular.

Conversational interfaces are extremely important in the customer service realm, where agents should always be ready to accept and process clients’ inquiries. During peak or non-working hours, when customer support isn’t up and running, chatbots can address some customers’ questions and route the communication further to a human “colleague”.

In all fairness, it has to be added, a customer experience depends much on chatbot communication abilities. Contextual AI-driven and rule-based bots are more flexible in understanding and interpreting users’ queries than chatbots with preestablished answers that narrow communication to limited algorithms. 

And here you might be furrowing your brows in bewilderment: “Wait, what are you talking about? Too many cryptic words in one sentence.” 

I anticipate this, so here the explanation goes.

Types of conversational UI

If we divide conversational interfaces into two groups, there would be chatbots and voice assistants. Even though we concentrate on chatbots in this article, voice assistants shouldn’t go unmentioned.

Siri by Apple, Microsoft’s Cortana, and Google Assistant use voice recognition and natural language processing to understand a human’s commands and give a relevant answer. The AI technologies voice assistants are based on are complex and costly. Thus, for the time being, only tech giants can afford to invest in voice bots development.

Unlike their voice counterparts, chatbots became quite a widespread solution online businesses adopt to enhance their interaction with customers. 

Depending on core technology, chatbots fall into two categories:

  • AI-driven
  • Rule-based

Chatbots powered by artificial intelligence, namely natural language processing and machine learning, can literally read between the lines. They not only understand users’ queries but also give relevant responses based on the context analysis. 

What is thrilling about AI-driven chatbots that they:

  • Absorb immense amount of data and continuously learn
  • Understand different languages (at least those with Latin alphabet should be no problem)
  • Comprehend users behavioral patterns
  • And (that’s mind-blowing!) they can make decisions

Rule-based chatbots yield to their AI relatives. A set of rules predetermines their interaction with customers and gives no space for improvisation. However, this type of bots is less expensive and easier to integrate into the various systems. The more detailed algorithm a chatbot has on the backend, the better the communication experience a user ultimately receives.

rule-based chatbot example
A chatbot-humans conversation mapping

Regardless of the chatbots’ usefulness for business, there’s a catch. People don’t like chatbots...yet.

Conversational UI challenge

Before coming to this conclusion, I decided to conduct my personal tiny UX research. I surveyed only one but reliable participant whose opinion I deeply respect - my husband (he’s a software engineer and a tech geek). 

My questions were whether he had ever used a chatbot and what his experience was. It turned out that my respondent tries avoiding communication with chatbots because of two reasons (have you noticed this “2” number is chasing me throughout the article? Let it be the “number of the day” then.

So, the reasons are:

  • It costs extra effort explaining the issue in the way a chatbot could understand
  • The bot failed to comprehend the issue, so it could neither help nor connect to a human agent

Waste of time and nerves. 

Well, not inspiring results. But what do other people think? So I googled and found the research carried out by Userlike guys that proved my concerns.

More than 50% of the surveyed audience was disappointed with the chatbot’s incapability to solve the issue. Around 40% of respondents claimed the bot couldn’t understand the problem. 

disadvantages of chatbots
The most impactful negative aspects of communication with a chatbot

However, 70% admitted that the chatbot answered them quickly, and 40% mentioned the chatbot could assist them outside of regular working hours.

advantages of interacting with the chatbot
The positive experience of interacting with the chatbot

According to the following graph, people would like to use chatbots rather as a link between them and a human agent than a full-fledged assistant. 

do people love chatbots? survey

The conversational user interface design needs to generate the best customer experience possible to show users the huge chatbot’s potential. Every detail in conversational UI/UX should be considered to mitigate the skepticism of those customers whose initial experience was corrupted by a low-quality chatbot.

On the other hand, a well-designed bot will help you:

  • Strengthen brand image
  • Assist with handling multiple tasks
  • Reduce service costs

The biggest challenge is making chatbots more human-like without pretending to be real humans (as this deceit can provoke even more negative emotions).

9 principles to humanize chatbots UI

Here are some principles to help you create chatbots your customers would love to talk to.

  1. Make a chatbot more specific

To avoid customers’ judgment that your chatbot is incapable of helping them, be more specific in what your chatbot can offer to customers. If a bot can accomplish simple, unambiguous tasks like help customers place an order, check order status, or choose food from a menu, that would be helpful. In case you aren’t sure your chatbot is trained enough to handle complex requests, think of limiting the options it can help with. 

The chatbot on the image below asks customers what they’re craving without options’ limitation, therefore can’t eventually understand the responses. 

communication with a chatbot example


  1.  Use multiple-choice buttons

AI-driven bots learn to recognize and understand human language common patterns thanks to NLP technology. However, the problems happen when people alter their natural language in the heat of aspiration to help bots better understand them. And this is a total fiasco. 

The conversational interface designed to facilitate the interaction with customers leads to a conversation dead-end. Persuasive design techniques can help rectify this problem. For example, several options of answers, realized in the interface by multi-choice buttons, limit a user to a range of offered selections.

multiple-choice buttons for a chatbot
Multi-choice buttons ease the communication between a user and a chatbot
  1. “Give me more emotions!”

Emotions are an invisible glue that sticks us to screens when watching a heartbreaking drama. In messaging, we use emoticons, images, and gifs to convey our emotions and make a text less dry and soulless. The same approach will work for conversational interface design as well. 

chatbot window example
Emoticons’ injection creates a more friendly communication vibe
  1. Give feedback, react, reward

It’s crucial for the chatbot to identify peak moments in dialogue and adequately react - encourage, congratulate, or cheer the client up. I loved this natural dialog between the Freshchat bot by Freshdesk and a user. It sounds like a small chat between two schoolmates.

Freshdesk chatbot example
  1. Nudge customers in a right direction

Sometimes it’s necessary to give users a gentle push to perform a particular action. At the same time, a chatbot can reassure a customer that it’s okay to skip some action or come back later if they change their mind. It’s crucial for the user to have a feeling of a friend’s helping hand rather than a mentor’s instructions.

  1. Utilize selected words for commands

It’s great if you try enriching your chatbot’s vocabulary. However, using various words to mark the same functionality may lead customers to confusion. They simply won’t comprehend what actions they need to take if every time these actions are named differently. It would be better to be consistent and use some selected words throughout the conversation.

  1. Choose a chatbot’s voice and tone

The main thing here to remember is that a conversational interface should correlate with your brand values and act as a brand ambassador. The rest is up to you and your business to decide what voice your chatbot will have. It can even be like this one.

the voice and tone of a chatbot


  1. Create a character

Remember R2-D2? He wasn’t just a piece of metal and microchips. He had a personality. Your chatbot should also have. 

The most stunning example of a chatbot’s personality I’ve ever seen is an AI-driven bot Kuki (formerly known as Mitsuku). She’s extremely smart and ready to chat with you 24/7. 

Make sure your bot is a vivid character people can remember. 

the use of an artificial intelligence markup language by a chatbot to imitate human conversations
The bot uses an artificial intelligence markup language to imitate human conversations

However, it still should be a bot. Don’t try to delude customers that they’re talking to a real human. It may evoke a negative attitude to your brand when they reveal the deceit. And again, set your chatbot’s purpose first and think of a character afterward.

  1. Avoid a dead-end situation

Well, perhaps it’s not that easy task, but at least a chatbot must have a pre-established setting for the cases when it doesn’t know the answer. However, it shouldn’t be one phrase perpetually repeated. Also, it’s essential to offer a walkaround if the conversation hits a dead-end. The ultimate goal is to provide a customer with a great conversational user experience, so go from there.

A final word

Will chatbots reach the real human conversational level? I would vote for “yes”.

With artificial intelligence development, chatbots will become smarter and more capable of driving the conversation without embarrassing flubs. Our designers always keep a curious eye on the latest tech trends and are ready to apply the freshest knowledge in designing your chatbot. And here we have more about UI/UX trends and SaaS trends for 2021; read them on.

Natalia Borysko

Author

Table of contents

Top Stories

Design process
/
0
min read

UX Design KPI Examples: Learn How to Measure User Experience

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.

UX metrics

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.

  1. 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.

Time per task
  1. 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:

Tas success

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.

  1. 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:
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%

  1. 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).

SUS (System Usability Scale)

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?”. 

CSAT (Customer Satisfaction)

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.

NPS (Net Promoter Score)

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.

Image credit: mopinion.com

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.

Image credit: delighted.com

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.

Empathy map designed by Eleken for Gridle

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.

Google Heart Framework

“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.

Design process
/
0
min read

Best SaaS App Redesigns: 4 Case Studies and Lessons Learned

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.

SaaS user onboarding example
Example of onboarding screen on how to create a new proposal

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

SaaS dashboard design example

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.
SaaS client experience platform design
  • Invoices. To create and send invoices in just a few clicks we created customizable invoice templates.
SaaS client experience platform design

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

Slack redesign 2020 case study

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 redesign of Slack's top navigation bar
Image credit: images.idgesg.net

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.

Slack sidebar sections redesign
Image credit: pcworld.com
  •     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.

Compose new letter in Slack
Image credit: theverge.com

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. 

Lightning icon in Slack: easy access to integrated tools

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

Uber redesign case study

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” 
Uber logo redesign
Uber’s logo “before” and “after” rebranding in 2016 Image credit: fortune.com

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.

Uber "where to?" button redesign
Image credit: simonpan.com

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
Uber pick-up option redesign case study
Image credit: simonpan.com

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: 

Uber logo redesign 2018

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

G Suite 2015 redesign case study
Image credit: libraries.cca.edu

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.

Gmail before and after the redesign 2015

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.

Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.
Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.