Talentoday Target Profile and matching report

Product design - Product management

header@2x.png
 
 

📋 1. Overview

1.1 What is Talentoday?

Talentoday is a startup which improves career success by delivering personal insights based on psychometrics and predictive analytics. The online social career guidance solution provides a free personality assessment for individuals and a SaaS for HR managers and staffing agencies. Talentoday is based in San Francisco and Paris with 25 team members (2017).

1.2 What is a Target Profile?

Let's say you have 50 performing employees in your Marketing department and you want to know what they have in common in term of soft-skills. A Target Profile is a radar representation of the most important personality and motivations traits that define the group.

1.3 Key goal

The purpose of this project was to generate two PDF reports that Talentoday customers would be able to sell to their clients.

  • Target Profile report
  • Matching report: Comparison of up to 5 people with a Target Profile.

1.4 My role and responsibilities

I was managing the project and wrote the specifications for the developers.

1.5 Timeline

8 weeks to design the two reports and the user experience to download them.

 

🤔 2. Problem statement

Prior to this project we did not have a Target Profile report and matching report. Our Target Profile and Matching insights were available online, but not as a PDF. In response to client feedback, we decided to create these PDF reports. The main tasks of this project were:

  • Decide the sections included in the reports.
  • Have customized reports were customers are able to select which sections they want.
  • Have an appealing UI.
  • Have great marketing and psychometric content.
 

👥 3. Users and audience

The Target Profile and matching features were only for the BtoB users of Talentoday with the "Enterprise" plan. The PDF exports would be offered at no cost for the same users.

Most of theses customers were staffing agencies and HR managers.

 

🎭 4. Roles and responsibilities

This project is a perfect example to illustrate the importance of having a great team. As it was an important task for the company every person was able to follow the progress of the project and give their feedback on Workplace and InVision. But mostly 5 people were involved on the project:

  • Allie - Marketing Manager. She was in charge of the content of the PDFs. She interacted a lot with Gabriel to ensure the psychometric validity of the reports and with me to organize the report.
  • Joy - Graphic/UI Designer. She was in charge of improving the UI of the reports and had daily interactions with Allie and me.
  • Ilya - Front-End Developer. He was the one coding the changes. We had a lot of interactions during the whole process to ensure that what we did was possible.
  • Gabriel - Psychometry. He was the one ensuring that the rigorousness and psychometric validity of our reports.
  • Me - Product/UX Designer. I was managing the project and wrote the specifications for the developers. I also helped implement Joy UI decisions in Sketch.

The importance of having a good team cohesion was even more crucial because while Allie, Joy and I were located in San Francisco, Ilya ad Gabriel were located in Paris. But thankfully to a great organizations and great collaborative tools such as InVision and GitHub we were able to remove the 9-hour time difference issue.

Also although each person had it own scope, everyone was able to go beyond and help outside of their main field. Allie for example, thanks to her previous career as freelance designer, was always in discussion with Joy. Ilya, as one of the first employee of the company, is more than just a developer and his feedback are important because he knows the business of Talentoday very well.

 

👨🏻‍💻 5. Process and work

5.1 General process

Here is the process we used for this project and that we are using for a lot of our projects:

  • Step 1 - Draft product specifications
  • Step 2 - Whiteboard mockups
  • Step 3 - Sketch and InVision
  • Step 4 - Final design

It's important to note that we do a lot of iterations for each steps before going to the next step

 

5.2 Step 1 - Draft product specifications

  • Write a draft of the product specifications: What are going to be the pages on the report? What visualizations? Which content?...
  • The product specifications are done following customer feedback in this case. Feedback that we receive via multiple channels such as in-person meetings, Intercom discussions and emails.
  • Discuss with the developers have an rough idea of what is possible to do and how much time it takes. For example the pagination number was too complicated to do with our current PDF generator configuration so we decided not to have it for the first release.
 

5.3 Step 2 - Whiteboard mockups

whiteboard.jpg
 

5.4 Step 3 - Sketch and InVision

  • Define the UI using Sketch.
  • Synchronize every page on InVision so the marketing can add and discuss the content.
Example of an InVision comment left by Allie

Example of an InVision comment left by Allie

 
 

5.5 Step 4 - Final design

  • Export the assets for the developers.
  • Write final product specifications.
In order to save time for the developers I always export all the assets and organize them by sprites when it makes sense

In order to save time for the developers I always export all the assets and organize them by sprites when it makes sense

I always write specifications to explain all the edge cases

I always write specifications to explain all the edge cases

 

💎 6. Outcome and lessons

6.1 Reports

We delivered 2 fully customized reports. You can find below an example with 2 pages extracted from the matching report:

 

6.2 Interface to download the reports

We designed an interface to download the reports. On this modal the user can select the options such as which pages to print for every sections.

 

6.3 Designed for one customer

The PDF reports were mainly based the feedback of one of our major customer. They really loved the feature but the drawback was that the product wasn't tailored as much for the other company.

Some people for example expressed the need to have a more "dull" version of the PDF with less colors. Not as a replacement of the current PDF but as an alternative theme. Few months after this is what we did:

Our major customer being European, another issue we had was that the PDF was designed for A4 paper. But in the US most of the reports are printed on US letter size paper.

  Millimetres Inches
  Width Length Width Length
A4 210.0 297.0 8.26 11.69
Letter 215.9 279.4 8.50 11.00
Difference between A4 and US letter

Difference between A4 and US letter

 
 

6.4 Importance of talking with the developers

Having a lot of interactions with the developers during the design process of the product is important to me. It allows us to make sure to come up with features that are technically possible and easier to code.

After a talk with one of our developer, we realized that adding the page number on each page was way harder than it seems. In consequence we decided not to display the page number for the first release and also to postpone the "Table of content" pages. We also made sure not to have content that would mention the page numbers such as "See personality radar on page 7".

Another example was with the font we chose. The first one had too much issues with the PDF generator that we were using. Rather than having the developers spend 1 week on it we decided to use another similar font. It might not seems a lot but for a small startup like us it was capital to deliver as fast as we can.

 

6.5 PDF vs. print

The PDFs were designed to be seen on a screen and printed. Which mean we had to take a lot of time ensuring that the colors we were using had high enough contrasts to be visible when printing but would also render well on desktop.

 

📁 7. Appendix

You'll find below an example of a Target Profile report and an example of a Matching report. Feel free to click on the pages to see the details.

 

7.1 Target Profile report

 

7.2 Matching report