not the same
● HR-проєкт · IT-компанія

Ciklum: квіз «Soft skills challenge» для кандидатів

Ciklum – міжнародна IT-компанія. Для HR-команди ми зробили інтерактивний тест на soft skills: людина відповідає на 25 ситуаційних питань, залишає контакти й отримує звіт, а відповіді надходять на e-mail. Дизайн, верстка й бекенд – наші.

Клієнт
Ciklum, міжнародна IT-компанія
Що зробили
Дизайн, верстка, бекенд на WordPress
Формат
Квіз на 25 питань зі звітом
Сайт
Промопроєкт, зараз не опублікований
Проєкт Ciklum: Soft skills challenge
01 Про проєкт

Ідея Ciklum: в IT замало самих hard skills, без soft skills не зростеш. Потрібен був легкий і помітний спосіб поговорити про це з кандидатами та зібрати контакти. Ми створили візуальну мову тесту, зверстали адаптивний квіз і написали бекенд на WordPress: відповіді збираються, надсилаються на пошту, а за заповненими даними формується звіт.

Що зробили
UI-дизайнВерсткаБекенд на WordPressE-mail-звітиМобільна версія
Технології
UI/UXWordPressPHPJavaScript
02 Дизайн

Стиль

Глибоке темно-синє тло, м’ятний акцент і об’ємні «пухнасті» кільця, що змінюють положення від екрана до екрана. Шрифт GT Walsheim, тонкі лінії та вертикальна навігація кроками.

Темно-синє тло
#000B41
М’ятний акцент
#00FFBE
Синій
#0020BB
Білий
#FFFFFF
Сірий (неактивні)
#9A9A9A
ШрифтиGT Walsheim
03 Екрани

Перший екран і питання

Стартовий екран із закликом «Your soft skills matter!», далі питання по одному на екрані: ситуація з робочого життя, чотири варіанти відповіді, лічильник «Question #N/25», кнопки «Next question» і «Back».

Стартовий екран
Питання з варіантами відповіді
Питання з варіантами відповіді
04 Екрани

Анкета й результат

Після 25 питань – анкета: ім’я, e-mail, телефон, місто, LinkedIn, технологія та рівень позиції, згода на обробку даних. Далі екран «Meet your soft skills team!»: команда історичних постатей описує сильні сторони людини, результатом можна поділитися в соцмережах.

Анкета кандидата
Екран результатів
Екран результатів
05 Мобільна версія

Мобільна версія

На телефоні тест проходиться однією рукою: великі варіанти відповіді, навігація внизу, анкета в одну колонку й довгий екран результату з кнопками поширення.

Старт
Старт
Питання
Питання
Результат
Результат
06 Завдання

Завдання

  • 01Залучити кандидатаЗробити тест, який хочеться пройти до кінця, а не нудну анкету.
  • 0225 питань без утомиОдне питання на екран, зрозумілий прогрес, можливість повернутися назад.
  • 03Зібрати контактиАнкета після тесту з полями про технології й рівень позиції та згодою на обробку даних.
  • 04Звіт і поштаНадіслати відповіді на e-mail і сформувати звіт за тим, що заповнила людина.
07 Ключові рішення

Ключові рішення

Ситуаційні питання
Рішення 01

Ситуаційні питання

Кожне питання – робоча ситуація й чотири варіанти поведінки. Обрана відповідь підсвічується, «Next question» веде далі, «Back» – назад.

П’ять компетенцій
Рішення 02

П’ять компетенцій

Відповіді стосуються п’яти якостей: Ingenious/Creativity, Empowering/Effective Communication, Accountable/Decision-making, Energising/Positive attitude, Courageous/Drive.

Анкета кандидата
Рішення 03

Анкета кандидата

Обов’язкові поля, вибір рівня позиції, два чекбокси згоди. Кнопка Submit активна лише після заповнення.

Звіт «soft skills team»
Рішення 04

Звіт «soft skills team»

Результат подано як команду історичних постатей, кожна з яких описує одну рису характеру. Є кнопки Facebook, Twitter, LinkedIn.

Рішення 05

Бекенд на WordPress

WordPress приймає відповіді на питання й дані анкети, надсилає їх на e-mail і генерує звіт з результатом.

08 Стек

Що всередині

FigmaWordPressPHPJavaScriptАдаптивна версткаНадсилання на e-mailГенерація звітуПоширення в соцмережах

Хочете такий самий проєкт?

Опишіть завдання – протягом робочого дня відповімо із запитаннями та попередньою оцінкою термінів.

Відповімо протягом робочого дня
Написати нам