not the same
● HR project · IT company

Ciklum: a soft skills challenge for candidates

Ciklum is an international IT company. For its HR team we built an interactive soft skills test: people answer 25 situational questions, leave their contacts and get a report, while the answers are sent by e-mail. We did the design, the front-end and the back-end.

Client
Ciklum, international IT company
What we did
Design, front-end, WordPress back-end
Format
25-question quiz with a report
Website
Promo project, no longer online
Project Ciklum: Soft skills challenge
01 About the project

Ciklum's message: in IT hard skills are not enough, soft skills decide how far you go. The company wanted a light, memorable way to start that conversation with candidates and collect their contacts. We created the visual language, built a responsive quiz and wrote the back-end on WordPress: answers are collected and e-mailed, and a report is generated from what the person filled in.

What we did
UI designFront-endWordPress back-endE-mail reportsMobile version
Technologies
UI/UXWordPressPHPJavaScript
02 Design

Visual style

A deep navy background, a mint accent and fluffy 3D rings that move from screen to screen. GT Walsheim type, thin lines and a vertical step indicator.

Deep navy background
#000B41
Mint accent
#00FFBE
Blue
#0020BB
White
#FFFFFF
Grey (inactive)
#9A9A9A
FontsGT Walsheim
03 Screens

Intro and questions

The intro screen says "Your soft skills matter!", then questions appear one per screen: a work situation, four answer options, a "Question #N/25" counter and Next question and Back buttons.

Intro screen
Question with answer options
Question with answer options
04 Screens

Form and results

After 25 questions comes the form: name, e-mail, phone, city, LinkedIn, technology, position level and data processing consent. Then "Meet your soft skills team!": a team of historical figures describes the person's strengths, and the result can be shared on social networks.

Candidate form
Results screen
Results screen
05 Mobile version

Mobile version

On a phone the test works one-handed: large answer options, navigation at the bottom, a single-column form and a long results screen with share buttons.

Intro
Intro
Question
Question
Results
Results
06 Task

Goals

  • 01Engage candidatesMake a test people want to finish, not a dull questionnaire.
  • 0225 questions without fatigueOne question per screen, clear progress and a way to go back.
  • 03Collect contactsA form after the test with technology and position level fields and data consent.
  • 04Report and e-mailSend the answers by e-mail and generate a report from what the person filled in.
07 Key solutions

Key solutions

Situational questions
Solution 01

Situational questions

Each question is a work situation with four ways to act. The chosen answer is highlighted; Next question moves on, Back goes back.

Five competencies
Solution 02

Five competencies

Answers map to five qualities: Ingenious/Creativity, Empowering/Effective Communication, Accountable/Decision-making, Energising/Positive attitude, Courageous/Drive.

Candidate form
Solution 03

Candidate form

Required fields, a position level picker and two consent checkboxes. Submit becomes active only once the form is complete.

"Soft skills team" report
Solution 04

"Soft skills team" report

The result is a team of historical figures, each describing one side of the person's character, with Facebook, Twitter and LinkedIn share buttons.

Solution 05

WordPress back-end

WordPress receives the quiz answers and form data, e-mails them and generates the results report.

08 Stack

Under the hood

FigmaWordPressPHPJavaScriptResponsive markupE-mail deliveryReport generationSocial sharing

Want a project like this?

Describe your task – within one business day we'll reply with questions and a rough timeline estimate.

We’ll reply within one business day
Message us