Главная
Кейсы
Разработка сайта для сервиса по поиску фрилансеров Wandwork

Разработка сайта для сервиса по поиску фрилансеров Wandwork

Клиент: WandWork

Разработка сайта для сервиса по поиску фрилансеров

О проекте

Стартап по поиску проверенных фрилансеров

Фаундеры

IT-специалист и три популярных блогера, работающих с крупными российскими фэшн-брендами

Особенность

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

Задача

Разработать сайт и его мобильную адаптацию

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

Создать MVP сайта за 6 месяцев. Фаундеры хотели наконец запустить проект и получить возможность отслеживать метрики, чтобы протестировать реакцию пользователей

Результат

Разработали дизайн, сайт и его мобильную адаптацию, в котором:

Заказчики публикуют проекты и вакансии, подбирают фрилансеров

Фрилансеры размещают резюме и портфолио, ищут проекты, откликаются на вакансии

WandWork получают кастомизированную статистику и отчёты в административной панели сайта

Все пользователи могут общаться в личных чатах и чатах проектов

Визуальное решение сайта

Важно было учесть визуальные предпочтения ЦА с видением кофаундеров, сохранив при этом суть сервиса по поиску специалистов

Плюс основным референсом был Instagram*, интерфейс которого проектировали с акцентом на фото и видео. Надо было придумать, как сохранить пожелание клиента с учётом того, что на WandWork почти не будет изображений

*принадлежит Meta, запрещена в РФ

Целевая аудитория

ЦА — представители сфер бьюти и моды, воспитанные на эстетике премиум-брендов, и IT-специалисты, привыкшие к сайтам в стилистике топовых банков и IT-гигантов. Это два противоположных видения — и мы искали грамотное решение, как их скрестить

Видение клиента

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

Суть сервиса

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

Что получилось в итоге

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

Сделали акцент на визуальном портфолио в карточке мэйта и детальной странице.

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

Сократили путь пользователя до минимума — везде, где было возможно

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

Вместе с тем при открытии детальной информации в Проектах и Мэйтах можно просматривать следующие проекты и пользователей, без возвращения назад в список

Добавили скругления в тегах фильтров и два дополнительных цвета — зелёный и красный — для обозначения статуса фрилансера.

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

Вход и регистрация

При первом входе на сайт пользователь заполняет анкету: заказчика или фрилансера

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

Выбрали такое решение по 3 причинам:

Фрилансер сразу видит, какую информацию нужно добавить

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

Большое количество полей выглядит громоздко

А вот анкету заказчика мы не стали разделять на шаги, потому что она существенно короче

Мэйты

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

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

Мой круг

Пользователи, которых добавили вы

Второй круг

Пользователи, которых добавили пользователи из вашего круга

Третий круг

Все пользователи сайта

Профиль пользователя

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

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

Проекты и вакансии

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

Отправлять сообщения при приглашении на проект или отклике на вакансию могут только те пользователи, которые указали ФИО в профиле. Так сервис защищает заказчиков и фрилансеров от анонимных сообщений

Функционал заказчика

Заказчик может приглашать на проект мэйтов, откликнувшихся на вакансии фрилансеров и рекомендованных сервисом кандидатов со статусом «Ищу проект» из любого круга

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

Создание

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

По пожеланию WandWork мы настроили параметры описания проекта таким образом, чтобы они могли добавлять и удалять теги специализаций и навыков в административной панели

Размещение

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

Приглашение

При отправке приглашения фрилансеру и отклонении отклика на вакансию заказчик может добавить сообщение

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

Заказчик может в любой момент закрыть вакансию, проект или прервать участие фрилансера

Функционал фрилансера

Исполнитель может откликаться на вакансии, отзывать отклики, принимать приглашения на проект или отказываться от них

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

В разделе Участие исполнитель видит все проекты, на которых он задействован. А в Завершённых — закрытые

Фильтры

