Разработали диджитал-продукт с нуля — 16 шагов от идеи до релиза

Разработали диджитал-продукт с нуля — 16 шагов от идеи до релиза

Когда нам потребовался инструмент для рекрутинга, мы ухватились за эту идею и принялись его разрабатывать. В результате создали сервис VideoApply и теперь активно им пользуемся. Недавно он стал доступен для бета-теста на videoapply.io Рассказываем о 16 шагах, которые мы сделали, чтобы выпустить продукт, где мы сами и заказчик, и разработчик, и маркетер.

Кто мы?

Мы — Vide Infra, занимаемся дизайном и девелопментом диджитал-продуктов, которые регулярно собирают награды. Делаем бесподобные мобильные и веб-приложения, маркетплейсы и большие корпоративные сайты. Входим в топ-10 Рейтинга Рунета по креативности и топ-40 мирового рейтинга Awwwards. О наших проектах и новостях, читайте на videinfra.ru

1. Превратили потребность в задачу

VIde Infra растет и ищет лучших специалистов себе в команду. При этом ресурсы на рекрутинг у нас ограничены. Болезненней всего дается первый этап, когда требуется просмотреть огромное количество откликов и быстро решить, кого отсеять, а кого пригласить на подробное собеседование. Его называют скрининг, и обычно это самая трудоемкая часть отбора.

Мы начали делать VideoApply, чтобы упростить себе рекрутинг.
Мы начали делать VideoApply, чтобы упростить себе рекрутинг.

Очевидно, что мы не единственная команда, для которой скрининг стал вызовом. Это типичная ситуация для малого бизнеса и небольших компаний, сталкивающихся со следующими трудностями:

  1. Много откликов, мало времени. Нужно обработать большое количество заявок за сжатые сроки.
  2. Трудно понять самые важные качества кандидата. На этапе скрининга хочется узнать кандидата как человека: какие у него коммуникативные навыки, насколько он адекватен, искренен и профессионально ли относится к делу.
  3. Неинформативность СV. Через резюме и письма можно понять очень мало. Они дают слишком много возможностей для предвзятого отношения к кандидатам.
  4. Планирование собеседований. Тяжело контролировать, сколько времени займет первичное собеседование.
  5. Расписание. Согласовать расписание звонков со всеми кандидатами требует больших усилий, а вносить в него изменения приходится слишком часто.
  6. Ресурсы. Если в компании нет HR, то предварительные собеседования становятся роскошью.

Получается, что основные инструменты скрининга: резюме, сопроводительные письма и предварительные собеседования — неудобны и неэффективны, особенно для небольших компаний.

Нам нужен был сервис, который поможет проводить первичные собеседования. Когда мы это осознали, подобных сервисов практически не было, а те, что были, нас не устраивали — либо не подходили по функционалу, либо выглядели достаточно сыро, а с точки зрения дизайна оставляли желать лучшего. При этом наш анализ показывал, что запрос есть: ожидалось, что рынок virtual interview software будет расти.

Мобильный интерфейс разрабатывали параллельно с десктопным.
Мобильный интерфейс разрабатывали параллельно с десктопным.

Вывод был один — мы сделаем собственный сервис для скрининговых собеседований. Как должен выглядеть инструмент, который поможет оптимизировать наем?

  • Визуальный. Во время разговора зрительно мы получаем 50–80% информации, и лишь оставшуюся часть — вербально. За секунды можно ухватить образ человека: как он себя позиционирует, его социальные атрибуты, вдумчивость, внимательность.
  • Асинхронный. Соискатель может спокойно подготовиться и в удобное для себя время сделать запись, а работодатель — так же посмотреть ее. Не надо состыковывать расписание.
  • Простой. Работодателю нужно быстро посмотреть большое количество кандидатов и принять по ним решения: кого имеет смысл приглашать на живое собеседование. Кандидат, в свою очередь, должен четко понять, что от него хотят, и без труда сделать запись.
  • Универсальный. Сервис должен легко встраиваться в рабочие процессы компании. Например, позволять удобно обмениваться анкетами кандидатов внутри команды.

2. Дизайн UI. Добились понятного интерфейса

Экран соискателя для отклика на вакансию.
Экран соискателя для отклика на вакансию.

На первом этапе мы определились с базовым функционалом сервиса. Он состоял из двух частей:

  • Аккаунт работодателя с информацией о компании и возможностью создавать вакансии.
  • Аккаунт соискателя с возможностью записывать видео.

