Reimagining an existing complex user flow into a simplified one

What is universitaet.com?

Universitaet.com is a website which helps users find study programs in Germany, Austria and Switzerland, and provide estimated chance for admission in given university based on user’s academic achievements (GPA, degrees, certificates etc.).

Problem statement

Although universitaet.com is content-rich website, it didn't have search field to allow free text queries. Hence, it was hypothesized that due to the lack of search field and other usability issues, the website didn’t provide fluid and intuitive user experience. Completing the most essential task of finding out one's chances for admission required excessive efforts from the users.

Research

The research employed lab usability testing method which prescribes that the participants in the test are to perform a specific task scenario while being observed by moderator. The task scenario was given to the participants in the Job-to-be-Done (JTBD) framework, as follow:

 “When [I visit universitaet.com], I want to [see my admission chances for Business Administration, MBA in European School of Management and Technology, Berlin, Germany], so I can [discover my chances for acceptance for this program].” 

Five participants* took part in the usability testing. The participants were provided all requisites necessary for completing the task, namely laptop** with Internet connection, printed down task and temporary email. The screen on which the tests were done was video recorded. Furthermore, the usability tests were conducted in combination with dynamic verification - while each participant performed the task, the evaluator observed and took notes.

Results and discussion

The usability tests indicated major usability and user experience issues. None of the participants succeeded to accomplish the task given within the allotted time. Listed below are the four points of friction that were identified.

1. Search function on the home page

In order to search for the study program, the participants attempted to initiate keyword search query within what actually were two separate dropdowns for selecting field of study and location by city. It took them more than 1 minute to realize that the white bar was not allowing their keyword search query, and that they should instead select values listed in the dropdowns. Evidently, the participants wrongly assumed that the dropdown lists complemented the search bar with search suggestions.

Based on the observed issue it can be said that the dropdowns don’t match user’s expectations. Moreover, they cause setbacks for the users. Thus, it is very likely that what would eradicate this problem is to replace the dropdowns with search field that allows random keywords query.

2. Lack of search field on the results page

The second issue was also related to the search function. After overcoming the issue described in the previous section, all participants succeeded to proceed to the results page, where firstly, they were overwhelmed by the number of the results they got, due to the fact that the filter they were able to apply on the home page, was limited to field of study and city. Four of the participants tried to find the study program by using the browser's Ctrl-F shortcut. However, because the results are paginated (20 results per page), they had to apply the Ctrl-F function on each of many pages, hence, they quickly give up this option. After that, participants noticed the filters on the left side and used them to reduce the number of results but still struggled to find the given study program (three out of the five participants, found it). For this issue, a possible solution would be to place a search function in the navigation bar that is present on every pages.

3. Poor visual hierarchy in relation to Call-to-Action (CTA) button 

All three participants that found the study program intuitively headed to click the green “Show details” button in attempt to check their chances instead of clicking on “Check your admission chances” (Figure 4). One participant clicked on “Show details” button which led them to a single study program page, from there the only available continuation of the user journey is through external link to the university which provides the program. This means, the user is not on the website anymore, and very likely they won’t return. The other two participants realized that the “Show details” button wouldn’t have served their purpose and ceased the attempt, and refocused their attention on the “Check your admission chances” button which actually brings conversions.

The cause of this issue is the poor visual hierarchy, the CTA button "Check your admission chances", which leads to conversion, is much less noticeable compared to the green button “Show details”. The CTA button has to be more prominent in order to attract attention, while “Show details” button has to be de-emphasized.

4. Password requirements not communicated

Two participants reached the step where they are supposed to register in order to find out their chances for admission failed to do so because of the website’s strong password requirements (10 characters, 1 capital letter, 1 digit and 1 symbol). The users were not informed about these requirements (Figure 5).

In addition, the participants are not allowed to show/ hide the password they are inserting. Also, the error message was displayed after submitting the form and didn't communicate the reason for the invalid password format (Figure 6). Thus, the users are left to guess and repeat their efforts to register, although it is highly unlikely that they will continue attempting registration.

Clearly, the solution in this case is to inform the user about the password requirements, and to allow them to show or hide the typed password. Also, to inform them about the failed password validation inline - immediately after it was inserted, not after submission of the registration form.

Design process

Based on the insights derived from the usability testing, design iterations were conducted. Initially, using pen and paper, the process went through a variety of design solutions for each of the four issues (Figure 7).

Afterwards, the best solution for each issue was prototyped using Adobe XD. Some other improvements were also made, such as clearer navigation bar and change of the hero media from video to image, which will also further improve the user experience by reducing the page loading speed (Figures 8, 9 & 10).

Conclusion

Based on the insights derived from the usability testing, design iterations were conducted. Initially, using pen and paper, the process went through a variety of design solutions for each of the four issues (Figure 7).Based on the conducted research, it can be said that usability testing is vital part of product development, and it helps identifying and overcoming issues in design. Additionally, it reduces the risks of building flawed products, which on its own turn saves time and resources.

In this particular case, four trouble spots were identified, which confirms the hypothesized problem. Moreover, thanks to the user testing, insights for improving the website were gained.

References

Nielsen, J. (2000, March 18). Why You Only Need to Test with 5 Users. Retrieved from Nielsen/ Norman Group Web site: https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

Sauro, J. (2010, March 8). Why You Only Need to Test with Five Users. Retrieved from MeasuringU: https://measuringu.com/five-users/#many