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Генерация отчётаШеринг в соцсети

Хотите такой же проект?

Опишите задачу – в течение рабочего дня ответим с вопросами и предварительной оценкой сроков.

Ответим в течение рабочего дня
Написать нам