Под эти функции мы разработали первый дизайн и проводили тесты:

  1. Нарисовали в Figma интерактивный макет интерфейса, который имитировал реакцию на действия пользователей.
  2. Прописали контекст и цели для UX-тестов: опубликовать вакансию, записать отклик, просмотреть отклик и т.д.
  3. Заказали UX-тесты на стороне, чтобы получить максимально объективный результат. Собирали фидбек о том, понятен и удобен ли интерфейс.
  4. На основе фидбека вносили изменения в макет, пробовали новые идеи и варианты решений.
Интерактивный макет для тестов.

Стороннее тестирование, во-первых, валидировало наши представления о том, насколько понятен и удобен интерфейс. Во-вторых, аутсорс позволил провести тесты на разных рынках — мы заказывали их у локальных пользователей.

Мы разрабатывали дизайн сразу и для мобильной, и для десктопной версии. Через несколько итераций мы имели палитру решений и выбирали из них те, что нравятся пользователям, чтобы получить интерфейс, в котором очень просто разобраться.

Тесты помогли сделать отклик на вакансию удобнее.
Тесты помогли сделать отклик на вакансию удобнее.

Например, мы создали нестандартный экран соискателя для отклика на вакансию, который тестировщики оценили высоко:

  • Пользователь одновременно видит и информацию о вакансии, и свою анкету. Он может подсмотреть какие-то вводные прямо во время записи. Информация о должности и о компании разделена по вкладкам.
  • Интуитивно понятная, разбитая на шаги анкета: простая инструкция, регистрация и окно записи.
  • Минималистичная форма регистрации, в которой оставили только самое необходимое: имя, CV / портфолио и подтверждение почты, не позволяющее анкете потеряться.
  • Приятный интерфейс записи с удобными кнопками и индикаторами, которые держат пользователя в курсе того, как проходит запись.

Аккуратность и удобство этой страницы складываются из множества деталей: композиции форм для ввода, анимации окон, стиля элементов и т.д. Ни один шаблон не позволил бы добиться такого продуманного интерфейса. Тем более невозможен был бы дизайн с особым характером, заточенный под бренд VideoApply.

3. Дизайн UI. Отказались от шаблонов

Как с любым нашим проектом, мы исходили из того, что интерфейс должен быть превосходным. Продукт непривычный для рынка, а значит должен быть максимально понятен. Качественный дизайн задаст высокую планку и вдохновит на продуктивную работу.

  • Работодатели не должны прилагать лишние усилия, чтобы интегрировать сервис в процессы компании. Наоборот, VideoApply должен избавлять от хлопот.
  • Поскольку кандидатам надо делиться личными данными и использовать камеру, интерфейс должен вызывать доверие.

Поэтому мы изначально решили делать качественный крафтовый продукт, которым будет приятно пользоваться нам самим. Часто стартапы прибегают к готовым интерфейсным фреймворкам и шаблонам, чтобы быстрее выйти на рынок. Это ускоряет работу, но и выглядят, и функционируют такие продукты усредненно. Стандартные решения редко позволяют создать одновременно удобный и эстетичный сервис. Без них мы смогли реализовать свои идеи так, как хотели.

Сделали стайл-гайд. Описали все компоненты, из которых собирается страница: стили текста, цвета, кнопки, формы, поля, ошибки и т.д.

Разработали диджитал-продукт с нуля — 16 шагов от идеи до релиза

Продумали моушен. Анимация — тоже часть нашего стайл-гайда. Все динамичные элементы описываем прямо в Figma на этапе дизайна. Очень щепетильно к этому относимся, чтобы продукт приносил эстетическое удовольствие. Пользователю приятно, когда интерфейс отвечает на любое действие.

Добавили пасхалки. Спрятали засадных миньонов на экранах с ошибками. Ну, чтобы были.

4. Разработка. Структурировали работу над фронтом и бэком

Для разработки фронтенда мы выбрали Vue.js, фреймворк, заточенный под создание интерфейсов веб-приложений. Перед бэкенд-разработчиками встала задача создать API для интеграции с фронтом.

Упростить ее помог сервис Storybook. Этот инструмент позволяет фиксировать различные состояния отдельных компонентов UI, проверять, как они работают, и одновременно вести документацию для бэка. Поэтому, когда первая версия фронтенда была готова, бэкенд-разработчики сразу же имели на руках четкую документацию того, что должно быть реализовано с их стороны. Писали бэк на PHP-фреймворке Symfony, который используем для всех проектов из-за его универсальности и мощности.

