Вайти
Product Designer
•
Стартап
•
2026
С нуля разработал интерфейсы и логику карьерного сервиса, объединив
поиск вакансий, каталог компаний, тренажёр интервью и инструменты в единую
рабочую среду. Создал общую дизайн-систему, которая связала сервисы
и подготовил продукт к быстрому запуску и дальнейшему росту.
поиск вакансий, каталог компаний, тренажёр интервью и инструменты в единую
рабочую среду. Создал общую дизайн-систему, которая связала сервисы
и подготовил продукт к быстрому запуску и дальнейшему росту.
О проекте
ВАЙТИ — это job-tech стартап, который помогает людям находить работу в IT. Вместо
множества разных сайтов продукт предлагает единую платформу. Внутри неё объединены
поиск вакансий, база компаний, прокачка навыков и нужные инструменты для откликов.
множества разных сайтов продукт предлагает единую платформу. Внутри неё объединены
поиск вакансий, база компаний, прокачка навыков и нужные инструменты для откликов.
Моя роль
Когда я пришёл в ВАЙТИ, в команде ещё не было отдельного дизайнера. Продукт собирался
общими усилиями, поэтому интерфейсу не хватало единой логики и сквозных сценариев.
Уже были первые наработки, но многие из них нужно было полностью переосмыслить.
общими усилиями, поэтому интерфейсу не хватало единой логики и сквозных сценариев.
Уже были первые наработки, но многие из них нужно было полностью переосмыслить.
Моей главной задачей стало превращение бизнес-идей в понятные и рабочие интерфейсы.
Я разбирал спорные решения, пересобирал логику экранов и искал баланс между задачами
бизнеса и удобством для пользователей.
Я разбирал спорные решения, пересобирал логику экранов и искал баланс между задачами
бизнеса и удобством для пользователей.
Что я сделал
Полностью взял на себя дизайн продукта: отказался от части существующих наработок,
аргументированно внёс новые решения и спроектировал все ключевые сценарии и экраны.
По ходу работы собирал логику взаимодействия внутри сервисов, заложил основу
интерфейсной системы, чтобы продукт получился цельным, предсказуемым для пользователя.
аргументированно внёс новые решения и спроектировал все ключевые сценарии и экраны.
По ходу работы собирал логику взаимодействия внутри сервисов, заложил основу
интерфейсной системы, чтобы продукт получился цельным, предсказуемым для пользователя.
Исследования
Ограничения
Проект был на стадии MVP, поэтому долго оставаться в исследовании было нельзя: команде
нужно было быстрее переходить к интерфейсам и двигать продукт в разработку.
нужно было быстрее переходить к интерфейсам и двигать продукт в разработку.
Конкуренты
Я провёл быстрый анализ прямых и косвенных конкурентов. Среди прямых смотрел job-tech
сервисы — изучал, как там устроена выдача вакансий, фильтры, карточки и страницы
компаний. Среди косвенных разбирал продукты для подготовки к интервью, составления
резюме и работы с навыками.
сервисы — изучал, как там устроена выдача вакансий, фильтры, карточки и страницы
компаний. Среди косвенных разбирал продукты для подготовки к интервью, составления
резюме и работы с навыками.
По каждому сервису я фиксировал сильные и слабые стороны. Искал решения, к которым
пользователи уже привыкли, и подмечал места, где интерфейс перегружен или усложняет
сценарий.
пользователи уже привыкли, и подмечал места, где интерфейс перегружен или усложняет
сценарий.
Пользователи
Мне было легко понять целевую аудиторию, потому что незадолго до проекта сам искал
работу в IT. На своём опыте знал, как сложно сравнивать требования в вакансиях, выбирать
компании и готовиться к собеседованиям.
работу в IT. На своём опыте знал, как сложно сравнивать требования в вакансиях, выбирать
компании и готовиться к собеседованиям.
По ходу работы так же проводил быстрые коридорные проверки со знакомыми
разработчиками, которые попадали в целевую аудиторию продукта. Показывал им отдельные
сценарии, задавал вопросы по поиску, фильтрам, карточкам вакансий и отклику, смотрел,
где логика считывается не так, как задумано.
разработчиками, которые попадали в целевую аудиторию продукта. Показывал им отдельные
сценарии, задавал вопросы по поиску, фильтрам, карточкам вакансий и отклику, смотрел,
где логика считывается не так, как задумано.
Агрегатор вакансий
Это первый модуль, с которого начал выстраивать весь продукт. Именно здесь рождалась
общая логика интерфейса и закладывался UI-кит.
общая логика интерфейса и закладывался UI-кит.
Поиск работы — это всегда стресс. Пользователю приходится одновременно сравнивать
десятки ролей, зарплаты, стек технологий и надёжность компаний. Мне хотелось,
чтобы интерфейс ВАЙТИ ощущался как спокойное и чистое пространство, которое не давит
на человека. Мягкие градиенты помогли разгрузить экраны визуально, чтобы фокус оставался
на тексте и сути вакансий.
десятки ролей, зарплаты, стек технологий и надёжность компаний. Мне хотелось,
чтобы интерфейс ВАЙТИ ощущался как спокойное и чистое пространство, которое не давит
на человека. Мягкие градиенты помогли разгрузить экраны визуально, чтобы фокус оставался
на тексте и сути вакансий.
Ключевые решения
Одна вакансия в строке
Изначально я спроектировал выдачу в две колонки, так как хотелось показать как можно
больше вариантов на одном экране. Но изучив исследования и статьи о поведении
пользователей в таких интерфейсах, я отказался от этой идеи. Выяснилось, что при поиске
работы людям важнее спокойное последовательное чтение, а не плотность контента.
Две колонки создавали лишний визуальный шум там, где нужна максимальная концентрация.
больше вариантов на одном экране. Но изучив исследования и статьи о поведении
пользователей в таких интерфейсах, я отказался от этой идеи. Выяснилось, что при поиске
работы людям важнее спокойное последовательное чтение, а не плотность контента.
Две колонки создавали лишний визуальный шум там, где нужна максимальная концентрация.
Подходящие вакансии вместо фильтров
Изначально пользователю нужно было вручную настраивать фильтры. Позже мы добавили
фичу подбора вакансий по резюме: алгоритм сам предлагает релевантные варианты. Я вывел
тумблер умного подбора на первый план, а классические фильтры спрятал под кнопку.
Это разгрузило интерфейс и ускорило поиск.
фичу подбора вакансий по резюме: алгоритм сам предлагает релевантные варианты. Я вывел
тумблер умного подбора на первый план, а классические фильтры спрятал под кнопку.
Это разгрузило интерфейс и ускорило поиск.
Шорт-лист и компромисс
Бизнес хотел сделать шорт-лист единственным путём к отклику: понравилась вакансия →
сохранил её → перешёл в шорт-лист → запустил автоотклик. Этот сценарий
и так был сложным, но главное, что автоотклик работал не везде, а только при интеграции
с площадкой или через специальный плагин. Для большинства людей это стало бы тупиком.
сохранил её → перешёл в шорт-лист → запустил автоотклик. Этот сценарий
и так был сложным, но главное, что автоотклик работал не везде, а только при интеграции
с площадкой или через специальный плагин. Для большинства людей это стало бы тупиком.
Я предложил вынести кнопку отклика в источнике как основное действие. Так можно
гарантировать, что пользователь всегда сможет совершить целевое действие. Шорт-лист
вынес как дополнительный сценарий — для тех, кто хочет сначала собрать варианты и разом
откликнуться. В итоге пришли к этому решению.
гарантировать, что пользователь всегда сможет совершить целевое действие. Шорт-лист
вынес как дополнительный сценарий — для тех, кто хочет сначала собрать варианты и разом
откликнуться. В итоге пришли к этому решению.
Страница вакансии
Бизнес хотел, чтобы вся информация раскрывалась прямо в общем списке по нажатию.
Я настоял на создании отдельной страницы. Без неё выдача превратилась
бы в перегруженный хаос, в котором
пользователю было бы тяжело ориентироваться.
Я настоял на создании отдельной страницы. Без неё выдача превратилась
бы в перегруженный хаос, в котором
пользователю было бы тяжело ориентироваться.
На самой странице я разместил полное описание вакансии и выделил «Откликнуться
в источнике» как главное действие, оставив автоотклик дополнительным. Сюда же я добавил
блок с рейтингом и контактами компании. Это позволяет пользователю сразу оценить
и вакансию, и самого работодателя, не переключаясь между вкладками.
в источнике» как главное действие, оставив автоотклик дополнительным. Сюда же я добавил
блок с рейтингом и контактами компании. Это позволяет пользователю сразу оценить
и вакансию, и самого работодателя, не переключаясь между вкладками.
Swipe-режим
Спроектировал альтернативный режим просмотра, которого нет на российском рынке. Вместо
списка — карточки: свайп влево пропустить, вправо в шорт-лист.
списка — карточки: свайп влево пропустить, вправо в шорт-лист.
Карточка сразу открывается в развёрнутом виде. Внутри неё собрано только самое главное
для быстрого решения: работодатель, должность, зарплата, стек, ключевая задача и маркер
автоотклика. Полное описание можно почитать ниже по скроллу.
для быстрого решения: работодатель, должность, зарплата, стек, ключевая задача и маркер
автоотклика. Полное описание можно почитать ниже по скроллу.
Переключение между списком и карточками я сделал заметным, чтобы можно было легко
менять формат просмотра на ходу. Рядом добавил счётчик, который в реальном времени
показывает, сколько всего вакансий нашлось и осталось просмотреть по заданным фильтрам.
менять формат просмотра на ходу. Рядом добавил счётчик, который в реальном времени
показывает, сколько всего вакансий нашлось и осталось просмотреть по заданным фильтрам.
Итог
Данный раздел превратился в полноценное рабочее место соискателя. У меня получилось
собрать сложный процесс поиска в одну понятную систему, где все инструменты для работы
с вакансиями находятся в одном месте.
собрать сложный процесс поиска в одну понятную систему, где все инструменты для работы
с вакансиями находятся в одном месте.
Каталог компаний
Каталога компаний в продукте не существовало — был просто ,
сгруппированных по категориям: без описаний, поиска и какого-либо контекста. Я предложил
пересобрать этот блок и превратить его в полноценный продуктовый раздел с удобными
карточками, поиском и фильтрами.Каталога компаний в продукте
не существовало — просто ,
сгруппированных по категориям:
без описаний, поиска и какого-либо контекста.
Я предложил пересобрать этот блок,
превратить его в полноценный раздел
с поиском, фильтрами и карточками.
сгруппированных по категориям: без описаний, поиска и какого-либо контекста. Я предложил
пересобрать этот блок и превратить его в полноценный продуктовый раздел с удобными
карточками, поиском и фильтрами.Каталога компаний в продукте
не существовало — просто ,
сгруппированных по категориям:
без описаний, поиска и какого-либо контекста.
Я предложил пересобрать этот блок,
превратить его в полноценный раздел
с поиском, фильтрами и карточками.
Ключевые решения
Две колонки
В отличие от списка вакансий, здесь я намеренно использовал сетку в две колонки. Компании
ищут иначе: пользователь обычно не вчитывается в детали, а сканирует страницу в поисках
знакомых брендов или для быстрого сравнения. Две колонки ускоряют этот процесс
и при этом не перегружают экран.
ищут иначе: пользователь обычно не вчитывается в детали, а сканирует страницу в поисках
знакомых брендов или для быстрого сравнения. Две колонки ускоряют этот процесс
и при этом не перегружают экран.
Карточка компании
Внутрь карточки я вывел только самое важное для первичной оценки: сферу деятельности,
краткое описание, стек технологий и два рейтинга — общий и оценку сложности найма.
Здесь же пользователь может сразу посмотреть контакты рекрутеров или самой компании.
краткое описание, стек технологий и два рейтинга — общий и оценку сложности найма.
Здесь же пользователь может сразу посмотреть контакты рекрутеров или самой компании.
Целевой поиск и фильтры
Добавил поиск по названиям и фильтры по ключевым параметрам: технологиям, размеру
компании и направлению работы. Это превратило простой каталог в удобный инструмент
для точечного поиска работодателя.
компании и направлению работы. Это превратило простой каталог в удобный инструмент
для точечного поиска работодателя.
Отзывы
Форма сбора устроена так, чтобы пользователь мог поделиться деталями прохождения
интервью. В неё входят количество встреч, наличие тестового задания, темы обсуждений
с руководством и даже конкретные вопросы или задачи, которые задавали на собеседовании.
интервью. В неё входят количество встреч, наличие тестового задания, темы обсуждений
с руководством и даже конкретные вопросы или задачи, которые задавали на собеседовании.
Итог
Сейчас каталог закрывает базовые задачи MVP: найти компанию, изучить её поверхностно и выйти на контакты. Но я сразу спроектировал этот интерфейс так, чтобы в дальнейшем его можно было легко масштабировать и добавить полноценные страницы компаний.
Каталог компетенций
Этот раздел решает проблему неопределённости соискателя, который часто не понимает свой
реальный уровень и ожидания рынка. Здесь пользователь просто выбирает своё направление
и сразу получает полную, понятную карту требований к профессии.
реальный уровень и ожидания рынка. Здесь пользователь просто выбирает своё направление
и сразу получает полную, понятную карту требований к профессии.
Ключевые решения
Грейды
Чтобы команда могла легко наполнять этот раздел контентом, я заложил гибкую структуру
блоков. Через админ-панель можно комбинировать разные формы и форматы данных
под особенности любой IT-профессии.
блоков. Через админ-панель можно комбинировать разные формы и форматы данных
под особенности любой IT-профессии.
Зарплата
Данные скрыты — пользователь получает доступ после того как сам делится своей зарплатой.
База наполняется реальными цифрами от реальных людей.
База наполняется реальными цифрами от реальных людей.
Связанные технологии
Пользователь может изучить каждую технологию подробнее, не выходя из раздела,
что помогает быстрее разобраться в экосистеме выбранного направления.
что помогает быстрее разобраться в экосистеме выбранного направления.
База технических вопросов
Все вопросы для подготовки я собрал в одном месте и разбил по темам и грейдам.
Пользователь может отфильтровать их под свой уровень и спокойно готовиться
к техническому интервью. Больше не нужно искать списки вопросов по всему интернету, весь
процесс теперь проходит внутри платформы.
Пользователь может отфильтровать их под свой уровень и спокойно готовиться
к техническому интервью. Больше не нужно искать списки вопросов по всему интернету, весь
процесс теперь проходит внутри платформы.
Итог
Этот раздел полностью закрывает главную потребность пользователя — понять требования
рынка и определить свой уровень. На этапе MVP он работает как удобный справочник
и инструмент для самопроверки. Позже карту компетенций можно будет превратить
в персональный навигатор, который сам рекомендует темы и материалы для перехода
на следующий грейд.
рынка и определить свой уровень. На этапе MVP он работает как удобный справочник
и инструмент для самопроверки. Позже карту компетенций можно будет превратить
в персональный навигатор, который сам рекомендует темы и материалы для перехода
на следующий грейд.
Подготовка к интервью
Раздел помогает тренировать технические знания перед реальным собеседованием. На этапе
MVP реализован тренажёр, онлайн-тестирование и песочница заложены как следующие этапы
развития.
MVP реализован тренажёр, онлайн-тестирование и песочница заложены как следующие этапы
развития.
Ключевые решения
Последние сессии
Вынес историю последних тренировок на главный экран раздела. Это позволяет пользователю
мгновенно продолжить прерванное занятие или быстро повторить пройденную тему, не теряя
свой прогресс.
мгновенно продолжить прерванное занятие или быстро повторить пройденную тему, не теряя
свой прогресс.
Настройка тренажёра
Я разделил подготовку на три простых шага: выбор специализации, технологии и грейда.
Человек последовательно выбирает своё направление, нужный стек технологий и желаемый
грейд. Это позволяет убрать ощущение сложного конфигурирования.
Человек последовательно выбирает своё направление, нужный стек технологий и желаемый
грейд. Это позволяет убрать ощущение сложного конфигурирования.
Результаты
Экран с результатами я сделал так, чтобы пользователь мог сразу разобрать свои ошибки.
Система наглядно подсвечивает, где ответы были правильными, а где нет. Так тест становится
не просто оценкой, а реальной помощью.
Система наглядно подсвечивает, где ответы были правильными, а где нет. Так тест становится
не просто оценкой, а реальной помощью.
Итог
Этот раздел помогает соискателю оценить свои силы перед выходом на рынок. Пока
в продукте работает только тренажёр интервью, но интерфейс уже готов к запуску новых фич.
Главное, что сейчас у пользователя есть удобная точка старта: он может запускать новые
тренировки, отслеживать процент верных ответов и сразу видеть весь свой прогресс в одном
месте.
в продукте работает только тренажёр интервью, но интерфейс уже готов к запуску новых фич.
Главное, что сейчас у пользователя есть удобная точка старта: он может запускать новые
тренировки, отслеживать процент верных ответов и сразу видеть весь свой прогресс в одном
месте.
Сопроводительное письмо
Этот раздел убирает рутину из процесса откликов на вакансии. Главная задача интерфейса —
помочь соискателю всего за пару кликов составить текст, который идеально свяжет его опыт
с требованиями конкретной вакансии.
помочь соискателю всего за пару кликов составить текст, который идеально свяжет его опыт
с требованиями конкретной вакансии.
Ключевые решения
Универсальность источника
На этапе MVP инструмент умеет собирать данные только из каталога ВАЙТИ. Но я сразу
спроектировал логику так, чтобы система не была привязана к одному источнику.
Если пользователь нашёл вакансию на другом сайте, он может просто скопировать
её описание и вставить вручную. Это делает генератор писем полезным в абсолютно любом
сценарии.
спроектировал логику так, чтобы система не была привязана к одному источнику.
Если пользователь нашёл вакансию на другом сайте, он может просто скопировать
её описание и вставить вручную. Это делает генератор писем полезным в абсолютно любом
сценарии.
Акцент на конечном действии
Финальный экран я спроектировал так, чтобы пользователь мог сразу получить результат
своей работы. Кнопки копирования и скачивания текста находятся на самом видном месте.
Это позволяет в один клик забрать готовое письмо.
своей работы. Кнопки копирования и скачивания текста находятся на самом видном месте.
Это позволяет в один клик забрать готовое письмо.
Итог
У меня получилось запустить полезный инструмент, который сократил написание
сопроводительного письма до пары кликов. Мы обошли ограничения первой версии продукта
благодаря гибкому вводу данных. Пользователь теперь может быстро взять готовую
структуру письма и сразу адаптировать её под запросы работодателя.
сопроводительного письма до пары кликов. Мы обошли ограничения первой версии продукта
благодаря гибкому вводу данных. Пользователь теперь может быстро взять готовую
структуру письма и сразу адаптировать её под запросы работодателя.
Улучшение резюме
Раздел помогает соискателям находить ошибки в своих анкетах и исправлять их.
С его помощью можно доработать резюме так, чтобы оно успешно проходило
роботов-скринеров и нравилось реальным HR. При этом интерфейс спроектирован так,
чтобы пользователь не терял контроль над контентом и всегда сам решал, какие правки
принимать, а какие нет.
С его помощью можно доработать резюме так, чтобы оно успешно проходило
роботов-скринеров и нравилось реальным HR. При этом интерфейс спроектирован так,
чтобы пользователь не терял контроль над контентом и всегда сам решал, какие правки
принимать, а какие нет.
Ключевые решения
Контроль изменений
Я сразу отказался от идеи применять все правки по одной кнопке вслепую. Вместо
этого система наглядно раскладывает советы нейросети по полочкам: отдельно проверяет
структуру, отдельно — достижения и совместимость с фильтрами ATS. Каждая подсказка
показывает текст в формате до и после. Так пользователь может сам решать, какие
формулировки ему подходят, а какие стоит оставить без изменений.
этого система наглядно раскладывает советы нейросети по полочкам: отдельно проверяет
структуру, отдельно — достижения и совместимость с фильтрами ATS. Каждая подсказка
показывает текст в формате до и после. Так пользователь может сам решать, какие
формулировки ему подходят, а какие стоит оставить без изменений.
Редактирование в моменте
Чтобы пользователю не приходилось скачивать документ и править что-то вручную, я добавил
редактор прямо в карточку с подсказкой. Если предложенный нейросетью вариант кажется
не совсем точным, его можно быстро подправить руками перед тем, как окончательно принять
изменения.
редактор прямо в карточку с подсказкой. Если предложенный нейросетью вариант кажется
не совсем точным, его можно быстро подправить руками перед тем, как окончательно принять
изменения.
Sticky-панель
Подсказок и правок в резюме может быть очень много. Чтобы пользователь
не запутался и не потерял свои изменения во время скролла, я добавил плавающую панель внизу экрана.
Она всегда остаётся на виду. В ней человек видит точное количество выбранных улучшений
и может применить их все разом в один клик.
не запутался и не потерял свои изменения во время скролла, я добавил плавающую панель внизу экрана.
Она всегда остаётся на виду. В ней человек видит точное количество выбранных улучшений
и может применить их все разом в один клик.
Шаблон, одобренный рекрутером
Окно предпросмотра показывает готовый PDF-документ. Сам шаблон резюме проектировался
не просто ради визуальной эстетики — я согласовывал его структуру с действующим
рекрутером. Это гарантирует, что итоговый файл генерируется ровно в том виде, в котором
его хотят видеть работодатели. Из этого же окна резюме можно скачать или в один клик
сохранить в профиль платформы.
не просто ради визуальной эстетики — я согласовывал его структуру с действующим
рекрутером. Это гарантирует, что итоговый файл генерируется ровно в том виде, в котором
его хотят видеть работодатели. Из этого же окна резюме можно скачать или в один клик
сохранить в профиль платформы.
Итог
Этот раздел превратил работу с нейросетью из слепой генерации в удобное совместное
редактирование. У меня получилось создать инструмент, который аккуратно подсвечивает
пользователю его точки роста, но оставляет за ним последнее слово. На выходе соискатель
получает профессионально структурированный документ, готовый к отправке работодателям.
редактирование. У меня получилось создать инструмент, который аккуратно подсвечивает
пользователю его точки роста, но оставляет за ним последнее слово. На выходе соискатель
получает профессионально структурированный документ, готовый к отправке работодателям.
UI Kit
Дизайн-система проекта строилась с акцентом на скорость разработки и лёгкость поддержки.
Я не просто собрал библиотеку компонентов, а адаптировал её под реальные нужды
фронтенд-разработки, чтобы исключить недопонимания на этапе вёрстки.
Я не просто собрал библиотеку компонентов, а адаптировал её под реальные нужды
фронтенд-разработки, чтобы исключить недопонимания на этапе вёрстки.
Базовые стили и состояния
Я сразу зафиксировал все правила: от фирменных градиентов до отступов и шрифтов.
Каждому элементу я отрисовал понятную сетку состояний. Разработчику не приходилось
гадать, как выглядит кнопка при наведении или когда она заблокирована — все эти сценарии
были готовы заранее, что застраховало интерфейс от визуального мусора.
Каждому элементу я отрисовал понятную сетку состояний. Разработчику не приходилось
гадать, как выглядит кнопка при наведении или когда она заблокирована — все эти сценарии
были готовы заранее, что застраховало интерфейс от визуального мусора.
Компоненты «на вырост»
Все элементы в Фигме я организовал так, чтобы продукт можно было легко развивать дальше.
Когда в будущем команда решит добавить новые разделы, им не придётся перерисовывать
базовые паттерны. Дизайн сохранит единообразие, а новые экраны будут собираться
из уже готовых кубиков.
Когда в будущем команда решит добавить новые разделы, им не придётся перерисовывать
базовые паттерны. Дизайн сохранит единообразие, а новые экраны будут собираться
из уже готовых кубиков.
Итог
Мне удалось превратить общую идею в понятную структуру и интерфейсы, сохранив баланс
между целями бизнеса и пользой для кандидатов. Я создал логику и правила, по которым
продукт сможет развиваться дальше.
между целями бизнеса и пользой для кандидатов. Я создал логику и правила, по которым
продукт сможет развиваться дальше.
Сейчас проект находится в разработке. Я полностью подготовил и передал команде все
наработки — от сценариев до адаптивного UI Kit, создав надежный фундамент для быстрой
сборки.
наработки — от сценариев до адаптивного UI Kit, создав надежный фундамент для быстрой
сборки.
