Redesign for Cloud Phone System to Shorten Learning Curve
Every successful company reaches a point when it outgrows its product design. This was the case with Ricochet360.
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.
Product design
UI/UX design
Already from Ricochet360’s definition, it is getting clear how complex the software is.
Product design didn’t help to make it any easier — 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. And then the admin had to guide the rest of the agents in a contact center on how to include the new software in their workflow.
That’s a typical story for CRM, sales, or marketing platforms for enterprises — rich functionality, high degree of customization and integration capabilities can turn any app into a heavyweight.
But people don’t want to spend months trying to figure out how the new software works. People want intuitive apps that give a hassle-free solution to their problems.
Eleken had to make a heavyweight app light as a feather
The brutal learning curve was the key challenge that the Eleken design agency was determined to solve. We were asked to redesign the application to make it simpler and easier for sales teams to grasp.
Our mission was a success, and here’s how we redesigned Ricochet360.
The main redesign goal was to convey the feeling of trust and confidence that would urge leads to leave an email address and book a demo.
We took one page of the app and made a series of UI concepts for it — with different icons, buttons, typography, and color schemes. After a few iterations, our client picked one style that shaped all the further pages.
%201-2.png)
Forms are never fun to fill. Users often abandon them because they are too big and too confusing. Our form is no different — all those endless fields make you want to close the page and never open it again.
The analyses indicated some issues with UX that made filling out a new lead card painful for both Ricochet360 and their clients.
Take a phone number field. There are many different formats that phone number data can take. You can write a number with a plus sign or without, you can separate digits with dashes or brackets, you can finally write a single phone number with various amounts of digits.
Product redesign basically means detecting all the shortcomings in the current design and finding optimal ways to fix them. Designers deal with a great number of screens within a single product, but we’ll illustrate Eleken’s redesign process on one little page for adding new leads.
Here’s how it looked when it fell into our hands.
But the interface above shows no sign of how the number is supposed to be written down. It leaves the decision up to users, creating a source of uncertainty and confusion. 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.
Yet you can solve several problems in one stroke — by adding a little tooltip to make users adopt a standard phone number format. And by the way, how can users magically know what fields are required and what are optional without a single sign? Ah, they will figure that out after they have to deal with the resulting error (and confusion).
%201-2.png)
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 efforts yet make a positive difference immediately.
To redesign pages from the ground up, designers first have to restructure them — disassemble old screens on their core elements, like a Lego model.
Restructuring is a method used for redesigns to figure out what is the path taken by a user to complete a task, and what elements should be on each screen to help the user cope with their task.
The Add a new lead page also went into the small improvements program:
To ease 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.
For our Add a new lead page, restructuring helped 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 the information better when it is organized into 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, and now users won’t need to close their primary window to add a new lead.
Based on a current interface, we got a mockup that took us two hours to design and another couple of hours for a developer to put in place. The business performance improved instantly, without waiting for a months-long redesign project to reach the end.
Before
After
Before
After
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.
Let’s take a look at a few other page updates.
So we offered our client to restructure the menu. As a result, we have it 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.
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.
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.
That’s where our designers come into play, helping companies to unleash the full potential of their products.
We were working on pages of the configuration menu when we noticed some oddity with the menu itself.
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.
Sales agents see the on-call screen when talking to leads, 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 the Close button makes, 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.
And of course, we’ve removed the Delete button from the shortcut menu. No accidental lead deletions anymore.
For our Add a new lead page, restructuring helped to formulate the following 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 the menu items could be easily halved if we merge some of them together. Like, the Company info page sits perfectly fine inside the Company settings page.
Copyright © 2014-2020
Kiev, Ukraine
Dehtiarivska str. 33B
Contact us:
eleken@gmail.com
Marketing design services