Разработали диджитал-продукт с нуля — 16 шагов от идеи до релиза

5. Разработка. Настроили облачный сервис под продукт

Для многих проектов мы пользуемся облачными сервисами Amazon (AWS). Их можно гибко настроить под конкретные задачи. Для VideoApply мы использовали:

  • Relational Database Service — для хранения баз данных.
  • Simple Storage Service (S3) — для хранения файлов (видеоанкет и документов, отправляемых кандидатами).
  • Elastic Compute Cloud (EC2)— для обработки видео.
  • CDN CloudFront — для оптимизации просмотра видео.
  • Simple Email Service — для отправки писем.
Просмотр откликов на мобильном.
Просмотр откликов на мобильном.

Мы организуем работу с AWS таким образом, чтобы заранее подготовиться к росту пользователей. Уже сейчас мы готовы к обработке большого объема видео и позаботились о приватности пользовательских данных.

Работа с большим объемом видео

Каждое записанное пользователем видео перед сохранением проходит обработку — мы проверяем, что это точно видео (а, например, не вредоносный код), а также задаем ему формат и качество. Обработка может занимать несколько секунд. Если количество пользователей, которые одновременно записывают видео, резко меняется, то нагрузка на сервер может скакать и приводить к ошибкам.

Чтобы этого избежать, мы обрабатываем видео с помощью сервиса EC2. Он предоставляет для исполнения кода виртуальный сервер, который автоматически масштабируется, когда возникает необходимость. Поэтому рост активности пользователей не помешают стабильной работе VideoApply.

Приватность

После записи анкеты кандидатов не попадают на сервер, где хранятся базы данных проекта. Они сразу отправляются на серверы S3, предназначенные для хранения объемных файлов. Мы настроили защиту этого хранилища — файлы пользователей не доступны третьей стороне и не будут проиндексированы поисковыми роботами.

6. Сustdev. Напомнили кандидатам включить микрофон

Мы провели функциональное тестирование внутри компании, а затем занялись custdev — тестированием на целевой аудитории. Мы собирали фидбек и со стороны работодателей, и со стороны кандидатов, анализировали их потребности и добавляли необходимые функции.

Если запись звука не идет, выводим сообщение с просьбой  проверить микрофон.
Если запись звука не идет, выводим сообщение с просьбой  проверить микрофон.

Тестировщики жаловались, что иногда, записав все ответы на вопросы, они обнаруживали, что в записи нет звука. Это происходило потому, что они забывали переключиться на нужный микрофон или он вовсе был выключен. Если за записью видео они могли следить в реальном времени, то информацию о звуке получить было неоткуда.

  • Мы внедрили механизм, который проверяет уровень звука, и если его нет, уведомляет об этом пользователя.
  • Добавили сообщения об ошибках и индикаторы, которые четко сигнализируют о начале и ходе записи.

7. Сustdev. Помогли кандидатам чувствовать себя уверенней

Когда пользователь записывает и сохраняет видео, оно отправляется в хранилище файлов, где к нему получает доступ работодатель. Пока пользователь не сохраняет видео, он может сделать черновую запись, пересмотреть ее и переписать сколько угодно раз — черновики вообще нигде не хранятся. Нам казалось это очевидным, потому что никакой необходимости в них нет.

Мы не учли, что самопрезентация — деликатный процесс, а запись на камеру у многих усиливает волнение. Пользователи хотели абсолютно точно быть уверены, что работодатель не увидит неудавшиеся дубли.

  • Мы сопроводили запись сообщением о том, что сохраняется только одобренное пользователем видео.
  • Сделали личный кабинет кандидата — страницу со всеми откликами, где каждую анкету всегда можно пересмотреть и удалить, чтобы никаких тревог по поводу безопасности личных данных не возникало.
Сustdev позволил понять, что кандидатам нужен свой личный кабинет.
Сustdev позволил понять, что кандидатам нужен свой личный кабинет.

8. Сustdev. Упростили отклик на вакансию

Нам хотелось, чтобы кандидат, перейдя по ссылке от работодателя, сразу оказывался на странице для записи отклика. Любой дополнительный шаг усложняет отклик и может стать препятствием, которое отпугивает кандидатов.

Шаги заполнения анкеты кандидатом.
Шаги заполнения анкеты кандидатом.

