Talentoday career recommendations

UX/UI design


📋 1. Overview

1.1 What is Talentoday?

Talentoday is a startup that 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 Key goal

The project was to design the UX and UI of the new Talentoday career recommendations feature. Unlike most of my projects at Talentoday, an initial, private version of the module was created by a data scientist in order to test the matching algorithms. The goal was to improve the interface, while applying the feedback of the product manager at the same time.

1.3 My role and responsibilities

I was in charge of the user experience and user interface of the feature.

1.4 Timeline

This project had to be done in 2 weeks before the engineers run started.


🤔 2. Problem statement

Prior to this project two data scientist worked on having a private, alpha version in order to validate the algorithms. The main difficulty from a UX point of view was to design an interface that would be intuitive enough and at the same time close enough to the original alpha version in order to limit the development time.

The UX of the feature also needed to be flexible with the ability to add more filters and information in the listing in the future.

Alpha UI, used by our data scientists to test the algorithms with users


👥 3. Users and audience

Talentoday has both BtoC and BtoB users. The strategy behind this project was to build a feature for the BtoC, which if successful could be extended to the professional users.


🎭 4. Roles and responsibilities

Three people were involved during the design phase. One person in charge of the product, another focused on designing the icons, and finally me, responsible for the UX and UI of the product.

Example of collaboration using InVision, Sketch and GitHub: Before vs. After with the illustrations from my colleague Lei and the content from my colleague Allie


👨🏻‍💻 5. Process and work

5.1 Collaboration on product specifications

I worked in collaboration with my product colleague to define the specifications of the careers feature. After discussion with the Executive team we decided to remove the percentage of matching in the listing. This information was judged too complicated to understand.


5.2 Identify current issues

After showing the alpha UX/UI to a panel of people, here are the different issues we noted from a UX point of view:

  • The filter section was taking a lot of space on desktop. In response to this issue we tried various layouts.
  • The UI wasn’t easy to understand for new users. In order to fix that we added multiple on-boarding screens.
  • Some parts of the UI were not visually appealing. But this comment was normal since it was an alpha project.

5.3 Early drafts

Once the user flow agreed on, I started to whiteboard the screen and upload them on InVision FreeHand.

Early flow and mockups

Early flow and mockups


As mentioned before, multiple variations of layouts were designed. Since we wanted to have user feedback on them I created a few of the layouts with Sketch.


5.4 Sketch mockups

I did multiple iterations of pixel-perfect mockups using Sketch as a designing tool. Most of the feedback on the content and UI details were done using the prototyping tool InVision.

Example of InVision from my colleague Allie, in charge of the marketing content

Example of InVision from my colleague Allie, in charge of the marketing content


You'll find below some of the UI tests we did with the sliders:


5.5 Export for the developers

Once the project completed from a design perspective I exported all the assets for our front-end developer.


💎 6. Outcome

As planned the UX and UI was designed in time for the developers to work on it. In order to release the first iteration even faster it was decided to release the beta without the on-boarding process.


📁 7. Appendix

You'll find below few screens that illustrate most of the "Career recommendations" feature.