10 Июня 2022
Назад в блог

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

Корпоративный сайт
О проекте

Extyl («Экстил») — ИТ-интегратор, который уже 19 лет создаёт и поддерживает сложные веб-проекты: e-commerce, b2b, маркетплейсы, личные кабинеты и корпоративные порталы, ГИС. Среди их клиентов крупнейшие представители бизнеса: Hoff, Сибур НХТК, Cordiant, Yokohama, MAN, Счетная Палата, Роснефть, Сбербанк, Volkswagen, AVON, Virgin и другие. Уже несколько лет Everest и Extyl работают над совместными проектами в альянсе UX/UI и разработки. Но редизайн корпоративного сайта Extyl стал нашим первым проектом в формате “заказчик-исполнитель”.

Задача

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

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

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

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

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

Аналитика и информационная архитектура

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

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

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

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

Визуальный конкурентный анализ

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

Информационная архитектура Extyl

Проектирование страниц сайта

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

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

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

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

Сборка мудборда и разработка дизайн-концепции

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

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

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

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

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

Мудборд для поиска визуального решения сайта Extyl

Дизайн главной страницы

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

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

Дизайн главной страницы Extyl

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

Конечный набор цветов и шрифтов

Дизайн страниц и адаптивов

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

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

Образцы компонентов и UI-элементов Extyl

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

Дизайн настольной версии сайта Extyl

Дизайн мобильной версии сайта Extyl

Интересные решения в дизайне

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

Пример использования фирменного знака в заголовках

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

Иллюстрации под направления и услуги Extyl

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

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

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

Результат

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

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

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

Отзыв клиента
Это не первая наша работа с «Эверестом», но первый личный опыт, как заказчика услуг. Наш партнер по альянсу не только предлагает решения, но и аргументирует их — чего не хватает многим на рынке UI/UX, на мой вкус.

Правок было минимум, в первую очередь из-за того, что почти половину времени проекта заняли исследования и интервью — кто мы (Extyl), как себя позиционируем и чего хотим. Вот именно так и надо работать, друзья :)
Олег Громов, генеральный директор и основатель Extyl
Контакты
Пишите
Звоните
Москва
Пресненская набережная, 8с1, башня «Москва», 58 этаж, офис 581
Тамбов
ул. Максима Горького, д. 17/129, этаж 12