По умолчанию в боковой панели раскрыты часто используемые фильтры: мейты, специализация, уровень, стоимость. Все остальные фильтры фрилансер раскрывает при желании.

Так проще ориентироваться на странице: пользователь не отвлекается на лишние детали и сразу видит наиболее важную информацию

Избранное

Любую вакансию можно добавить в Избранное. Все вакансии, на которые откликнулся исполнитель, попадают в Мои отклики и ждут подтверждения от заказчика

Уведомление

При приглашении на проект фрилансер получает всплывающее уведомление, сообщение в чат и оповещение в Приглашения

Отклик

Фрилансер может откликнуться или написать сообщение заказчику сразу с карточки вакансии. А по клику на неё — попасть в детальное описание проекта с вакансиями

Резюме и портфолио

Фрилансер может:

Загрузить резюме и портфолио, указать опыт в индустриях, уровень (junior, middle, senior), владение языками, навыки

Добавить в портфолио ссылки на сторонние ресурсы, например, на Behance и Dribble

Выставить статус «Не ищу проект» — и тогда заказчики не будут видеть его профиль в рекомендациях. Опция удобна для исполнителей, которые ищут проекты на будущее или просто просматривают вакансии.

При этом фрилансер всё равно сможет получать сообщения от заказчиков из любого круга

Сообщения

В разделе «Сообщения» есть чаты:

Личный чат

В нём можно обмениваться сообщениями с другими пользователями

Чат проекта

Появляется, когда проект переходит в статус «В работе»

Чат уведомлений

В него автоматически приходят системные уведомления: о приглашении на проект, отклике на вакансию и другие

Обычно онлайн-чаты интегрируют, но специально по пожеланию WandWork мы разработали и внедрили собственные. Потому что:

Нет абонентской платы

Самописный чат, в отличие от сервисов, которые предоставляют услуги по интеграции уже готовых чатов, не требует абонентской платы

Чат выдержан в общей концепции сайта

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

Нет платы за уведомления системы и кастомизированные сообщения

В то время как сторонние сервисы внедряют такие возможности за отдельную плату

Донаты

WandWork — бесплатный сервис, который монетизируется за счёт донатов.

Мы интегрировали сервис онлайн-платежей ЮKassa и добавили триггер — всплывающее окно с предложение отправить донат. Триггер срабатывает после успешного выполнения важного действия, например, завершения проекта

Аналитика

Мы создали и добавили в административную панель кастомизированную статистику, возможность формировать отчёты, подключили Webvisor.

Сейчас WandWork видят долю запущенных проектов с рекомендованными специалистами, среднее количество регистраций по приглашениям, долю завершённых проектов с донатом, скорость запуска проекта и другие показатели

Стек Backend-разработка

Среда разработки: PyCharm

Языки: Python 3.12 (django 5.1 + drf)

Архитектурные шаблоны: Монолитное приложение

База данных: Postgresql•Redis

Очередь задач: Celery + Redis

Контейнерезация: Docker + Compose

Документация: Swagger

Система контроля версий: Git

Стек Web-разработка

Среда разработки: PhpStorm

Языки: TypeScript

Технологии: React•MUI

•RTK-Query

•Redux Toolkit

•React Hook Form

Статистика проекта

Менеджер проекта: 432 часа

Аналитики: 262 часа

UX/UI-дизайнеры: 550 часов

Backend-разработчики: 1115 часов

Frontend-разработчики: 874 часа

HTML-разработчик: 322 часа

Контент-менеджеры: 23 часа

QA-инженер: 587 часов

Spider Group® специализируется на разработке мобильных приложений, сайтов, CRM-систем и серверной логики, внедрении AI, а также создании дополненной реальности и интернета вещей разработке мобильных приложений, веба, серверных проектов, дополненной реальности, искусственного интеллекта и Интернета вещей.

Разработка сайта для сервиса по поиску фрилансеров Wandwork

Клиент: WandWork