---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-02-23
publishYear: 2024
name: EasyDocs
title: Дизайн интерфейса модуля приема кандидатов на работу
excerpt: Разработали интерфейс для нового модуля сервиса EasyDocs.
context: |
[ООО «Парадокс»](https://easydocs.ru/about) — разработчик сервиса кадрового электронного документооборота [EasyDocs](https://easydocs.ru/). Ранее мы уже работали с этой компанией и разрабатывали [интерфейс приложения для проверки и подписи документов](/portfolio/easydocs).
Сейчас сервисом ЭДО EasyDocs пользуется свыше 200 компаний и заказчик планирует расширять существующую функциональность.
isNew: true
logo:
src: ~/assets/images/portfolio/easydocs/logo.png
alt: EasyDocs logo
link: https://easydocs.ru/
image: ~/assets/images/portfolio/easydocs-2024/main.png
imageAlt: Собака Павлова • EasyDocs • Дизайн интерфейса модуля приема кандидатов на работу
thumbnail:
src: ~/assets/images/portfolio/cards/easydocs2.svg
alt: Собака Павлова • EasyDocs • Дизайн интерфейса модуля приема кандидатов на работу
tags:
- it
- ux-design
- new-features
- research
- prof
- mob
- cjm
- easydocs
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-design под ключ](/services/ux-design), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-design
- text: |
### Хотите сделать сами?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: simplefly
- collection: portfolio
page: control-patent
- collection: portfolio
page: smartdeal-ecp
- collection: portfolio
page: control-forest
- collection: portfolio
page: easydocs
- collection: portfolio
page: edms
outcome:
title: Некоторые цифры
numbers:
- title: Отрисовали макеты
number: по 6 сценариям
text: взаимодействия пользователей с системой
- title: Провели анализ
number: '3 конкурентов'
text: для сравнения функциональности подобных модулей
- title: Провели
number: '4 итерации'
text: концептуального проектирования
- title: 'а также'
number: '11 итераций'
text: проектирования дизайна интерфейса
text2: Итеративное проектирование позволило внести точечные корректировки и детализировать пути пользователя до малейших подробностей.
result:
- src: ~/assets/images/portfolio/video.svg
text: Прототип
link: https://drive.google.com/file/d/16uent15tWYp8bIwjLoYA_uMRC4xEybaE/view?usp=sharing
budget: "от 550 000 ₽"
time: "3,5 месяца"
review:
text: Заказчик вернулся к нам, чтобы поделиться результатами совместной работы. Генеральный директор ООО «Парадокс» Алексей Кузнецов записал [небольшое демо](https://drive.google.com/file/d/16uent15tWYp8bIwjLoYA_uMRC4xEybaE/view?usp=sharing), где можно увидеть, что большая часть (порядка 90%) предложенных нами решений используется в готовом модуле.
metadata:
canonical: https://sobakapav.ru/portfolio/easydocs-2024
title: Собака Павлова • EasyDocs • Дизайн интерфейса модуля приема кандидатов на работу
description: "Разработали интерфейс для нового модуля сервиса EasyDocs."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/easydocs-2024/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import PhoneMockup from '~/components/widgets/PhoneMockup.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Экстра-польза](#anchor4) • [Интересные решения](#anchor5) • [Нюансы процесса](#anchor6) • [Отзыв, цены, сроки](#anchor7)
</TOC>
## <a name="anchor1" />Бизнес-задача
Задача, с которой пришел заказчик, – разработать модуль для автоматизации приема на работу.
Добавление такого модуля в сервис позволит расширить охват потенциальных покупателей сервиса и укрепит позиции компании на рынке подобных сервисов.
<a href="/images/portfolio/easydocs-2024/1.png" target="_blank"></a>
<em>Список кандидатов</em>
## <a name="anchor2" />Дизайн-задача
1. Провести исследование конкурентов и пользователей продукта с тем, чтобы выработать обоснованные интерфейсные решения, отвечающие потребностям пользователей и целям бизнеса.
2. Дополнить существующий интерфейс ЭДО EasyDocs модулем приема кандидатов на работу.
3. Спроектировать интерфейс для соискателя с возможностью загрузки и распознавания документов (десктопную и мобильную веб-версии).
<a href="/images/portfolio/easydocs-2024/2.png" target="_blank"></a>
<em>Список кандидатов. Отбор по параметрам таблицы</em>
## <a name="anchor3" />Результат
Чтобы выяснить потребности пользователей, работающих в сфере найма, «Собака Павлова» провела исследование продуктов, которые предлагают похожую функциональность. Отдельно мы пообщались со специалистами в области рекрутинга, узнали их требования к такого рода сервисам.
<a href="/images/portfolio/easydocs-2024/3.png" target="_blank"></a>
<em>Список кандидатов. Принять на работу</em>
Полученные данные собрали воедино и смогли получить картину того, как происходит процесс найма и какая функциональность действительно важна для пользователей.
<a href="/images/portfolio/easydocs-2024/4.png" target="_blank"></a>
<em>Список кандидатов. Отправить в архив</em>
После исследования пользователей и конкурентов выделили основные пользовательские сценарии и отразили их в виде макетов интерфейса.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
<a href="/images/portfolio/easydocs-2024/5.png" target="_blank"></a>
<em>Список кандидатов. В архиве</em>
User-flow этих сценариев содержало различные кейсы и ситуации, с которыми мог столкнуться пользователь:
- создание и настройка анкеты;
- настройка этапов прохождения процесса найма;
- заполнение анкеты;
- загрузка необходимых документов и т.п.
<a href="/images/portfolio/easydocs-2024/6.png" target="_blank"></a>
<em>Список кандидатов. Отправить повторно</em>
Собрали все пользовательские сценарии в отдельный документ. Затем отрисовали макеты на основе всех этих user-flow.
<a href="/images/portfolio/easydocs-2024/12.png" target="_blank"></a>
<em>Первый вход после приглашения на работу</em>
<a href="/images/portfolio/easydocs-2024/13.png" target="_blank"></a>
<em>Первый вход после приглашения на работу. Заявление на электронную подпись</em>
<a href="/images/portfolio/easydocs-2024/14.png" target="_blank"></a>
<em>Первый вход после приглашения на работу. Образование</em>
<a href="/images/portfolio/easydocs-2024/15.png" target="_blank"></a>
<em>Первый вход после приглашения на работу. Запрос документов</em>
Финальный результат – макеты интерфейса в мобильной и веб-версиях с выстроенным user flow пользователя по различным сценариям:
- создание анкеты и ее рассылка со стороны нанимателя;
- заполнение анкеты кандидатом:
- начало работы кандидата в системе и т.п..
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/easydocs-2024/31.png" />
<PhoneMockup image="/images/portfolio/easydocs-2024/32.png" />
</div>
<em>Анкета кандидата, мобильная версия. Способ заполнения и согласие на обработку персональных данных</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/easydocs-2024/33.png" />
<PhoneMockup image="/images/portfolio/easydocs-2024/34.png" />
</div>
<em>Анкета кандидата, мобильная версия. Заполнение данных</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/easydocs-2024/35.png" />
<PhoneMockup image="/images/portfolio/easydocs-2024/36.png" />
</div>
<em>Анкета кандидата, мобильная версия. Заполнение данных, экран успеха</em>
### <a name="anchor4" />Экстра-польза
На этапе исследований пользователей и сервисов конкурентов составили CJM – карту пути трудоустройства в различных компаниях.
Это позволило сравнить и проанализировать процессы, понять, какие из них можно объединить в единый этап, а какие следует вынести в отдельный шаг.
<a href="/images/portfolio/easydocs-2024/7.png" target="_blank"></a>
<em>Настройка этапов найма</em>
<a href="/images/portfolio/easydocs-2024/8.png" target="_blank"></a>
<em>Настройка этапов найма. Добавление поля в анкету-1</em>
<a href="/images/portfolio/easydocs-2024/9.png" target="_blank"></a>
<em>Настройка этапов найма. Добавление поля в анкету-2</em>
<a href="/images/portfolio/easydocs-2024/10.png" target="_blank"></a>
<em>Настройка этапов найма. Добавление поля в анкету-3</em>
## <a name="anchor5" />Интересные решения
1. Модальное окно для добавления списка с зависимыми полями в анкету, заполняемую потенциальным кандидатом. Это список, в котором пользователь при добавлении поля (Название) указывает зависимые поля (Варианты ответа).
Необходимость в таком решении появилась уже на стадии проектирования. Команда «Собаки» совместно с разработчиками создала несколько вариантов решения. Данный получился самым удобным для пользователя.
<a href="/images/portfolio/easydocs-2024/11.png" target="_blank"></a>
<em>Создание анкеты с зависимыми полями</em>
2. Экран создания анкеты кандидата. Здесь заказчику нужен был простой и удобный инструмент добавления в анкету вопросов и документов с возможностью перемещения полей для ответа по документу.
По результатам обсуждений с заказчиком мы реализовали блок перетаскиваемыми плашками. Это визуально понятно пользователю, так можно быстро настроить требуемый порядок и добавить новые поля.
<a href="/images/portfolio/easydocs-2024/22.png" target="_blank"></a>
<em>Экран создания анкеты кандидата</em>
3. Дизайнер визуализировал все существующие в сервисе процессы и пользовательские сценарии. Это позволило разработчикам быстрее погрузиться и понять механику работы отдельных элементов, экранов и переходов между экранами, что в свою очередь повлияло на скорость разработки макетов. Одним из хороших примеров является user-flow «Заполнение анкеты кандидатом».
<a href="/images/portfolio/easydocs-2024/16.png" target="_blank"></a>
<em>Анкета кандидата. Приветствие</em>
<a href="/images/portfolio/easydocs-2024/17.png" target="_blank"></a>
<em>Анкета кандидата. Способ заполнения</em>
<a href="/images/portfolio/easydocs-2024/18.png" target="_blank"></a>
<em>Анкета кандидата. Заполнение линчых данных</em>
<a href="/images/portfolio/easydocs-2024/19.png" target="_blank"></a>
<em>Анкета кандидата. Загрузка паспорта</em>
<a href="/images/portfolio/easydocs-2024/20.png" target="_blank"></a>
<em>Анкета кандидата. Дополнительные вопросы</em>
<a href="/images/portfolio/easydocs-2024/21.png" target="_blank"></a>
<em>Анкета кандидата. Экран успеха</em>
## <a name="anchor6" />Нюансы процесса
Когда «Собака Павлова» присоединилась к пректу, модуль был на стадии концепта (только планировался к разработке). При проектировании интерфейса часто сверялись с заказчиком для получения обратной связи. Это позволило быстро корректировать и пользовательские сценарии, и интерфейсы.
Процесс получился очень гибким и это позволило заказчику получить продукт именно таким, как он представлял еще на старте проекта.
Отметим степень вовлеченности заказчика: он был владельцем продукта и понимал все его технические возможности, дальнейший план развития. Это помогло сократить количество гипотез и концептов до тех, которые заказчик действительно мог реализовать.
<a href="/images/portfolio/easydocs-2024/23.png" target="_blank"></a>
<em>Создание анкеты. Запрос обязательных документов</em>
<a href="/images/portfolio/easydocs-2024/24.png" target="_blank"></a>
<em>Отправить анкету кандидату</em>
<a href="/images/portfolio/easydocs-2024/25.png" target="_blank"></a>
<em>Отправить анкету. Массовая рассылка</em>
## <a name="anchor7" />