Редизайн сайта для агентства AdSkill
Корпоративный сайт для международного рекламного агентства. Новый дизайн и структура, редизайн блога и лендингов для мероприятий.
Ключевые результаты:
- Рост обращений через сайт на 25%
- Сокращение времени запуска новых страниц (в отдельных случаях до 2−4 раз)
- Сокращение времени верстки статей в блог на 75%
- Увеличение вовлечённости (времени на сайте) на 28%
- Увеличение количества разделов с 4 до 20 за счёт полноценной структуры
- Техподдержка сайта в объеме 300+ страниц
1. О задаче и компании
AdSkill — международное агентство по оптимизации и запуску рекламных кампаний. На рынке более 10 лет. Среди клиентов Skyeng, Skillbox, Синергия, Inspiritum.
В последние 4 года компания начала активно масштабироваться. Старый сайт был разработан на старте роста компании и не передавал суть и ценность ключевых услуг.
Новый сайт должен был стать эффективным инструментом для масштабирования: понятным, убедительным и функциональным для клиентов и партнёров, а также отражать обновлённое позиционирование компании.
В последние 4 года компания начала активно масштабироваться. Старый сайт был разработан на старте роста компании и не передавал суть и ценность ключевых услуг.
Новый сайт должен был стать эффективным инструментом для масштабирования: понятным, убедительным и функциональным для клиентов и партнёров, а также отражать обновлённое позиционирование компании.
2. Проблемы старого сайта
При проведении аудита старого сайта стало понятно, что с момента его создания компания выросла, и в ней изменились процессы и услуги: сайт лишь верхнеуровнево обозначал виды услуг компании не отражал актуальный порядок работы.
Формой заявки пользовались только теплые клиенты, т.к. холодные через сайт не могли получить представление о ключевых услугах. Стилистика сайта не актуальна, не позволяла прочувствовать характер бренда и сформировать доверительный образ компании высокого уровня.
В связи с этим — низкие конверсия и доверие среди новых клиентов, при том что у компании высокий уровень сервиса и качества услуг.
Дизайн старого сайта:
Формой заявки пользовались только теплые клиенты, т.к. холодные через сайт не могли получить представление о ключевых услугах. Стилистика сайта не актуальна, не позволяла прочувствовать характер бренда и сформировать доверительный образ компании высокого уровня.
В связи с этим — низкие конверсия и доверие среди новых клиентов, при том что у компании высокий уровень сервиса и качества услуг.
Дизайн старого сайта:
3. Какие задачи я выполнила в рамках проекта
- Анализ деятельности компании и ЦА;
- Интервью с руководителями направлений и линейными сотрудниками;
- Анализ конкурентных UX-решений;
- Разработка новой расширенной структуры;
- Создание ключевой дизайн-идеи на основе позиционирования;
- Создание дизайн-концепций, отражающих характер компании;
- Создание иллюстраций для сайта (совместно с 3D дизайнером);
- Разработка дизайн-макетов;
- Формирование UI Kit’а по проекту;
- Адаптивная верстка проекта и релиз сайта.
4. Интервью и исследования
4.1 Интервью
Чтобы лучше понять, какие цели и задачи, помимо актуальности и удобства для клиентов, должен решать сайт мы с командой «Brand & Marketing» проводили интервью с руководителями направлений и организовывали брейнштормы внутри команды.
Чтобы лучше понять, какие цели и задачи, помимо актуальности и удобства для клиентов, должен решать сайт мы с командой «Brand & Marketing» проводили интервью с руководителями направлений и организовывали брейнштормы внутри команды.
Вывели перечень самых важных запросов.
Из них 4 ключевых:
Из них 4 ключевых:
4.2 Исследования
4.3 Проектный трекинг
По этой задаче я выступала не только как дизайнер, но и как менеджер проекта. Поэтому организовала работу в таск-менеджере и создала проектный трекер Google Sheets.
Из важного:
По этой задаче я выступала не только как дизайнер, но и как менеджер проекта. Поэтому организовала работу в таск-менеджере и создала проектный трекер Google Sheets.
Из важного:
- В трекере организовала хранение всех материалов по сайту от других отделов компании: сотрудники всех отделов подготавливали необходимые материалы, после чего передавали в наш отдел, где все материалы хранятся в одном месте.
- Применила диаграмму Ганта для планирования этапов по проекту с прозрачным отслеживанием сроков и статусов.
- Создала удобный воркспейс для работы над текстами.
5. Структура, протототипы и тексты
На основе проведенного анализа и исследований я разработала понятную и удобную структуру сайта, которая охватывала все направления роста компании.
Проработка структуры сайта велась параллельно с финализацией позиционирования компании, поэтому я участвовала в брейнштормах, где дополнительно интервьюировала участников руководящего состава, чтобы мы с копирайтером могли лучше отразить их видение в структуре и текстах.
6. Проработка стилистики сайта
При разработке дизайн-концепций я опиралась на позиционирование компании, ее фирменный стиль и брендбук.
В первую очередь из позиционирования выделила чувства и эмоции, которые должен вызывать дизайн сайта.
Ключевыми были выбраны:
В первую очередь из позиционирования выделила чувства и эмоции, которые должен вызывать дизайн сайта.
Ключевыми были выбраны:
- Глобальность;
- Технологичность;
- Платформенность;
- Человечность;
- Экспертность.
Дальше подобрала возможные визуальные проявления этих эмоций и разработала мудборд.
6.1 Мудборд и «Слои»
Ранее у компании уже был сформирован фирменный стиль компании, миссия и ценности, и зафиксировано в рамках брейнштормов общее видение стилистики.
Поэтому при подготовке мудборда я поделила презентацию на «Слои»:
Ранее у компании уже был сформирован фирменный стиль компании, миссия и ценности, и зафиксировано в рамках брейнштормов общее видение стилистики.
Поэтому при подготовке мудборда я поделила презентацию на «Слои»:
- Слой «Цветовые концепции»: вариации того насколько сильно мы должны придерживаться фирменных цветов, можем ли вводить новые цвета. Если да, то где и какие.
- Слой «Карточки и микроблоки»: важно было отразить платформенность, поэтому над дизайном интерфейс-элементов думала особенно тщательно.
- Слой «Главные экраны и 3D-графика»: 3D, как и интерфейсный стиль, стали основой дизайна. Ранее уже была продумана графика для медианосителей, но для сайта я хотела создать более имиджевую минималистичную графику, поэтому перебирала разные формы и текстуры.
6.2 3D-иллюстрации
Для создания иллюстраций был привлечен 3D-дизайнер.
Перед тем как выставить ему ТЗ провели с бренд-дизайнером несколько брейнштормов, где рассматривали различные виды 3D-графики с точки зрения 5-ти параметров:
По результатам обсуждений определились с итоговыми параметрами, подготовили ТЗ для 3D-дизайнера, курировали его работу.
Для создания иллюстраций был привлечен 3D-дизайнер.
Перед тем как выставить ему ТЗ провели с бренд-дизайнером несколько брейнштормов, где рассматривали различные виды 3D-графики с точки зрения 5-ти параметров:
- Композиция для главного экрана сайта;
- Материал элемента;
- Работа с фоном;
- Визуализация при статичном использовании;
- Возможные варианты анимации.
По результатам обсуждений определились с итоговыми параметрами, подготовили ТЗ для 3D-дизайнера, курировали его работу.
7. Итоговый дизайн и верстка
На дальнейших этапах я работала в команде с разработчиком, копирайтером и SEO-специалистом.
Выставляла ТЗ для копирайтера, разработчика, проводила авторский надзор верстки созданного дизайна, координировала взаимодействие c SEO-специалистом.
Как итог был разработан сайт, функционально удобный для пользователя, при этом стилистически отражающий характер бренда компании.
Выставляла ТЗ для копирайтера, разработчика, проводила авторский надзор верстки созданного дизайна, координировала взаимодействие c SEO-специалистом.
Как итог был разработан сайт, функционально удобный для пользователя, при этом стилистически отражающий характер бренда компании.
8. О важных решениях
8.1 «AdTech innovation with a human face»
Долгое время члены команды AdSkill были скрыты за корпоративными юзерпиками и живые лица сотрудников не фигурировали ни на сайте, ни в социальных сетях. Мы решили это исправить и познакомить клиентов с жизнью агентства и нашими сотрудниками в целом, чтобы усилить связь между агентством и клиентами и повысить уровень доверия.
Для этого на сайте я разместила видео: промо-ролик о работе агентства на выездной конферении и ролик о закулисье работы в AdSkill — так клиенты смогут прочувствовать дружелюбие и коммуникабельность членов агентства, а затем увидеть слаженность процесса при оказании услуги.
Долгое время члены команды AdSkill были скрыты за корпоративными юзерпиками и живые лица сотрудников не фигурировали ни на сайте, ни в социальных сетях. Мы решили это исправить и познакомить клиентов с жизнью агентства и нашими сотрудниками в целом, чтобы усилить связь между агентством и клиентами и повысить уровень доверия.
Для этого на сайте я разместила видео: промо-ролик о работе агентства на выездной конферении и ролик о закулисье работы в AdSkill — так клиенты смогут прочувствовать дружелюбие и коммуникабельность членов агентства, а затем увидеть слаженность процесса при оказании услуги.
Помимо этого добавила на сайт юзерпики и фото команды. Причем не только сотрудников, но и клиентов — в разделе «Отзывы» разместила фото и видео с фидбеком клиентов.
Также вместе с контент-отделом мы запустили на сайте раздел «Новости», чтобы делиться важными событиями из жизни агентства.
Также вместе с контент-отделом мы запустили на сайте раздел «Новости», чтобы делиться важными событиями из жизни агентства.
8.2 Редизайн Академии
Изначально Академия (блог) состояла только из статей в формате «обложка+текст». Мной был сделан редизайн этого раздела — Академия обновилась как стилистически, так и функционально. Компания расширилась до более информационно-образовательного формата.
Изначально Академия (блог) состояла только из статей в формате «обложка+текст». Мной был сделан редизайн этого раздела — Академия обновилась как стилистически, так и функционально. Компания расширилась до более информационно-образовательного формата.
Редизайн Академии был отдельным подпроектом.
Совместно с отделом маркетинга мы:
Какой функционал я внедрила в новую Академию:
- Удобный рубрикатор: добавлены темы + расширены типы контента — помимо статей добавлены подкасты, вебинары и гайды;
- Закрепленные элементы для удобной навигации;
- Популярный контент выведен в отдельный блок;
- Функционал подписки на рассылку дайджеста;
- Добавлены блоки с офферами и акциями;
- Создан раздел «Авторы»;
- Подобрана удобная CMS, чтобы оперативно собирать статьи без привлечения в дальнейшем дизайнеров и разработчиков;
- Создан подраздел «Глоссарий» для ориентирования по терминам и лучшего SEO;
- Настроена удобная админпанель.
8.3 Раздел «Партнеры»
Совместно с пиар-отделом продумали на сайте раздел для кросс-партнерств, чтобы партнеры могли размещать информацию о себе у нас на сайте — это позволило нам начать формировать экосистему рекламных инструментов для клиента.
При разработке дизайна страницы я добавила фильтры по типам рекламных услуг и прописала внутренние требования для заполнения карточек.
Совместно с пиар-отделом продумали на сайте раздел для кросс-партнерств, чтобы партнеры могли размещать информацию о себе у нас на сайте — это позволило нам начать формировать экосистему рекламных инструментов для клиента.
При разработке дизайна страницы я добавила фильтры по типам рекламных услуг и прописала внутренние требования для заполнения карточек.
9. Объём
Всего я разработала 20+ уникальных страниц, а общий объём сайта составлял более 300 страниц — включая типовые, по которым я также осуществляла техподдержку и актуализацию контента.
*Дополнительно: редизайн лендингов для мероприятий
Помимо работы над основным корпоративным сайтом, я занималась редизайном ивент-лендингов — онлайн-визиток под ключевые офлайн-конференции.
Проблемы старых лендингов:
- Не выполняют свою роль визитки, не информативны и ничего не рассказывают о компании. На страницах даны только контакты менеджеров.
- Выполнены в старой стилистике компании, не адаптированы под новый фирменный стиль и новый сайт.
Пример ивент-лендинга до редизайна:
Что было сделано:
- Переработала структуру лендингов, сделала их более информативными: отразила ключевой оффер, утп, мини-акции, нашу команду на ивент, добавлила анонсы выступлений наших спикеров, добавила CTA для связи.
- Обновила дизайн в соответствии с новым фирменным стилем.
Для каждого мероприятия мы совместно с brand-дизайнером создавали отдельный key visual, который ложился в основу всех бренд-носителей для ивента. Key visual создавался таким образом, чтобы взять за основу наш фирменный стиль, но при этом вписать в него дизайн-код самого мероприятия.
Такой подход обеспечил визуальную целостность и узнаваемость бренда, при этом позволил ему органично интегрироваться в стилистику мероприятия.
Ниже — несколько примеров обновленных ивент-лендингов, оформленных в рамках этого подхода:
Такой подход обеспечил визуальную целостность и узнаваемость бренда, при этом позволил ему органично интегрироваться в стилистику мероприятия.
Ниже — несколько примеров обновленных ивент-лендингов, оформленных в рамках этого подхода:
10. Результат
После редизайна сайта, блога и лендингов мы получили крайне положительный фидбек от наших коллег, партнеров и клиентов.
Мы с командой маркетинга поняли, что выполнили ключевые цели по этому проекту: сайт усилил позиционирование и имидж компании, стал удобным, информативным и улучшил пользовательский опыт.
Мы с командой маркетинга поняли, что выполнили ключевые цели по этому проекту: сайт усилил позиционирование и имидж компании, стал удобным, информативным и улучшил пользовательский опыт.
Ключевые результаты:
- Рост обращений через сайт на 25%
- Сокращение времени запуска новых страниц (в отдельных случаях до 2−4 раз)
- Сокращение времени верстки статей в блог на 75%
- Увеличение вовлечённости (времени на сайте) на 28%
- Увеличение количества разделов с 4 до 20 за счёт полноценной структуры
- Техподдержка сайта в объеме 300+ страниц
