Blueface Callflow
Problem Statement
"Improve the callflow page user experience."
My Role - UX Researcher, Designer
Background
Callflow helps a user to link a device to a number. To link a number, click on the ‘Phone’ icon on the menu on the left hand side of the screen and select ‘Call Flows’.
Prerequisite - Before proceeding, make sure all the ‘Users’, ‘Numbers’ and Devices you want to link have been added to the account.
Also, label the call flow with a name and a description and link the created call flow with the number (extension or PSTN) you wish to use in the ‘Numbers’ section. Naming call flows is very useful to recognise the call routing at a glance.
To send inbound traffic to a specific ‘User’/’Device, click on the ‘Create New Flow’ button on top the right hand side of the screen to add a ‘New Call Flow’.
A menu of tools will appear. From here you can manage your call routing or set up IVRs and hunt groups, according to your business needs, and amend these setting every time you need to do so.
Page Stats
By number of users, Callflow is the 5th most visited page in Blueface portal, thus making it a critical page from user and business point of view. As Callflows links your devices to numbers and is the core of the communication service, thus the user experience of the page is of key importance.
My Role
I was involved in all the design phases of this project. I conducted the heuristic review, user research, design and testing of the changes.
Process Involved
Heuristic Review/ Expert review
First I conducted the heuristic review to rate the page as per basic usability principles and discover usability issues.
User research
As this is a redesign project, I wanted to understand the existing user behavior so as part of primary research, I conducted interviews with 6 participants and also asked them to complete few basic tasks in the page/ think aloud testing.
Design
Based on the heuristic review, interviews and the think aloud testing, I designed some prototypes to resolve the bottlenecks in the existing design.
testing
As some new features were introduced to resolve the issues, I conducted usability testing for ease of discovering the new features and understanding them.
Interface
Basic Operations
To create a callflow, the user need to drag and drop the elements from the element section.
To delete an element, the user need to drag and drop the element in the right down corner which says "drop the element to delete it".
The user can erase the entire callflow by clicking on "Erase Callflow" button.
After the desired callflow is created, the user can save the callflow.
Process - Heuristic review
Visibility of system status - 4/10
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. The existing interface wasn't so intuitive and the error alerts were not very helping.
Match between system and the real world - 8/10
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. The interface scored well in this area as most of the terms in the interface are quite easy to understand and didn't use any jargon.
User control and freedom - 5/10
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. The existing interface had no undo function.
Consistency and standards - 9/10
Users should not have to wonder whether different words, situations, or actions mean the same thing. The interface following the same terms and designs throughout the portal.
Error prevention - 1/10
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. As the interface is using drag and drop features, there was no functionality to prevent the user from dropping elements which were not a valid move. In those cases, the interface allowed the user to drop the element in the wrong position and displayed error message.
Flexibility and efficiency of use - 5/10
Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. As the interface didn't give sufficient information about where to drop the elements and didn't allow undo and Redo option, the score was affected.
Aesthetic and minimalist design - 9/10
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. The interface scored well in this aspect as most of the requirements were fulfilled.
Help users recognize, diagnose, and recover from errors - 2/10
The error messages should be clear and concise but the interface failed to provide that.
Help and documentation - 3/10
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. The help section was inadequate to help a user understand different functions and usage of the elements, some usage examples would have been better.
Process - Inter rater reliability
Inter rater reliability score / Cohen's Kappa - 0.64
As one more of my teammate did the heuristic testing as well, we had to calculate Inter rater reliability score to find how much we agree with each other's score. We used Cohen's Kappa score using excel sheet statistical calculation and got a score of 0.64 , which is good.
Process -Research
Primary research
As part of primary research I interviewed 6 users. As this was a redesign/ usability enhancement project, we skipped the Persona creation step as we knew the users specifically. We also gave 5 tasks to complete in a think aloud testing method to know the current approach of the user to the tasks.
User feedback during interviews-
Deleting elements function is too tough!
Sometimes get confused what element will go next.
Want a better way to switch to different callflow.
Can’t view the number linked to callflow.
As the callflow gets larger, it is difficult to recognize the function of each element/ hard to scan and know.
Observation from the think aloud testing-
New users getting stuck in the beginning with what to do.
Deleting elements by mistake.
Users using older callflow to create new thus saving time.
Errors are tough to read! Design better error alert.
Process - Designs
Based on the feedback from the interview, added the phrase "Drag and Drop elements to create callflow" to get the users started.
The user can add notes which will always be visible to the user, thus helping the user to easily recognize the function of each added element. Earlier the user had to hover over the element and the note appeared as tool-tip, which was a headache as the user have to hover over a lot of similar looking elements to recognize the intended one.
As noticed that some of our users were duplicating older callflows to create new callflow thus saving a lot of their time from dragging and dropping, we decided to introduce this as a functionality.
We improved our error messages, which were easier to understand,
The most frequently received feedback was, as the callflow gets longer, the deleting area goes out of the screen thus making impossible for the user to delete elements comfortably. So got around the problem by introducing an option button with delete feature.
To prevent the users from placing incorrect elements, we guided the users with allowed and not allowed elements .
Process - Testing
testing
As we introduced several new features, we wanted to test if the user discover the features and understand them. For this we combined two approaches -
First click test to see if the user recognize the features. The first click test also gave us good idea about how long the user took to click on the feature which was a yardstick to measure how easy the feature is to find.
Task based think aloud usability testing where the users were asked to complete few tasks to see how clearly they understand the changes.