Giunti Testing

UX and UI design for a online testing system

Overview

Internet test is a online platform for Psychodiagnostics and Psychological Assessment. The users are clinical or corporate psychologists which use it for self-administration and scoring of tests available in the online catalog, report generation and data archiving. During years, the web app evolved a lot, with the adding of many functions, which was explicitely requested by users, but without a general design plan. The client hired me for a usability study focused on identifying the main criticities and to give improvement proposals.

Ux research

Since the interface had a lot of obvious usability issues, we decided to start from an analitical phase focused on a heuristic usability evaluation. In this phase emerged the main criticities which mainly involved visibility of system status, user controls and freedom, flexibility and efficiency of use. Then we started with user interviews, in order to finding out the user goals and clarify the context of use (no direct osservation was possible unfortunately)

Design Solution

The design goal was to structure the interaction by focusing on the main user tasks. To facilitate the user workflow, as it had emerged from the interviews, I designed a dashboard page focused on the element "work" (a client/test match) which resulted to be the building block of the user workflow. For the "works" I identified different progress states (completed, compiled, suspended) and their matching user tasks; then I made available for each "work" just the functions that are useful for the relative tasks. The use of natural mapping optimized the task of creation of works, while structural intervents based on visibility and function grouping principles, improved the test catalogue and user profile sections.

Mockup

Since the designed solution was resulting in a structural revolution, we decided to split the implementation in phases in order to avoiding disorientation for expert users. The interaction design outlined in the wireframe represents the planned direction; meanwhile, we decided to design and test an intermediate version where the old design starts to bend in the final form. The following mockups are the screens of this intermediate step. Drawing them, I found myself working on reverse engineered graphic design: Since the developers had already choosen bootstrap as development library, I facilitated their job by using in mockups only components and css classes already available.

Role and responsabilites

Ux designer, UI artist