Ready, Set, TEST! The Benefits and Process of Usability Testing
How we successfully deployed one of our latest features, the progress bar, with the help of usability testing.
Working on Edraak’s research team and in the Data Optimization Unit (DOU) means we’re always looking for solutions to optimize our platform. Up until last year, Edraak users were required to enter all their information in the signup form. This resulted in a lag in signups since users felt the form was too long, often causing them to stop midway through the signup process. We couldn’t let that carry on.
To resolve this issue, the DOU stepped in and researched the ideal form length. In conclusion, we decided to make only select information mandatory, while the rest would be optional to fill in.
This method proved remarkably effective, and, as a result, signup numbers skyrocketed!
Afterward, we had another issue on our hands: not having enough data to build platform enhancements or improve the learning experience.
So, what was our ultimate solution?
A progress bar!
This new feature would indicate to the user the completion percentage of their learner profile.
No one wants an incomplete progress bar staring down at them!
We, as humans, are always seeking that satisfying sense of accomplishment, and what serves that better than a 100% complete progress bar sitting atop the dashboard ⭐️.
The figure above shows the phases of building a new feature. By this point, we have completed Phase 1 — the research — and have moved on to the design. As the idea owner, you may sometimes wonder, “This is extremely clear; who wouldn’t know how to use this feature?!”.
And that is why, after producing an initial prototype, you must undergo Usability Testing.
Advantages of Usability Testing
1- Delivers fresh and unpredictable insights. While you, as the designer, are well aware of the purpose of the new feature, others are seeing and experiencing it for the first time. Always keep that in mind.
2- Saves money and time. Before moving onto the implementation phase, usability testing helps pinpoint the major issues users face, allowing you to go back and amend in the design phase.
3- Offers a better user experience. Design is an iterative process. That’s why usability testing allows you to reach the optimal design that best fits user needs and preferences.
What Did Our Usability Testing Process Entail?
Stage 1:
This stage was more of a brainstorming session with a few technical members of our engineering team. Before receiving their feedback, the initial prototype looked something like this:
A notification bar with a clickable link to the learner settings[SH2] . The team’s feedback centered on 1) adding a bar description, as it might be confusing to a newcomer and 2) avoiding an orange-colored button so as not to draw attention when first landing on the page. Accordingly, we developed the below initial prototype to test.
Stage 2:
For this stage, we invited three non-technical subjects to test the prototype. The process was unified for all subjects, who went through the following scenario:
1- Describe what you see on the page.
2- What do you think is the purpose of the blue bar?
3- What action will you take after seeing the blue bar?
4- Suggest enhancements that would make this feature clearer for future users.
Tips for conducting effective usability testing:
· Help the subjects feel comfortable by holding a casual conversation. We don’t want them to feel scrutinized, but rather that they are part of a bigger platform-improving mission.
· Don’t imply any feelings when asking questions, which might cause bias in the subjects’ feedback. Questions like “does this look nice?” or “is this good?” should be avoided.
· Encourage subjects to voice thoughts and opinions out loud throughout the process.
· If possible, record the session or write down all the comments received, as it gets harder to remember the tiny details later on. If you choose to record, remember to get the subject’s consent.
The outcomes were as follows:
Were the subjects here from Edraak? Since below we say we got people from outside to test on
Enhancement comments included 1) adding a completion percentage that informs the user how far along they are and 2) applying different colors as that percentage increases, indicating their learner profile is nearing completion.
None of these comments were expected, which only reinforced the importance of regularly applying this process.
Stage 3:
This stage involved redesigning the feature based on the previous subject comments and producing these two prototypes. The only difference between the two was building the call to action either as a hyperlink or button.
Besides the progress bar, we added a message stating, “Your profile is XX % incomplete”. Under the bar, we wrote, “Please provide us with more personal information so that we can deliver a better learning experience.” The button or hyperlink showed “Complete your profile” messages.
Next, we invited two subjects and asked them the same questions as in Stage 2.
The outcomes were as follows:
Enhancement comments included 1) adding different color grades indicating completion and 2) making the message less confusing by stating “Your profile is 10% complete” instead of “Your profile is 90% incomplete”. Moreover, both subjects preferred the button over the hyperlink.
Armed with these fantastic insights, we moved on to Stage 4.
Stage 4:
This stage involved gathering all the feedback and comments from previous stages to develop a design that satisfies everyone. We generated the below prototype — but still had thoughts on whether to use a button or hyperlink.
In response, two of our experienced team members considered it more suitable to use a hyperlink since the aim of this page was to view the dashboard, not to divert the user to the settings page. As this was only a support feature, we settled on the hyperlink.
The design progress bar comprised different color grades denoting its start and finish. A crown icon was added as a ‘reward’ for users completing their profile, while the text was amended to be less confusing.
This time the usability testing was conducted on three random subjects from outside Edraak, who were interviewed by phone.
The outcomes were as follows:
And that was it! We had finally created a design that, on average, was not puzzling and gained positive feedback from the usability testing subjects.
Next time you log in to our platform, keep an eye out for the progress bar! Now you know the process we went through to produce this feature, which was built on user feedback and serves to enhance the Edraak learning experience.
All thoughts and comments are highly appreciated.
