← Return to list of projects

Help Desk—a streamlined entry point to support our users

Product Requirements
Altamash Jameel

UX & UI Design
User Testing
Fanny Vassilatos

Engineering
Kamran Khatti

Company
Ready Education

The first project I got to help Ready Education with was to streamline the Help experience for users of their admin platform. They had 3 elements to marry into a single streamlined feature; a thrid-party Help widget, the Help Desk and the most recent addition, a dedicated "What's New" page showcasing the platform’s updates (or changelog) to replace an existing third-party the company had been wanting to deprecate.

The objectives were to:

  • introduce the new changelog;

  • have it all in one place;

  • increase engagement by keeping users inside the platform, reducing back & forth with external Help Desk.

 

Original feature

Originally, the Help widget, the changelog and the Help Desk all had different entry points.

A consequence of this was that users couldn’t easily find what they needed so they often resorted to emailing their Campus Success Consultant for help, taking up valuable time and resources.

The original changelog component, powered by a third-party plugin, wasn’t receiving notable engagement due to a lack of discoverability. This made it hard for the product team to communicate the changes brought to the platform. The Campus Success team consequently had to keep their customers informed on a one-on-one basis, again tapping into valuable resources.

A lot of places to click for help…

A lot of places to click for help…

The Help widget lived at the bottom-left  of the screen;

The Help widget lived at the bottom-left
of the screen;

The changelog could be shown and hidden  clicking on the bell icon next to the user  dropdown;

The changelog could be shown and hidden
clicking on the bell icon next to the user
dropdown;

And the link to the Help Desk was in the top-right user dropdown.

And the link to the Help Desk was in the top-right user dropdown.


The 2 main focuses were:

Positioning

Find optimal positioning for findability and click-through.

Centralizing

Centralize all 3 components in a single entry point.


 

Proposal 1

This first iteration was not very successful. The idea was to test a new positioning, give the Help widget a new skin and include the additional changelog and Help Desk components in it as “Quick Links” to increase findability.

There was a lot of confusion among the testers. People were directly clicking through to the external Help Desk to contact someone or search for a topic instead of leveraging the widget’s built-in contact and search functionalities.

We also noticed a lot of mentions of people expecting an FAQ, as if their eyes were just automatically scanning for that word.

Something worth mentioning about the bottom-right positioning is that people tend to ignore it since it’s so widely used for promotional ends such as chat bots.

 
 
The modal would open sticking to its bottom-right entry point.

The modal would open sticking to its bottom-right entry point.

 
It would provide autofocus on the search field for users to quickly find relevant articles.

It would provide autofocus on the search field for users to quickly find relevant articles.

 
The module would have an integrated contact form.

The module would have an integrated contact form.

 
We’d make sure to preserve user input with warning messaging.

We’d make sure to preserve user input with warning messaging.

 
 
Proposal 2 Positioning.png

Proposal 2

With this iteration, we tried top-right positioning and learned that findability was much better.

This time, we also explored a new visual treatment for the existing widget, but with a focus on articles relevant to the page that users were viewing at the moment of clicking on Help. We also made sure that links to the external Help Desk were secondary, to try and keep users active inside the platform.

Within the widget, testers were easily able to navigate to the contact form or article that we tasked them with. There were still a couple cases of people clicking through to the external Help Desk, which was what we wanted to minimize. Also, we still had two entry points which is just unnecessary noise; one that opened the Help modal (widget with update styling that included links to the Help Desk), and one for the What’s New / changelog (that opened directly in a new tab and brought confusion).

 
The modal would open centered in the viewport, suggesting content based on the active page.

The modal would open centered in the viewport, suggesting content based on the active page.

 
We’d automatically detect the logged in user’s email address to make contact form filling quicker.

We’d automatically detect the logged in user’s email address to make contact form filling quicker.

 
An inline article viewer would limit the number of clicks to external pages. We also thought of an icon to minimize the modal while staying in the same article to easily recreate the step-by-step instructions.

An inline article viewer would limit the number of clicks to external pages. We also thought of an icon to minimize the modal while staying in the same article to easily recreate the step-by-step instructions.

 
We would set response time expectations with confirmation screens.

We would set response time expectations with confirmation screens.

 

Rescoped — Final proposal

At this point we had a new focus of wanting to increase feature awareness so we came up with a simplified version of the Help feature coupled with a What’s New banner that we'd show when the platform had been updated.

Top-right positioning had been shown to be most effective, and we simply centralized all 3 items into a single dropdown menu.

 
Final Positioning.png
 

At this point we had a new focus: feature awareness


Positioning

Find optimal positioning for findability and click-through.


Centralizing

Centralize all 3 components in a single entry point.


Awareness

Include a dynamic element notifying users of new features and changes to the platform.


 
Final Asset 1.png

The dynamic What’s New banner allowed click-through to the Changelog and made it easy for us to ensure all our users were aware that there had been an update.

 

For the Help menu itself, we kept it simple, showing all 3 links in one place.

We made sure to include the F.A.Q verbiage that we saw most users were expecting.

This wording also helps distinguish the Help Desk (which is an external website with extensive documentation and articles which we renamed “Guides & FAQ”) from the Help widget (which is the floating module allowing for quick search and contact form).

Final Asset 2.png
 

Results

With increased visibility on where to find help, we saw our Guides & FAQ get a 60% augmentation of unique users in the first week compared to 90 days with the original combination of widget + user dropdown.

And in 2 weeks, we saw double usage of both the Help widget, and the Guides & FAQ than in the previous 90 days combined from before we built the new feature.

This means 2x unique users and 2.4x total usage.

In only 6 days, the What’s New banner improved click-through by 70% compared to what our average click-through per post was on our former third-party plugin.

These changes also reduced cost for the company by $100 per month since we were able to deprecate the third-party plugin.

Before, the highest click-through (main behavior we are driving for the changelog) we got was 16% (150/900 users) over 37 days. Now, with the What’s New banner, we have driven 53% conversion and more raw click-throughs (170/320 users) in just 7 days.

2x

augmentation in unique users visiting Guides & FAQ

70%

augmentation in changelog click-through using the What’s New banner

$100

in reduced monthly costs

Something we can learn from this project is that it’s easy to get lost in fancy UI’s, but often the most frictionless experience lies in the simplest interface. We just need to make sure we focus on the right objectives and use the right words.