Talentoday pricing page

UX/UI design, Benchmarking, 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 project was to add a pricing page to our business website. Success was defined by the following conditions:

  • Design easy to understand content; people looking at the page should find all the answers they need.
  • Ensure that the design would be fast and easy to code. A front-end developer should be able to code the page under 2 days in pure HTML and SCSS. No JavaScript should be required.

1.3 My role and responsibilities

I was in charge of both the user experience of the page and coding in the WordPress website.

1.4 Timeline

The project needed to be delivered within two weeks or 10 days of work. Starting with sentence 2: I decided, together with my colleague Allie, to use the first five days to design the page. This included talking to the sales department about the product definition, benchmarking the different options, white boarding the first drafts, and ultimately doing the UX and UI using Sketch. The second week was used to finalize the marketing content, code the page, and push it to production.

 

πŸ€” 2. Problem statement

There were multiple issues to address in order to design the page:

  • First, from a product perspective we needed to work with the sales team in order to simplify the pricing, or at least decide which part of the pricing we should display. In fact, the pricing sheet used by sales was an Excel file with multiple tabs and was very hard to understand.
  • The design of the page should be flexible to add the online purchase afterwards.
  • Another question was where to place the pricing link on our website. Should it be highlighted or hidden?
 

πŸ‘₯ 3. Users and audience

This web page was designed for professional users who were interested in the Talentoday Manager solution.

 

🎭 4. Roles and responsibilities

This project was mainly the result of the collaboration between five people. I managed the UX design and front-end development. Allie was in charge of the marketing. Peter and Claire-Marie were the sales managers for the Americas and Europe, respectively. And finally Eric, the USA general manager, was responsible for approving the drafts and the final design.

 

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

5.1 Pricing sheet simplification

As mentioned previously the first work which had to be done was to simplify the pricing or at least decide of the elements to display.

5.2 Benchmarking

For this particular project benchmarking was really important. Indeed the pricing page is the kind of web page where we were not looking for originality. Instead we wanted to make sure to design a page that people would understand really fast.

5.3 Early drafts

Following the benchmarking we listed what we wanted to appear on the page:

  1. Header and navigation: It will be the same as the other "Talentoday Manager".
  2. Pricing table at the top of the page
  3. Customer section: Popular logos from companies using our product as well as a quote
  4. FAQ: Answers to the questions that people ask the most when they contact us on Intercom to know more about our pricing.
  5. Tagline and call-to-action for the free trial at the bottom of the page.
early_draft.jpg
 

For the pricing table multiple layouts have been considered. We picked the layout "Alpha" because it was the team's favorite but the other layouts were valid as well.

Few of the responsive design versions considered

 

5.4 Sketch mockups

It was decided to only work on the pricing table for the first release. Other sections like FAQ or the customer logos and quotes would arrive later.

It is interesting to note that prior to this project, about 2 years before, a pricing page already existed on the website. Even if the pricing changed a lot few elements were kept such as some colors.

 

5.5 Design with accessibility in mind

As always I tried to design with accessibility in mind. It translated in a variety a little actions such as:

  • Making sure that the page is fully responsible and accessible on any size of device from mobile to desktop.
  • Add 'title’ for buttons and images/icons
  • Coding the website using clear and logic HTML markup. For example by using β€˜ul’ lists instead of β€˜table’ when it makes more sense.
 

πŸ’Ž 6. Outcome and lessons

We were able to deliver an easy to read page which was fast to implement on the website. My colleague Allie and I took less than the 10 days of work initially planned, but the project was released one week late. It was due to the fact that the time to simplify the sales pricing sheet was underestimated. (This was a result of underestimating the time needed to simplify the sales pricing sheet).

If we had to redo a similar project, we would ask for the sales team to simplify the pricing sheet ahead of the UX design. However, we were able to solve this timing issue and meet the assigned deadline by working on other pages on the business website while we waited for feedback on the pricing sheet.

 
pricing@2x.png