New Talentoday Target Profile visualization

UI Design - Project management

header@2x.png
 

📋 Description of the project

The purpose of this project was to update the Target Profile visualization using the instructions from the Talentoday psychologists. This project was completed with my colleague Joy, who was UI/UX Designer.

Here are the guidelines from the psychologists:

  • Introduce the colors of the clusters. The zones in the previous visualization were always green.
  • Have a uniform zone width. The previous zones were bigger on the outside. A few people complained about the fact that it could mislead readers because a zone from 6 to 10 will appear bigger than a zone from 1 to 5.  
  • Change the length of the zone from 4 to 2.
  • Sort the criteria by importance.
  • Always have 8 criteria. Before the Target Profile radar could have from 5 to 8 criteria displayed.

 

Previous Target Profile visualization

Previous Target Profile visualization

 

📋 Iterations

My colleague and I did multiple iterations and tested the final ones with users. Here are some of the variables we changed during our tests:

  • Width of the line. We tried multiple widths and finally decided on 14px (On a 410px diameter radar) which was the maximum width possible that ensures that the zones never overlap.
  • Shape of the zone. You will find an example below with 3 possible variations: Arc (Version A), Rectangle (Version B), and Rounded rectangle (Version C)
  • Display the numbers inside the zone or not.
  • How to highlight the fact that the order display is by importance of the criteria?
    • One iteration of the Target Profile had zones with a different opacity depending on the importance of the criteria.
    • Another iteration had zones with a different width depending on the importance of the criteria (See whiteboard photo below).
    • We finally decided that adding roman numerals was enough. After showing iterations to people we realized that the previous two examples were confusing the users more than it was bringing them information.
 

💎 Realization

You'll find below the version that went in production. It is important to note that during the iteration process we were constantly in contact with the developers, especially Ilya our senior Front-End Developer, to ensure that the design would be possible.