КЕЙС
Hunter
Одностраничный сайт для HR-агентства. В кейсе: о фишках, которые придумывались уже на этапе прототипа, о яркой визуальной концепции и попадании в ТОП сайтов Tilda.
навигация по кейсу
Задача
Упаковать услуги агентства в одностраничный сайт для тестирования гипотезы спроса на услуги.
Ключевые запросы
- Понятная и простая структура
- Сторителлинг на сайте
- Светлый дизайн на основе желтых и серых элементов фирменного стиля
- Сконцентироваться на подборе миддл- и топ-вакансий: соответственно в дизайне отразить миддл-премиум позиционирование.
Так выглядит лого Hunter и его существующая цветовая палитра
Этап 1. Анализ
Начинаем разработку с анализа сайтов конкурентов: чтобы понять, на что делают акцент конкуренты и подсмотреть лучшие практики.
По итогам анализа я всегда делаю выводы в формате рекомендаций, которые можно внедрить на сайт. Вот некоторые из них:
- Кейсы в формате «Задача — Решение — Результат». Внутри кейсов можно описывать обстоятельства, особенности поиска данного кандидата или требования к кандидату, чтобы лучше понять задачу и/или решение.
- Заголовок на первом экране должен не только отражать позиционирование, но и давать понять человеку, чем занимается компания. Например: «Ищем С-level кандидатов для вашего бизнеса».
- Делаем блок «Когда нужны наши услуги». Тут показываем сценарии, при которых люди обращаются в эйчар-агентства.
Так по итогу этапа выглядела структура страницы. Картинка кликабельна.
Результат этапа анализа
- Выводы в формате рекомендаций: какие лучшие практики были у конкурентов, которыми мы можем вдохновиться
- Структура сайта
Этап 2. Прототип
На основании структуры сайта я составляю черно-белый драфт сайта, так называемый прототип.
На нем я размещаю информацию в том порядке, в котором она будет идти на сайте и размещаю примерные тексты — их в последствии финализирует копирайтер.
На нем я размещаю информацию в том порядке, в котором она будет идти на сайте и размещаю примерные тексты — их в последствии финализирует копирайтер.
Так выглядит полный прототип сайта
Это не финальный дизайн сайта, а возможность оценить логику экранов и выстроить понятный сторителлинг на сайте для достижения ключевого действия: заявки на подбор персонала по той или иной услуге.
На этом этапе я продумала логику того, как разместить на одной странице 4 услуги: я убрала их в раскрывающиеся по нажатию кнопки.
Это было сделано специально для того, чтобы не ошеломить пользователя длиной описания и в целом длиной сайта — а подать информацию интерактивно. Кликнув для «добычи информации», у человека уже больше мотивации прочитать.
На этом этапе я продумала логику того, как разместить на одной странице 4 услуги: я убрала их в раскрывающиеся по нажатию кнопки.
Это было сделано специально для того, чтобы не ошеломить пользователя длиной описания и в целом длиной сайта — а подать информацию интерактивно. Кликнув для «добычи информации», у человека уже больше мотивации прочитать.
Вот так на прототипе выглядело переключение вкладок и появление доп. информации об услуге. Тут же сразу продумала как прозрачно показать стоимость вакансии и просчитать финальный результат: внедрила калькулятор стоимости вакансии
Придумала закрывать возражения клиентов не просто скучным «Вопрос-ответ», а блоком с «Мифами об HR», который выполнен в виде переворачивающихся карточек
В конце страницы обязательно оставляем призыв к действию
Результат этапа прототипа
- Продуманная логика страниц и скелет для дальнейшего дизайна
- Четкое ТЗ для копирайтера в виде ч/б ПДФ-ок: он сразу понимает контекст, где будет стоять текст и примерный объем. Это облегчает ему работу.
Этап 3. Визуальное направление
Пока копирайтер пишет тексты на сайт, я занимаюсь визуальным вдохновением для сайта: собираю мудборд, подбираю сайты-референсы и описываю креативную концепцию.
Практически каждый мой сайт сделан в рамках той или иной креативной концепции: у нее есть название, обоснование и конкретные визуальные приемы, которые мы будем использовать.
Посмотрите пример презентации, которую я составляла для Hunter:
Практически каждый мой сайт сделан в рамках той или иной креативной концепции: у нее есть название, обоснование и конкретные визуальные приемы, которые мы будем использовать.
Посмотрите пример презентации, которую я составляла для Hunter:
На этом же этапе я подобрала сайты-референсы и выписала, что конкретно из визуальных приемов мы можем забрать себе.
Результат этапа визуального направления
- Креативная концепция сайта «Путеводная звезда», которая выражается в определенных визуальных приемах: именно их я буду использовать для разработки дизайн-концепций для сайта
- Обоюдное понимание того, что красиво и что работает на нашу задачу: как у меня, так и у клиента. Этот этап снимает вариант неожиданности при показе дизайн-концепций, поскольку визуальное направление мы уже согласовали и я ему следую.
Этап 4. Дизайн-концепции
Я предоставила на выбор 2 дизайн-концепции: я их делаю на примере первых двух блоков сайта.
Концепции показываю сразу в десктопной и мобильной версии, чтобы понимать, как будет масштабироваться дизайн.
По итогу обсуждения концепций, мы пришли к решению, что нам нужно в них доработать:
- На этапе визуального вдохновения клиенту понравились темные сайты, но сейчас он понимает, что больше хочет сделать акцент на светлом оформлении
- Убрать фигуры из блюра, хочется, чтобы акцент был чистым и четким.
Ниже есть ссылки на видео-презентации этих концепций, предлагаю посмотреть :)
Для презентации концепций, я записала видео, где объяснила свои решения
Каждый этап своей работы я презентую либо на совместном звонке с клиентом либо записанным видео.
Так я могу подробно рассказать о своих идеях и подчеркнуть то, на что стоит обратить внимание. Средняя длина таких видео: 10−20 минут. Если смотреть на х2, то будет еще быстрее :)
Смотреть пример презентации для Hunter:
Первая итерация
Вторая итерация
Так я могу подробно рассказать о своих идеях и подчеркнуть то, на что стоит обратить внимание. Средняя длина таких видео: 10−20 минут. Если смотреть на х2, то будет еще быстрее :)
Смотреть пример презентации для Hunter:
Первая итерация
Вторая итерация
В итоге, мы остановились на этой дизайн-концепции:
Здесь мы только заменили цвет линий «компаса», сделав его в серых, а не желтых тонах
Результат этапа дизайн-концепции
- Креативная концепция, облаченная в дизайн, и задающая визуальный код для всего сайта.
Этап 5. Дизайн всего сайта
Пока я утверждала дизайн-концепцию, копирайтер написал и утвердил текст для сайта — я могу приступить к к отрисовке всей страницы.
Результат этапа дизайна
- Макеты сайта в десктопной, планшетной и мобильной версиях, отрисованные во всех состояниях и готовые к верстке.
Этап 6. Верстка на Tilda
Сайт верстался на Тильде, для того, чтобы упростить работу по взаимодействию с сайтом.
Я использовала как уникальный дизайн, так и стандартные блоки Тильды и стилизовала их с помощью CSS.
Я использовала как уникальный дизайн, так и стандартные блоки Тильды и стилизовала их с помощью CSS.
Одни из моих любимых блоков: это сферы и вакансии, и мифы об HR.
Для первого блока я специально фиксирую экран, чтобы сферы и вакансии проплывали мимо.
Для первого блока я специально фиксирую экран, чтобы сферы и вакансии проплывали мимо.
А во втором — можно вдоволь «поиграться» наведением на карточки, которые имеют красивую анимацию переворота.
Подобные приемы делают сайты менее скучными и позволяют проводить больше времени на сайте.
Подобные приемы делают сайты менее скучными и позволяют проводить больше времени на сайте.
Результат этапа верстки
- Готовый сайт, которым можно пользоваться.
Сайт попал в галерею лучших сайтов, сделанных на платформе Tilda
Проект лежит в галерее по ссылке
Если хотите получить такой же классный результат — оставьте заявку на бесплатную консультацию
Мы созвонимся на 30+ минут, обсудим вашу задачу, а я подготовлю предложение по цене и срокам, рассчитанное индивидуально под вас.
Сообщение об успешной отправке!