UX/UI: How the Search interface was Tailor-made

UX designLeave a Comment on UX/UI: How the Search interface was Tailor-made

UX/UI: How the Search interface was Tailor-made

Agents of the Client Contact Center are soon going to work with the new Salesforce Cloud Service environment. As a UX/UI designer it was important to create the right experience for them and craft a friendly to use interface. The scope of the project is large. There are many topics to cover, but for now let’s talk about the standard search interface in Salesforce.

The goal

The goal for the search interface is: “Agents must access the customer data quickly and efficiently, so that the time is used to help the customer”. Also, searching the customer and his data is the starting point of the agent his journey. This makes it a crucial part of the interface.

The use case (what does the agent want to accomplish) attached to this goal is: “If a customer calls and is not recognized by telephone number, then as an agent I want to be able to look up the customer and his products as quickly as possible so that I can help him with his questions”.

In order to reach this goal it was necessary to define what elements the agent need in order to perform a search. A list was made by the product owners:

  • Zip code + house number or e-mail address.
  • A customer must be able to be found via the subscription number of a linked subscription.
  • A customer must be able to be found by bank account number that we use for collection.
  • If a customer has moved in the past or has communicated his move for the future, the customer must be able to be found at both the old and the new address.
  • In the search results, customers with active subscriptions are shown at the top.

These requirements were initially the starting point for the search interface. But after talking with the agents over a period of couple months, the requirement were constantly changing and evolving . Which is a good thing, meaning that talking with your user gives valuable information!

To give some more context: The whole idea of using Salesforce was to reduce complexity of the agent his processes. But also making the system future proof, creating excellent customer journey and eliminate technical debt.

First step: analysing the old interface

In the old interface (at this time of speaking, still the current one) there are a lot of different interface elements. After conducting interviews and followed couple agents for several days it became clear that there are a lot of unnecessary elements on screen, which creates a clutter and a cognitive overload. This overload causes the proces of the agent to be more complex than it has to be.

Image 1. Old search interface that the agents use.

What did the users say?

By asking what the agents do not like, we could create a list of all their pains. This gives a clear focus on where to make improvements on. Several of these pains were:

  • “Zip code + house number go in the same field, providing no context”
  • “Searching by using a name, email or bank account etc. is impossible, due to long loading times”
  • “The alternative search gives options, that we never use”
  • “Pressing F3 in order to search”
  • “Difficulties in reading the search result list. You need to do a horizontal scroll + vertical scroll things are not organised”
  • “Seeing the name of the consumer multiple times in the search results makes it confusing”

As became clear due to the observations, users are used to unnecessary complex patterns. It made the learning curve higher then it should be. Besides this the look and feel is outdated, and does not qualify with modern standards.

It is therefore important to create a better visual hierarchy through removing the clutter and cluster important elements together in such a way so they are easy to scan and clickable.

That also means coming with a solution to improve the view of the search results, so that takes away the pain of the user. And finally, use terminology that makes sense. Using the right words contributes in reducing the learning curve and making the interface less complex. Thus more user friendly.

As became clear due to the observations, users are used to unnecessary complex patterns. It made the learning curve higher then it should be.

Next step: Design explorations

By using the Salesforce Lightening Design System (SLDS) it is easier to build up an interface. Though, sometimes it was necessary to create custom elements, yet sticking to the guidelines of the Salesforce Lightening branding. This causes restrictions, but at the same time brings a challenge. We want a tailor-made solution, but at the same Salesforce offers a lot of options. And custom made elements means more development time.

A different aproach

Salesforce provides a standard Global Search Box in its interface header. At the start of the project we quickly came to the conclusion that this search box had its limitations (and actually too many possibilities). We could not provide the right journey and experience for the user. So, we needed a to find a different approach for this search component and as a result the search interface was tailor-made for the agents.

As can be seen below there are several design iterations for the search interface. And over the course of couple months it became more and more clear what the agents want to see. In other words, the interface evolved with the growth of our knowledge.

Image 2. First design iterations of the search interface.

The interface contains three main components; the Salesforce standard header, the search input fields, and the search results.

Testing the interface with the user

