Talentoday business website (2017)

UX/UI Design - WordPress - HTML/SCSS

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 Key goal

The purpose of of this project was to redo the "Talentoday business website", which is the part of the Talentoday website that contains the explanations about our BtoC and BtoB products.

The new website should:

  • Have a professional and clear business site for investors, consumers and businesses.Β 
  • Have a separate marketing managed site that does not rely on engineering team.

1.3 My role and responsibilities

I was responsible for the UX/UI design of the website along with coding the Front-End (HTML/SCSS).

1.4 Timeline

The project was launched mid September 2017 and the goal was to launch the main pages end of October. All the pages should be released by the end of the year.

This project was time sensitive because the web pages contained content that would be shown to investors prior to the Series B funding.

 

πŸ€” 2. Problem statement

The previous website did not fit the needs of potential customers and investors. There was a major confusion between BtoB and BtoC target markets.Β It used to be great but since the product evolved, it did not fit the vision of the company anymore.

There was also a lack of flexibility to make marketing changes because corporate site was embedded with production site. Which mean everytime the marketing team wanted to change one word they had to wait for the next push in production planned once a week.

To summarize it, instead of a strong asset our website was a liability.

 

πŸ‘₯ 3. Users and audience

3.1 BtoB

One of the particularity of Talentoday is to have both BtoB and BtoC customers. In projects like this it makes the work quite hard but also interesting.

We had 3 types of BtoB customers:

  • Recruiters
  • Managers
  • Career counselors

3.2 BtoC

A lot of users are coming to the Talentoday as BtoC users. There are 2 main categories of people: Candidates who have been invited to take the personality and other people such as students who just want to know more about their soft skills. In both case it is important that they can easily identify how to sign up and take the free assessment on the website.

3.3 Investors

One of the major reason why our CEO wanted to update the business website was to update the vision of the company. Indeed the vision of the company changed over time and it was important to have a website up-to-date before starting to raise our Series B.

3.4 Potential candidates

We often got spontaneous candidature letter from people visiting our business website. Also all the candidates that we interview take a look at our website.

The team cohesion is really important at Talentoday. We wanted the potential candidates to be aware of this so we added a lot of pictures of the Talentoday team on the "About our company", "Team" and "Careers" pages. We also took the commitment to list every single employee on our team page.

 

🎭 4. Roles and responsibilities

3 people where at the core of this project: Allie, Mark and me:

  • Allie was in charge of the marketing content.
  • Mark a contractor that we hired to work on the back-end and sysadmin set up.
  • I was doing the UX/UI design and coding the front-end.
 

πŸ‘¨πŸ»β€πŸ’» 5. Process and work

5.1 Project strategy

Proposed solution:

  • Split and migrate the site so that it is owned and managed by the US marketing team.
  • Improve clarity through the messaging and mapping of the site.

Implementation:

  • Split website from production site to its own using WordPress. Marketing will no longer rely on engineering team to make changes to site.
  • Hire contractor to migrate site that we will foster a long term relationship with.
  • Work on content clarity and messaging.

Strategy:

  • Use a step by step process to ensure that all things are working.
  • Focus on key high impact pages and progressively add others as the project goes on.
  • Always do an intensive benchmarking and reflexion before implementing changes.
  • Install analytics tools to measure changes and improvements.

We decided to implement an iterative process where all the non-essentiel pages will be done in phase 2 and 3 during development sprints:

project_strategy@2x.png
 

5.2 Sitemap

Before going into the details of each page we carefully analyzed the previous sitemap and made multiple propositions.

 

5.3 Early drafts

For every pages we always followed the same process:

  1. Analyze the current pages and list the issues.
  2. Benchmark best practices and competitors websites.
  3. List all ideas and improvements.
  4. Whiteboard low-fidelity mockups.
  5. Draw high-fidelity mockups with Sketch.
White-boarding is really important to me. It helps me save time by being able to iterate on a low-fidelity version of the website.

White-boarding is really important to me. It helps me save time by being able to iterate on a low-fidelity version of the website.

 

5.4 Sketch mockups

Once the whiteboarding done and approved I started doing the high-fidelity mockups in Sketch.

We used collaboratives tools such as InVision a lot to interact between the marketing, UX/UI and developers:

Example of InVision comment from my colleague Allie to send me marketing updates

Example of InVision comment from my colleague Allie to send me marketing updates

 
I always export the assets during the design phase to have them ready to use during the development of the Front-end

I always export the assets during the design phase to have them ready to use during the development of the Front-end

 

5.5 Accessibility

Accessibility (a11y) is really important to me. During the whole project I made sure to implement as many accessibile feature as I could without compromising the timeline.

One of the a11y feature is to make sure that every image and link has a title.

The specifications contains elements that are not visible in the mockups such as the SEO and a11y.

The specifications contains elements that are not visible in the mockups such as the SEO and a11y.

 

5.6 Continuous analysis

As stated in our project strategy, the plan was to deliver one page at a time and to continuously analyze the user behaviors in order to improve the experience. You'll find below and example of Hotjar heatmap for the homepage. This heatmap was recorded using the data of 10,0003 devices.

What we learned from this heatmap:

  • The "Change language" dropdown is used a lot: More than 10% of the clicks. β†’ Maybe it would be better if the input was located somewhere more accessible for the user.
  • Some people ends up clicking on the underlined titles such as "Use it to Recruit people" instead of clicking the "Learn more" button. β†’ Maybe theses titles should be clickables as well.
  • As expected the BtoB links are less used than the BtoC links because most of our traffic comes from consumers. But it doesn't mean that we should hide the BtoB links since most of our revenues comes from our enterprises solutions.
  • Almost everybody who clicks on the button "I agree [the cookie policy]" doesn't read the cookie policy. 613 people clicked/taped on the "I agree" button while 3 people clicked on the "cookie policy" link.
 

πŸ’Ž 6. Outcome

Thanks to a good teamwork between Allie, Mark and me we were able to release the new Business website on time.

 

πŸ“ 7. Appendix

You'll find below the screenshots of the desktop versions for the most important pages: