Корпоративный веб-сайт IT-компании

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

Цели редизайна:

• повысить показатели юзабилити

• поднять уровень конверсии

• представить информацию в удобном и понятном виде для привлечения новых клиентов

• повысить уровень доверия пользователей, которые впервые знакомятся с услугами компании

• создать ощущение технологичности проекта

В рамках работы над проектом были приняты следующие решения:

• обеспечить ощущение технологичности дизайна за счет применения темной темы

• провести ребрендинг для визуального повышения премиальности компании

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

• подготовить сайт к SEO-оптимизации

• добавить динамичность за счет стильных анимаций

Рассматривая варианты шрифтовых сочетаний проекта, мы опирались на ряд выделенных нами параметров:

• корректность передачи шрифта при разработке 

• читаемость

• степень открытости и ширины шрифта

• широкая вариативность начертаний

• полное совпадения отображения как для кириллицы, так и для латиницы

• универсальность

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

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

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

Основными цветами проекта выступили:

• темно-серый #141414

• акцентный зеленый #4DFFA9

• белый #FFFFFF

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

Анимация заключается в перемещении иконографики в соответствии с заданным временем. Это позволяет пользователю сфокусировать взгляд на текстовом содержании. Макет экрана построен по зрительному F-паттерну для обеспечения правильности расставленных акцентов.

Анимированная лента партнеров повышает доверие пользователей и так же добавляет элемент динамики интерфейсу.

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

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

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

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

Создание блока "Технологии" снизило нагрузку на менеджеров компании, которые регулярно отвечали на вопросы потенциальных клиентов об актуальном стеке технологий, с которыми работает Mindforce.

Результатом работы над проектом стал стильный динамичный сайт с высоким уровнем юзабилити, который привлек в компанию большое количество новых заявок. Сайт протестирован и запущен в работу, а повторные исследования и тесты показали, что новый дизайн сайта создает ощущение технологичности и премиальности.