After some iterations, it was time to conduct a usability test with the users. For this test we made an interactive prototype along with a user script, containing several tasks which they had to complete. The test was not only focused on the search interface, but several other screens as well.

The goal of the test: To find out if the new flow was speeding up the proces and if the search interface was clear and intuitive to use.

Doing tests, is an important aspect of being a UX designer, because it gives valuable feedback on how to improve your design and craft the right experience for your user.

Image 3 & 4. The agents who participated in the usability test.

After the test we did a feedback round. Together with the agents we discussed what they thought of the test and what they liked and disliked in the interface. A good way to find out if there are similarities in their opinion.

Image 5. The feedback provided by the agents.

Eventually the following conclusions were made:

First problem: When you expand the advanced search options, it take up more space on the screen, causing less search results being shown. Yes, it is possible to scroll down, but it is important the user can see most of the results without scrolling. And since there can be a long list with results it is important to show the key elements straight away.

Second problem: In the top part, the search input fields are organised in a way that makes them more grouped and easier to scan and find, resulting in a reduced time of selecting them (Fitts’s law). This is already an improvement over the current interface, where your attention goes to all over the screen, creating a cognitive overload. The problem with this new lay-out is that it is horizontal orientated. Causing the input fields to be spread out over a long horizontal line. This creates a conflict with Fitts’s law, because now you have to read all the way from the left to the right and this can cause fatigue for the eyes.

Third problem: The content, shown in the search results, are showing too much details. Reducing the content would reduce the amount of columns needed, and thus making it more compact, scan-able.

Doing tests, is an important aspect of being a UX designer, because it gives valuable feedback on how to improve your design and craft the right experience for your user.

Final step: The new interface

Using the feedback from the test, the new goal was to eliminate these problems in order to create the perfect interface.

Image 6. Final design of the search interface.

1. Search input fields

The search input fields are on the left. By doing so we could position all the input fields under each other. Making them easier to scan and clickable. It especially had a big impact on the advanced options. Which were first spread out horizontally. And are now clustered under each other.

Besides this, there are several interaction decisions made. For example: after typing the zip-code it automatically jumps to the house number. So the system recognises the input string (4 numbers, 2 letters). In the old interface users were used to type zip-code + house number straight after each other. This pattern was used so much, that it made no sense in removing it. But the pattern is improved by giving better context.

2. Search results

The search results are on the right. This gives it more attention, since it takes up 2/3 of the screen space. But because of the extra space there was room to show search results without having to scroll. It also has a reduced load of information. And by just showing the essentials it becomes much more compact and easier to read.

Writing the address on two lines instead of one line makes it less of a choir to read all the way from left to right. The same applies for names. E-mail is an exception, it will cut off after a certain amount of characters.

Agents also have the options to click left, on the name of the customer, which directs you to the customer view. But clicking all the way right, on the product name, you go directly to the detail page of the customer his product. These decisions speed up the proces of the agent.

3. Terminology

Terminology is also adjusted. For example ‘advanced options’ is changed to ‘more search options’. The header title ‘search’ is now known as ‘search for client’ and the word ‘reset’ is now ‘reset input fields’. By adapting the terminology you provide easy to understand contexts for your user, so they do not have to think about what something means.

4. Look and feel

By using the Salesforce Lightening Design System (SLDS), the look and feel gained a massive upgrade. The UI is not the most important part, since the focus lies on creating the perfect flow (UX). But in the end having an interface that provides good typography, colours, white space, interaction feedback etcetera, helps the user in the way he uses it.

Conclusion

By creating a better layout-out the way of showing content and navigating through the interface is more pleasant and usable. All by all the interface now provides an experience that suit the needs of the user, and eliminates all the pains they previously had. Though, a design is never finished and will evolve over time. On to the next iteration!

UX take aways

  • Conducting user tests contributes in a much higher quality interface.
  • The lay-out and composition of elements has a big impact on usability and user friendliness.
  • Less is more: by reducing unnecessary elements, clutter is minimised, resulting in less cognitive overload and a better to use interface.
  • Terminology is important in creating a language that is easy to understand and making the interface unnecessary complex, it also gives meaningful context to the interface.

By Pablo Sijbrants

User Experience and User Interface designer

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top