USER TESTING - NEW FUNCTION
Customer: vCOACH GmbH, 2022
Project description
A new feature should be implemented in the existing soft skills learning platform from vCOACH GmbH. To this end, I created the complete UX concept and tested the change with the help of a prototype.
Start
Problem
Users complete soft skills training, which takes a few weeks. They can revisit the training after completing it, but cannot repeat the exercises. However, this is essential for a lasting learning effect.
Solution
Refresher tasks should be introduced. These will initially consist of an exercise that will be unlocked after a certain period of time following completion of the training. Gradually, more refreshers should become available.
Tools
-
Adobe XD
Team
-
1 UX Designer
-
1 project manager
-
4 Founders
-
2 Developer
My Role
-
UX Design
-
Interaction Design
-
Prototyping
-
Testing
Timeline
-
Overall: 8+ weeks
-
Requirements & Research: 2 weeks
-
Concept & Prototyping: 6 weeks
Design process
Discover
Concept
Testing
Final Design
1
Discover
Step 1:
It was important for me to research how competitors had incorporated such features. To do this, I looked at apps such as Babbel, Duolingo, and Tandem to get an initial insight into how other training providers offer learning content and refresher exercises.
Step 2:
Through research and analysis of our platform, it quickly became clear that a completely new area needed to be created. This raised the question of where to locate it, where to place links, and how to make it clear to users what it is.
It also quickly became clear that the existing navigation and menu would need to be adapted.
Initial State
2
Concept
First, I developed an initial draft using wireframes, analyzed it together with the project manager and one of the founders, and developed another version. I also discussed this with the other three founders, as the introduction of the refreshers has an impact on the strategic direction of the company. Through consultation with the other founders, the designs were further refined, and it became clear that we needed to conduct a test. Before testing, we involved the developers to clarify the effort and feasibility of the designs.
Note: During development, we renamed the refreshers to Fresh ups.
3
Testing
For the test, I created two prototypes in Adobe XD.
Variant 1:
The refresher is accessed directly from the home page. The user can select the relevant refresher directly and the page opens.
Variant 2:
Access is also via the start page. In this variant, however, the user first lands on a detail page that lists all refreshers and allows access to them.
In both variants, a new menu item “Start/continue Fresh up” has been added, depending on its status. In the variants, clicking on “Start Fresh up” leads to different results. In variant A, the user is taken directly to the current refresher, while in variant B, they are first taken to the detail page with all refreshers.
Flows in Adobe XD
Variants for testing
Result
The testing showed that most test subjects preferred variant 2, that more structure (subheadings) was needed, that the wording should be adjusted, and that it was important to explain the refreshers, for example, with a welcome screen or a pop-up.
The testing confirmed our concept. We had already considered offering welcome screens after logging in to the site that explain the various functions, such as the refresher.
4
Final Design
Based on the testing, I adapted the existing screens. A refresher is represented by a lemon.
After testing, I restructured the “Overview” area. The various symbols (learning path, lemon) now show where the user is currently located, what they have already completed, and what still lies ahead.
The colors are used as follows:
blue = completed
green/yellow = current
gray = not yet available
Another new feature is the combined “Completed & Fresh Ups” page. Here, the user can find all Fresh Ups. New ones are displayed with a small notification.
Within a training course, the user can already see that a refresher will be offered in the future. As soon as it is available, the user can also go directly from the training course to the corresponding refresher.
