РОСТЕЛеКОМ
учебный проект
Компания-заказчик
Цель проекта
боли клиентов
что было сделано при создании проекта
КТО?
ЧТО?
ПОЧЕМУ?
КАК?
РОСТЕЛЕКОМ
Разработка макета информационного лендинга
по поиску IT-специалистов в команду
по поиску IT-специалистов в команду
Компании необходимо пополнить штат талантливых молодых IT-сотрудников,
а также освежить общий образ компании в глазах потенциальных работников в целом
а также освежить общий образ компании в глазах потенциальных работников в целом
О компании
«Ростелеком» является лидером рынка телекоммуникационных услуг для:
- частных клиентов;
- органов государственной власти России;
- корпоративных пользователей всех уровней.
Также является технологическим лидером
в инновационных решениях в областях:
- электронного правительства;
- кибербезопасности;
- дата-центров и облачных вычислений;
- биометрии;
- здравоохранения;
- образования;
- жилищно-коммунальных услуг
- частных клиентов;
- органов государственной власти России;
- корпоративных пользователей всех уровней.
Также является технологическим лидером
в инновационных решениях в областях:
- электронного правительства;
- кибербезопасности;
- дата-центров и облачных вычислений;
- биометрии;
- здравоохранения;
- образования;
- жилищно-коммунальных услуг
Цель данного проекта — создать дизайн-концепцию информационного лендинга для привлечения молодых IT-сотрудников, который позволит:
- Ознакомиться со списком вакансий компании
- Отправить своё резюме для дальнейшего сотрудничества
- Создать в глазах потенциальных сотрудников новый образ компании — трендовый, свежий, современный, но при этом надёжный и узнаваемый
- Ознакомиться со списком вакансий компании
- Отправить своё резюме для дальнейшего сотрудничества
- Создать в глазах потенциальных сотрудников новый образ компании — трендовый, свежий, современный, но при этом надёжный и узнаваемый
Проблемы
1
Стереотипный
образ компании
образ компании
Молодым специалистам компания кажется
не современной, а лишь поставщиком
ТВ и интернет услуг
не современной, а лишь поставщиком
ТВ и интернет услуг
2
Зарплата ниже
чем в банках
чем в банках
Заработная плата IT-специалистов
в данной сфере ниже, в сравнении
с аналогичными должностями в банках
в данной сфере ниже, в сравнении
с аналогичными должностями в банках
3
Ассоциации
с «телеком»
с «телеком»
«Ростелеком» — крупный IT-кластер,
но это не так широко известно, ассоциируется
с ТВ и услугами интернет
но это не так широко известно, ассоциируется
с ТВ и услугами интернет
— Какие основные задачи данного проекта?
— Необходимо сделать сайт «Ростелеком» ярким и привлекательным, современным. Рассказать о преимуществах работы, акцентируя внимание
не на материальной составляющей, а на корпоративном духе, возможностях карьерного роста и совершенствования. Познакомить пользователей
с принципами работы компании, а также инновационными продуктами.
не на материальной составляющей, а на корпоративном духе, возможностях карьерного роста и совершенствования. Познакомить пользователей
с принципами работы компании, а также инновационными продуктами.
— Какие существуют ограничения по проекту?
— Сайт должен быть выдержан в дизайн-системе «Ростелеком»
и стилистике бренд-бука. Необходимо также сохранить tone-of-voice
HR направления компании.
и стилистике бренд-бука. Необходимо также сохранить tone-of-voice
HR направления компании.
ЭТАП 1
исследование
Для того, чтобы определиться, как выстраивать логику повествования в лендинге, а также понять, как привлечь внимание и заложить фундамент высокой конверсии сайта, необходимо изучить целевую аудиторию данного проекта.
Целевая аудитория
Согласно брифу заказчика, это люди молодые люди 20-25 лет, живущие в России, творческие, увлеченные своим делом, с желанием иметь доход от 150 до 400 тыс. рублей в месяц, что является средним для IT-сферы.
Для того, чтобы при создании концепции использовать метод персон и правильно построить гипотезы, я провела около 30 небольших интервью со студентами и выпускниками IT-направлений двух крупных ВУЗов Екатеринбурга: УрФу и УрТИСИ СибГУТИ.
Основными вопросами были следующие:
- Какими сервисами вы пользуетесь для поиска работы/стажировки?
- Что для вас является работой мечты?
- С какими проблемами вы сталкиваетесь при поиске работы в сфере IT?
- Какие важные критерии вы выделяете для себя при выборе потенциального работодателя?
- Какими сервисами вы пользуетесь для поиска работы/стажировки?
- Что для вас является работой мечты?
- С какими проблемами вы сталкиваетесь при поиске работы в сфере IT?
- Какие важные критерии вы выделяете для себя при выборе потенциального работодателя?
персоны
Целевой аудитории важно:
Финансовая сторона
Уровень заработной платы
в вакансиях должен быть четко прописан без большого интервала
в вакансиях должен быть четко прописан без большого интервала
Масштаб компании
Необходима информация
о масштабах компании
и ее деятельности, это внушает доверие к ней
о масштабах компании
и ее деятельности, это внушает доверие к ней
Дальнейшие возможности
Информация о карьерном росте
и возможностях дальнейшего обучения, как профессионального, так и личного
и возможностях дальнейшего обучения, как профессионального, так и личного
Культура менеджмента
Информация о культуре управления, а также корпоративных мероприятиях
Корпоративный дух
Акцент на сильном корпоративном духе и наличии не только коллектива, но и крепкой команды
Условия работы
Информация о возможности удаленной и гибридной работы
бенчмаркинг
В брифе были указаны основные конкуренты компании «Ростелеком», поскольку это несколько разнонаправленные корпорации, был проведен анализ HR-сайтов конкурентов по структуре блоков.
В процессе исследования было выявлено, что достаточно мало компаний имеют именно лендинг
с вакансиями, в основном, это либо часть корпоративного сайта, либо небольшой сайт, где каждый блок представляет собой отдельную страницу (вакансия, стажировки, о компании и т.д.), а главная страница максимально креативно проработана, чтобы привлечь внимание пользователя (хороший пример этого — сайты Билайн, МТС и Мегафон).
с вакансиями, в основном, это либо часть корпоративного сайта, либо небольшой сайт, где каждый блок представляет собой отдельную страницу (вакансия, стажировки, о компании и т.д.), а главная страница максимально креативно проработана, чтобы привлечь внимание пользователя (хороший пример этого — сайты Билайн, МТС и Мегафон).
С одной стороны, это вдохновляюще для молодой аудитории, но с другой — поиск именно вакансий и понимание, как в данной структуре на них просто и понятно выйти, усложняет путь пользователя, а это негативно влияет на конечную конверсию.
- IT-кластеры крупных банков
- Российские IT-компании
Основными конкурентами «Ростелеком» являются:
- Телеком-операторы большой тройки
анализ трендов
«Возможности удивляют»
«Ростелеком. Территория возможностей»
moodboard
выводы по исследованию
Основная ЦА
Основная целевая аудитория — IT-специалисты 20-25 лет, которые привыкли к быстрому считыванию информации,
потому лендинг должен быть лаконичным, визуально привлекательным и понятным
потому лендинг должен быть лаконичным, визуально привлекательным и понятным
Цветовое решение
Лендинг будет светлым, с яркими оттенками фирменных цветов «Ростелеком», согласно бренд-бука и дизайн-системы,
и акцентами на крупную типографику и иконки
и акцентами на крупную типографику и иконки
Первый экран
На первом экране будет 2 кнопки CTA — с переходом на список вакансий, а также на форму обратной связи («Вакансии»и «Отправить резюме»). Это очень хорошо сработает для тех, кто целенаправленно ищет любую работу, например студентов, которые хотят на стажировку, они сразу увидят возможность отправить свои данные без привязки к какой-либо должности.
Spotify очень интересно обыграл актуальные вакансии, эта идея вдохновила на создание чего-то подобного, но только в стиле мессенджера, похожего на ВК — с названием вакансии, иконкой проекта и небольшими хэштегами-компетенциями, чтобы сразу же было понятно, что от человека будет требоваться, поскольку сейчас существует достаточно много профессий
с одинаковыми названиями, но каждой компании необходим свой набор hard-skills для определенной работы
Spotify очень интересно обыграл актуальные вакансии, эта идея вдохновила на создание чего-то подобного, но только в стиле мессенджера, похожего на ВК — с названием вакансии, иконкой проекта и небольшими хэштегами-компетенциями, чтобы сразу же было понятно, что от человека будет требоваться, поскольку сейчас существует достаточно много профессий
с одинаковыми названиями, но каждой компании необходим свой набор hard-skills для определенной работы
О компании
В брифе заказчик описал этот блок хорошим названием «Почему мы?». Хочется оставить его именно с таким названием, практически нигде не встречался такой подход к описанию деятельности компании, оно дружелюбное, но при этом немного азартное, как раз пробуждающее любопытство и интерес.
О компании будет рассказано во внушительных цифрах, которые дадут понять о масштабности проектов
О компании будет рассказано во внушительных цифрах, которые дадут понять о масштабности проектов
О проектах
О проектах будет рассказано на небольших блоках слайдерах с логотипами этих проектов; блок о том, как работает компания, будет на карточках с иконками — эта информация будет сжатой и лаконичной, при этом дающей понять, что никакой бюрократии в компании нет
Условия работы
В блок об условиях работы будет совмещаться блок с фото офиса, работников и текстовые карточки, рассказывающие
о возможностях для сотрудников
о возможностях для сотрудников
Вакансии
Открытые вакансии будут оформлены по типу ВК - название, иконка продукта, основные компетенции, но раскрывать
в формате Glowbyte через плюсик, чтобы не было нужды переходить на новую вкладку, поскольку сайт будет просматриваться чаще через мобильные устройства
в формате Glowbyte через плюсик, чтобы не было нужды переходить на новую вкладку, поскольку сайт будет просматриваться чаще через мобильные устройства
Форма обратной связи
Форма обратной связи будет содержать основные пункты — ФИО, город, почта, номер телефона, а также возможность добавить сопроводительное письмо в поле для свободного ответа, поле для загрузки резюме, а также возможность добавить на него ссылку
ЭТАП 2
wireframes
Поскольку основная ЦА достаточно молодая
и прогрессивная, вероятность того, что они будут просматривать сайт с мобильных устройств намного выше, чем вероятность просмотра с компьютера, поэтому изначально я создала прототип для телефона.
и прогрессивная, вероятность того, что они будут просматривать сайт с мобильных устройств намного выше, чем вероятность просмотра с компьютера, поэтому изначально я создала прототип для телефона.
Первый экран будет максимально четко и быстро отражать цель всего сайта — человек пришел в поисках работы и он может сразу же перейти к выполнению этой задачи.
Окошки с коротеньким описанием вакансий дадут человеку сразу сориентироваться, какие типы вакансий он сможет здесь найти. А также это сокращает путь пользователя — ему может сразу же попасться вакансия, которая его заинтересует.
Рассказать о компании я решила на двух экранах, потому что один оповещает пользователя, что компания крупная, занимается IT-проектами, а не только дает ТВ и интернет
в дом. Это решает одну из проблем, поставленных перед данным проектом.
в дом. Это решает одну из проблем, поставленных перед данным проектом.
Второй экран уже подробнее знакомит с основной деятельностью компании, а карточный дизайн позволяет удобно и быстро считывать информацию.
Знакомить с проектами «Ростелеком» также буду
с помощью карточек — будет содержать логотип направления или программного продукта и небольшое описание, чтобы пользователь представлял, о чем это. Кроме того, его может заинтересовать данный продукт, захочет начать пользоваться — для этого я добавила кнопку «Подробнее», которая будет вести на основной сайт проекта.
с помощью карточек — будет содержать логотип направления или программного продукта и небольшое описание, чтобы пользователь представлял, о чем это. Кроме того, его может заинтересовать данный продукт, захочет начать пользоваться — для этого я добавила кнопку «Подробнее», которая будет вести на основной сайт проекта.
Для целевой аудитории важно понимать, как происходят процессы управления у потенциального работодателя, поэтому блок про это я сделала максимально информативным. Основные ценности очень удобно раскрывают свое описание по «тапу» на плюсик, а при желании можно перейти по ссылке и узнать подробнее
о данной системе.
о данной системе.
А благодаря тому, что основная информация скрыта, макет остается достаточно легким и не перегруженным,
с приятными акцентами на заголовках КАРМА.
с приятными акцентами на заголовках КАРМА.
Этот блок отражает условия работы в компании — рассказывать о том, как ценны люди и атмосфера в офисе, а фотографии покажут, как здорово и современно устроена штаб-квартира «Ростелеком» внутри, при этом фотографии можно пролистывать влево и вправо,
что экономит место и не отвлекает пользователя.
что экономит место и не отвлекает пользователя.
Возможности обучения для наглядности я разложила
на карточки и хэштеги — это хорошо структурирует информацию и позволяет управлять вниманием пользователя, а также привлечет внимание
к направлениям обучения.
на карточки и хэштеги — это хорошо структурирует информацию и позволяет управлять вниманием пользователя, а также привлечет внимание
к направлениям обучения.
У «Ростелекома» достаточно много интересных дополнительных поощрений, поэтому их также
я спрятала в тематических карточках, чтобы
не перегружать текстом интерфейс. При желании можно нажать на каждый и изучить интересующий раздел.
я спрятала в тематических карточках, чтобы
не перегружать текстом интерфейс. При желании можно нажать на каждый и изучить интересующий раздел.
Изначально планировалось сделать каждую вакансию открывающейся через плюсик, но я отошла от этой идеи — описание каждой вакансии довольно объемное и это сильно бы утяжелило интерфейс. Вакансия будет открываться по «тапу» всплывающим окошком.
Форма для отправки резюме содержит в себе основные блоки, необходимые для связи с человеком и понимания, что ему можно предложить. Требования к этому блоку были прописаны заказчиком в брифе.
Также эти экраном удовлетворена потребность
в очевидности материального вознаграждения — сумма заработной платы прописывается сразу же в вакансии,
не нужно ничего открывать и листать, что улучшает опыт пользователя.
в очевидности материального вознаграждения — сумма заработной платы прописывается сразу же в вакансии,
не нужно ничего открывать и листать, что улучшает опыт пользователя.
Также здесь рассказывается о возможностях удаленной работы, что было важно нашей целевой аудитории.
Прототип для десктопа содержит такое же количество информации,
как и мобильная версия, все блоки оформлены по такой же логике, но с учетом возможностей большого экрана.
как и мобильная версия, все блоки оформлены по такой же логике, но с учетом возможностей большого экрана.
ЭТАП 3
ui-KIT
Работа велась в условиях дизайн-системы «Ростелеком», поэтому цветовое решение,кнопки, типографика и иконки соответствуют ее требованиям. Дополнительно было создано оформление карточек
ЭТАП 4
ДИЗАЙН-макет
В процессе создания готового дизайн-макета прототип претерпел некоторые изменения:
- Вместо стрелочек в блоке «Наши проекты» добавлен слайдер
из дизайн-системы компании, он удобен для пролистывания на всех видах устройств, а также сразу же отображает количество элементов,
что позволяет пользователю понять, сколько времени он потратит
на просмотр всех
из дизайн-системы компании, он удобен для пролистывания на всех видах устройств, а также сразу же отображает количество элементов,
что позволяет пользователю понять, сколько времени он потратит
на просмотр всех
- В блоке «Открытые вакансии» добавлено название фирм рядом с иконкой логотипа, поскольку не все пользователи знакомы с фирменными стилями этих компаний
