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

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

Кто мы?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Приватность

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На связи!