Редизайн корпоративного сайта Extyl

Компания обратилась к нам с запросом на редизайн корпоративного сайта.

Предпосылок к этому было несколько:

• дизайн давно не менялся и морально устарел;
• логотип компании и элементы брендинга обновились, и прошлая версия сайта этого не учитывала;
• позиционирование сменилось на b2b, порталы и личные кабинеты;
• акценты на сайте не подчёркивали экспертизу и отраслевые решения компании;
• навигация требовала структурности и упрощения, а контент — проработки.

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

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

На этапе интервью мы выяснили, что у клиента есть сложности по части контента: длинные, сложные для восприятия тексты, не адаптированные под целевую аудиторию. Это могло быть препятствием для выполнения основного действия пользователей «Оставить заявку на проект».

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

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

Дополнительно составили список страниц с минимумом изменений в части структуры и с их полной переработкой.

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

На этапе проектирования мы подготовили низкодетализированный (lo-fi) прототип главной страницы, где соотнесли наполнение блоков с их ценностью для пользователя: отбросили лишнее и сосредоточились на важном. По такому принципу создавали новые страницы и дорабатывали уже существующие.

Отсутствие лишних деталей в прототипах позволило увидеть общую картину, не вдаваясь в нюансы каждого блока (с ними работали уже на этапе дизайна).

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

Определившись с форматом, архитектурой и навигацией, мы перешли непосредственно к проработке дизайн-концепции.

Клиенту было важно увидеть больше визуальных отсылок к бренду Extyl и элементам красно-чёрного фирменного стиля, чтобы сайт лучше идентифицировался с брендом. Также хотелось выделиться среди конкурентов и показать свою технологичность.

Основным пожеланием клиента было оставить тёмную стилистику на сайте. Поскольку у клиента изначально «тёмный сайт», который отличал его среди конкурентов со «светлыми сайтами», мы посчитали это отличной возможностью предложить конкурентное дизайн-решение.

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

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

Реализацию идей начали с главной страницы.

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

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

Главная страница стала основой для общего цветового и шрифтового решения. Этот набор дорабатывался и пополнялся вплоть до окончания работы над проектом — по мере появления новых требований к оформлению элементов.

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

Элементы были разработаны для тёмной (оригинальной) и светлой тем. Это было необходимо для удобства восприятия информации разными пользователями. В основном это касалось страниц с большим количеством контента (например, блог и описание кейсов).

В результате было отрисовано более 30 адаптивных дизайн-макетов под десктопную и мобильную версии.

В процессе работы над проектом было реализовано много дизайн-решений. Прежде всего использовали фирменный знак Extyl — «пропеллер» — в качестве стилеобразующего элемента заголовков и фонов. Этот приём стал визитной карточкой дизайна, яркой визуальной отсылкой к бренду. Кроме того, мы позаботились, чтобы все элементы хорошо считывались на любом фоне.

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

В качестве интересного акцента добавили технологичную анимацию на главную страницу.

Для информационных страниц предложили интерактивные элементы: плавающая навигация по разделам, динамические слайдеры и инфоблоки.

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

Хотя данный кейс больше о дизайне, чем об аналитике и сложных интерфейсах, надо добавить, что нам удалось решить и ряд важных имиджевых и бизнес-задач клиента.

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

Нам удалось сделать интерфейс стильным и понятным. А дизайн-концепция смогла отразить как философию бренда, так и его позиционирование.