Кейс: редизайн информационного сайта

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

Сайт посвящён операторам сотовой связи и содержит справочную информацию для пользователей мобильных телефонов. В качестве CMS используется wordpress.

Логотип

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

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

Поведенческие факторы

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

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

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

Главная страница

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

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

Ниже я расположил блок с тарифами операторов. Для удобства они также были разделены на 3 категории:

• для телефона
• для планшета
• для USB-модема

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

Блок «Частые вопросы» содержал список коротких ответов на чаще всего задаваемые вопросы. Например, как узнать количество денег на балансе, как бесплатно позвонить с компьютера и т.д.

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

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

Подвал сайта я заполнил всей необходимой юридической информацией.

Информационные страницы

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

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