Talentoday pricing page
UX/UI design, Benchmarking, HTML/SCSS
Table of contents:
- 1. 📋 Overview 1.1 What is Talentoday? 1.2 Key goal 1.3 My role and responsibilities 1.4 Timeline
- 2. 🤔 Problem statement
- 3. 👥 Users and audience
- 4. 🎭 Roles and responsibilities
- 5. 👨🏻💻 Process and work 5.1 Pricing sheet simplification 5.2 Benchmarking 5.3 Early drafts 5.4 Sketch mockups 5.5 Design with accessibility in mind
- 6. 💎 Outcome and lessons
📋 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.
1.3 My role and responsibilities
I was in charge of both the user experience of the page and coding in the WordPress website.
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.
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:
- Header and navigation: It will be the same as the other "Talentoday Manager".
- Pricing table at the top of the page
- Customer section: Popular logos from companies using our product as well as a quote
- FAQ: Answers to the questions that people ask the most when they contact us on Intercom to know more about our pricing.
- Tagline and call-to-action for the free trial at the bottom of the page.
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.
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.