Revamping the user interface to make the learning curve for sales managers more tolerable

Every successful company reaches a point where it outgrows its product design. That was the case of one of our clients. 

Ricochet360 is a cloud phone system and CRM platform that enables sales teams to manage all their prospects in one place, alongside telemarketing, text, and email marketing. They have been on the market for 10 years and were going into the scaling stage. To scale successfully, they wanted to improve user experience and renew the design.

Ricochet360's clients loved the software once they got how to use it. The problem was that it took a while to get how to use it. It took about a month for the Ricochet360 team to help clients set up the application, customize it and train an admin to use it.

When users struggle so much at learning, they are likely to churn early. The best way to shorten the learning curve was to make the design more intuitive. For that, Ricochet360 needed experienced designers who could get it right. And that's why they came to Eleken.

Product analysis to detect weak points

For successful product redesign, we first had to understand the cause of a shallow learning curve. That’s why we started with the product analysis.

Product analysis is about taking a scrupulous look at the design and asking questions aimed at detecting design frictions.

For example, our designers found out that there is no defined format for entering data in the phone number field in the “Add a new lead” screen”.  You can write a number with a plus sign or without, you can separate digits with dashes or brackets, or write a single phone number with various amounts of digits.

Having so many options may cause confusion among users and they are more likely to accidentally skip a figure. Moreover, the CRM system has to store unmanageable customer numbers in different formats or use some algorithms to re-write the data to a preferred format. Read on to see how we solved this issue and others.

Small changes for big results

We had two months for the Ricochet360 redesign project, and it would take another couple of months for developers to implement the new design. Considering the project duration, we offered our client to implement small improvements to the existing design first. They would take minimum effort yet make a positive impact immediately.

For example, let’s take a look at the “Add a new lead” screen, where we found the issue with the undefined phone number format along with some other minor inconveniences that resulted in poor user experience. Here are some small improvements we made for this screen that immediately made the change for good:

To get rid of customer confusion, we added a tooltip for every field to show how it has to be filled.
We implemented standard data formats. Now if users enter a phone number in an invalid format, they get an error message.
We also indicated required fields with asterisks so users don’t have to guess which fields are necessary for creating a lead and which they can omit.

Based on the current interface, we got a mockup that took us two hours to design and another couple of hours for a developer to put everything in place. 

The business performance improved instantly, without waiting for a months-long redesign project to reach the end.

Screens restructuring to simplify user flow

After analyzing the product and detecting frictions, our designers had to restructure the existing user flows by disassembling old screens on their core elements, like a Lego model. 

Restructuring is a method used for redesigns to figure out what path is taken by a user to complete a task, and what elements should be on each screen to help the user cope with their task. By making user tasks easier to complete, we would manage to shorten the learning curve.

Let’s come back to the Add a new lead page. Restructuring helped our team to formulate the following hypotheses:

It’s too much for one form to have more than 30 fields. Not all of them are equally important. We can hide rarely used fields so that users call them up when needed.
People grasp information better when it is shown in groups. If we divide our fields into groups by meaning, the form won’t scare a user so much.
We can turn the page into a popup. Adding a new lead often happens to be a subtask that occurs during the work process, so users won’t need to close their primary window to add a new lead.

New screens design. Before & After

When designers have all screen elements in a row, it’s high time to put them back together, following best UI practices. For Ricochet360, we did no wireframes. Having a visual concept already approved, our designers were able to create final mock-ups immediately. In contradictory situations, they’ve made two or three mock-up options for a client to choose from.

Here’s the final look of our screen for adding a new lead.  Just compare with the original from the above.

Revising priorities of the lead management screen

On this page, users can see the list of their leads. In the previous version of the interface, they could also see rows of buttons, all in different colors, that gave users no confidence in their choice.

The Add a new lead button, which is supposed to be the key button here, was barely visible. The brightest red buttons on the page were the Delete buttons.

It's unlikely that users open a lead management page to delete all the leads. But it's something that the old interface wanted them to do.

We offered our client to restructure the menu. As a result, it became twice as short as the old version, with easy linking between related settings and consistent naming.

The redesigned screen has the Add a new lead button as the main pole of attraction. The Delete buttons are safely hidden, as well as some other excessive elements.

Redesigning the on-call screen to stop straining the user's eyes

Sales agents see the on-call screen when talking to prospects, and the users' experience here is clearly affected by information overload. The old screen has so many elements and buttons, and the names of the buttons are vague. What does the Close button do, does it end a call or close the page?

And look at that big red Delete button, placed right between the buttons called to save and end the call. What can be more annoying than deleting a lead accidentally instead of hanging up? Only regular accidental deletions.

It's unlikely that users open a lead management page to delete all the leads. But it's something that the old interface wanted them to do.

We redesigned the screen in such a way that just the right amount of information appears. All the unnecessary elements had gone, and all the important modules are now positioned in a clear visual hierarchy. It helps users to make sense of what they see — at first sight they understand how important one action is in relation to another.

Some features that were hardly available are now one click away. For instance, a sales agent can reach the script tab instantly, without leaving the page.

And of course, we’ve removed the Delete button from the shortcut menu. No accidental lead deletions anymore.

Changing the structure of the configuration menu

We were working on pages of the configuration menu when we noticed some oddity with the menu itself.

For our Add a new lead page, restructuring helped to formulate the following additional hypotheses:

It turned out that some closely related pages, like Transfer settings and Transfer groups, lived on the opposite sides of the menu and never met.
It also appeared that some names of menu items didn’t match the names of corresponding pages.
The number of menu items could be easily halved if we merge some of them together. For instance, the Company info page sits perfectly fine inside the Company settings page.

Renewed design resulted in shortening the learning curve

The final redesign did its job: now, new customers require less time to learn how to use the software, thus reducing the workload of support managers from Ricochet360’s side. The new design looks more modern and simple. Now, the company is ready to scale and earn new customers!

A redesign is probably the most frequent request the Eleken design agency gets from SaaS companies. Early startups don’t have time and money to obsess over sophisticated interfaces. But after a few years, as their feet are firmly on the ground, companies notice that poor design hinders their users to access the app functionality.

If you are about to scale and feel that your design is lagging behind, contact us! Our designers will help revise your design and suggest ways of fixing the problems that cause user churn.

Let's design something special

If it feels like our UI/UX design company is a good match, but you still have questions about our work process, we can give you a free 3-day trial working with one of our designers.

Let’s talk