Поэтому мы отказались от регистрации для кандидатов. Зайдя на страницу вакансии, кандидат вводит почту, на которую получает одноразовый код. Для каждой сессии аутентификация проводится с помощью такого одноразового кода.

Даже когда стало понятно, что кандидатам нужен небольшой личный кабинет, нам не хотелось усложнять процесс отклика на вакансию, поэтому доступ к ЛК упрощен. После отклика на почту кандидата приходит ссылка на кабинет с уже готовым секретным ключом, который считывается при переходе.

9. Custdev. Сделали шаблоны для работодателей

Типичные вопросы для собеседования на странице создания вакансии.
Типичные вопросы для собеседования на странице создания вакансии.

Для скринингового собеседования достаточно общих типичных вопросов, на которые соискатель сможет быстро ответить. Чтоб работодателям не приходилось вводить их вручную, они могут создать шаблоны с вопросами и использовать их для разных вакансий. Мы также создали полностью готовые шаблоны с наиболее типичными вопросами.

10. Custdev. Добавили  команды и уровень доступа 

Настройка команды с разным уровнем доступа сотрудников. 
Настройка команды с разным уровнем доступа сотрудников. 

Мы добавили страницу для администрирования компании. С нее можно выслать приглашение члену компании и определить для него один из четырех уровней доступа. Например, можно добавить в команду человека, у которого есть доступ к просмотру анкет, но нет возможности создавать новые вакансии. Командам стало легче обмениваться анкетами внутри компании. Кроме того, появилась возможность создавать страницы для нескольких компаний с одного аккаунта.

11. Custdev. Сделали просмотр анкет быстрым и понятным

Изначально мы сделали для каждого отклика на вакансию собственную страницу. Работодателю, чтобы посмотреть видео, надо было открывать каждый отклик по отдельности. Это не очень-то удобно для быстрого отсеивания неподходящих кандидатов. Хотелось, чтобы одновременно с просмотром конкретной анкеты можно было не терять из вида остальные отклики и разбивать их на группы.

Решение мы нашли в привычном многим интерфейсе плейлистов. Слева — столбец со всеми откликами, справа — просматриваемая анкета. Под ней контакты кандидата, его CV и возможность поставить оценку: лайк или дизлайк. Такая простая оценка позволяет быстрее сортировать анкеты — они перемещаются на соответствующие вкладки.

12. Custdev. Упростили ориентацию на сайте

Детали интерфейса.
Детали интерфейса.

Асинхронные собеседования — еще не привычный инструмент, хотя и востребованный. Пользователю легко разобраться и ориентироваться на сайте благодаря множеству продуманных деталей: ховеры с инструкциями, индикаторы состояний, сообщения о совершенных действиях и т.д.

13. Сами убедились в эффективности MVP

Работа над VideoApply шла параллельно с обычной работой компании над проектами заказчиков и заняла больше времени, чем мы хотели. Нам не терпелось перейти к запуску, но не выходить же на рынок с сырым продуктом! У нас был огромный плюс: VideoApply нужен был нам самим. Поэтому мы могли опробовать MVP внутри компании.

Разработали диджитал-продукт с нуля — 16 шагов от идеи до релиза

Сервис сработал именно так, как нужно — поиск сотрудников ускорился в разы. Проще всего оказалось отсеивать неадекватных кандидатов. Мы, например, не ожидали, что кто-то посчитает нормальным покуривать во время записи. Или, на вопрос «Почему вы хотите у нас работать?» с вызовом отвечать: «А кто сказал, что я хочу?» Представляете, если бы для таких кандидатов мы подыскивали слоты в расписании и внимательно изучали их портфолио — сколько времени пришлось бы потратить! А так все сразу понятно.

В общем, VideoApply легко встроился в наши процессы и делал то, что от него ожидали.

14. Внедрили монетизацию

Мы создавали качественный продукт, которого не хватало нам самим. Если он будет полезным, удобным и эстетичным, то придумать способ монетизации всегда возможно.

Страница выбора тарифного плана.
Страница выбора тарифного плана.

Мы внедрили механику тарифных планов. Появились лимиты на размещение вакансий, количество откликов и членов команды.

Добавили страницу с выбором тарифов. Четко обозначена разница между разными планами. Предусмотрена возможность поменять план и тип подписки (ежегодный и ежемесячный) и вовсе ее отменить. Обозначены даты активации тарифа. Мы оставили и бесплатный план: лимиты на нем очень низкие, но позволяют ознакомиться со всем функционалом.

Сделали дашборд. На нем собрана информация об активных вакансиях, действующем тарифе, показатели по лимитам и срок их обновления.

После введения монетизации стало понятно, что пользователям нужен дашборд для отслеживания тарифов.
После введения монетизации стало понятно, что пользователям нужен дашборд для отслеживания тарифов.

Добавили уведомления. Чтобы пользователь четко понимал, что происходит, мы уведомляем его о превышении лимитов, сроках подписки и изменении плана.

Ввели ограничения. Если добавленная вакансия превышает лимит, то она сохраняется в черновиках, но не становится публичной. Если полученный отклик превышает лимит, то он отражается в кабинете, но недоступен для просмотра.

Изменили записи в базе данных. У работодателей есть возможность схитрить: удалить вакансию, на которой достигнут лимит, и создать точно такую же, перезапустив счетчик. Чтобы этого не происходило, мы вообще не удаляем отклики, а просто помечаем их как удаленные. Это позволяет учитывать их в конкретном периоде подписки. Кроме того, это может пригодиться в будущем для ведения статистики.

15. Сделали промо-сайт для бета-теста

Промо-сайт videoapply.io

VideoApply открыт для бета-теста! Мы приглашаем присоединиться к тесту с помощью промо-сайта videoapply.io У нас огромный опыт в создании подобных сайтов, а для собственного продукта мы, естественно, сделали эталонный промо. Он включает хаб с действительно полезным контентом о рекрутинге и дистанционных собеседованиях, который использует актуальные seo-практики.

16. Настроили цепочки писем

Мы подготовили десятки триггерных писем. Они отправляются автоматически в ответ на определенные действия (или бездействие).

Так выглядит планирование цепочек писем. 

Предусмотрели множество разных сценариев:

  • Стимулируем активнее пользоваться сервисом.
  • Предлагаем перейти на платную подписку.
  • Даем инструкции: с чего начать, как привлечь больше откликов.
  • Удерживаем тех, кто отписывается.
Все письма, конечно, соответсвуют бренду.
Все письма, конечно, соответсвуют бренду.

В целом, погрузились в email-маркетинг, чтобы повышать лояльность и удерживать пользователей.

P.S. Какие у нас планы

Следующие шаги будут зависеть от результатов бета-теста: какой фидбек мы получим, как работодатели и соискатели будут пользоваться сайтом, какой платный функционал вызовет наибольший интерес.

С другой стороны, уже есть несколько функций, которые мы планируем добавить:

  • Ждет внедрения уже разработанная возможность отвечать соискателям через сайт — чтобы не приходилось делать это через почту или мессенджер. Работодатель сможет в несколько кликов отправить формализованное письмо кандидату или нескольким одновременно, а также отслеживать исходящие сообщения.
  • Возможность внутри команды оставлять комментарий и развернутую оценку кандидатов.

  • Интеграция с календарными сервисами.

  • Первичная оценка и сортировка анкет с помощью ИИ.

Страница для отправки писем соискателям. 
Страница для отправки писем соискателям. 

Мы создали сервис, о котором мечтали сами. Мы активно пользуемся VideoApply, он существенно облегчает и ускоряет рекрутинг.

Даже если он не принесет тот результат, на который рассчитываем, мы крайне довольны, что прошли путем стартапа. Создание VideoApply дало нам опыт, который трансформируется в новое качество работы над продуктами: и собственными, и заказчиков.

Работа над VideoApply углубила наш подход к разработке сложного продукта. Мы стали лучше понимать, как формулировать и корректировать идею, создавать, тестировать и совершенствовать дизайн и развивать готовый продукт.

Подпишитесь на нас, чтобы не пропустить новые детальные разборы кейсов, обсуждения трендов индустрии и взрывных идей. Также следите за нами в Telegram-канале и на сайте Vide Infra.

На связи!

1010
77
11 комментариев

Классно, что делитесь подробностями разработки проектов! так держать и пишите еще.

1
Ответить

Спасибо! Конечно, будем!

Ответить

Выглядит очень круто! Миньоны идеальные кандидаты на любую должность)))

1
Ответить

) Спасибо!

Ответить

миньоны идеальные иллюстрации под брендинг :)

1
Ответить

Тоже так думаем)

Ответить

Это прекрасный сервис, очень просто и приятно пользоваться. Особенно удобно в бешенном ритме жизни - найти несколько минут для записи видео всегда проще, чем назначать интервью и подстраиваться под время.

1
Ответить