Р7 - Центр поддержки

1. Вводная задача от заказчика, проблематика, цели

Существующий сайт поддержки support.r7-office.ru выполнял свои функции, но со временем перестал отвечать актуальным требованиям к юзабилити и визуальному стилю:

• Дизайн устарел и не соответствовал новому брендбуку компании. Это создавало путаницу среди клиентов и снижало доверие к имиджу Р7. Навигация по разделам и статьям была недостаточно интуитивной, пользователям было сложно быстро находить нужную информацию.
• Отсутствовала единая визуальная иерархия элементов — код, предупреждения, примечания и скриншоты смешивались, затрудняя скан-чтение.
• Страницы релизноутсов, блок часто задаваемых вопросов и PDF-инструкций имели монотонную структуру, что снижало вовлечённость.
• Не было современных функций, таких как тёмная тема или фиксированное оглавление, которые повышают комфорт при длительной работе с документацией.

Запрос клиента

Перед нами стояла задача провести комплексный редизайн визуальной части сайта (UI-шаблона) без изменения серверной архитектуры и с сохранением совместимости с текущими плагинами WordPress.

Ключевые задачи:

• Визуальная модернизация. Переработать типографику, цветовую схему и графику в строгом соответствии с новым фирменным стилем (брендбук Р7). Использовать корпоративные цвета, шрифты Gilroy и Arial, обеспечить минималистичный и профессиональный дизайн.
• Оптимизация пользовательского опыта (UX). Улучшить навигацию по разделам, внедрить визуальные маркеры для разных типов контента (FAQ, инструкции, справочники, документы). Особое внимание уделить страницам статей, категорий, подкатегорий, релизноутсов и PDF-документации.
• Внедрение светлой и тёмной темы. Реализовать возможность переключения между темами оформления для комфортной работы в любых условиях освещения.
• Улучшение читаемости и структуры контента. Создать адаптивную типографику, внедрить автоматическое оглавление с якорями, стандартизировать блоки для кода, предупреждений и советов, оптимизировать отображение таблиц и изображений.
• SEO и производительность. Обеспечить высокую скорость загрузки (Core Web Vitals), поддержку мобильных устройств и соответствие требованиям поисковых систем.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

Решение задач:

• Мы провели детальный анализ текущего сайта, изучили брендбук и совместно с заказчиком сформировали техническое задание, в котором описали новую структуру и дизайн-решения для каждого типа страниц. Работа велась итерационно: отрисовка макетов в Figma, согласование с клиентом, вёрстка и интеграция с WordPress.
• Создание UX/UI-дизайна. На основе брендбука мы разработали современную дизайн-концепцию, которая сочетает корпоративную строгость с удобством для пользователя.
• Типографика и цвета: Использовали фирменные шрифты Gilroy (Light, Regular, Bold) и Arial, а также основную палитру (белый, светло-серый, нейтральный серый, космический чёрный) и акцентные цвета из брендбука.
• Светлая и тёмная темы: Спроектировали две полноценные темы оформления, переключаемые одной кнопкой. Для тёмной темы адаптировали все элементы — от фона до иконок и блоков кода, сохранив контрастность и читаемость.
• Типовые страницы: Проработали макеты для главной страницы (с уникальным шапкой и блоками продуктов, доп. информации и обновлений), страниц статей (с оглавлением, инфоблоками, оценкой), категорий, подкатегорий, FAQ, релизноутсов и PDF-документации. Для каждого типа страниц создали уникальные визуальные решения, улучшающие навигацию и восприятие контента.

Инструменты:

Figma, UX Pilot, Adobe Photoshop, Adobe Illustrator.

3. Результаты сотрудничества

• Создали современный, эргономичный дизайн центра поддержки, полностью соответствующий обновлённому брендбуку Р7 и укрепляющий доверие к продукту.
• Внедрили светлую и тёмную темы, что повысило комфорт пользователей при работе с документацией в любое время суток.
• Существенно улучшили пользовательский опыт за счёт интуитивной навигации, чёткой визуальной иерархии, автоматического оглавления и стандартизированных блоков контента.
• Оптимизировали ключевые страницы (статьи, релизноутсы, FAQ, категории), сделав их удобными для быстрого поиска ответов и скан-чтения.
• Улучшение пользовательского опыта на ключевых страницах.

Страницы статей:

• Внедрили иерархическое оглавление, которое соответствует заголовкам H2-H6 и фиксируется при прокрутке. Добавили стандартизированные блоки «Важно», «Примечание», «Выделение серым» с соответствующими иконками и цветами.
• Улучшили отображение кода, таблиц (с горизонтальным скроллом на мобильных), внутренних и внешних ссылок. В подвале статьи разместили блоки оценки, «Задать вопрос» (с отправкой через AJAX) и рекомендуемые материалы.
• Релизноутсы: Переработали монотонный список изменений в структурированный журнал с чётким разделением версий, дат и списка изменений. Добавили навигацию по версиям и визуальные акценты для важных обновлений.
• FAQ и PDF-страницы: Обновили стили, ввели визуальную иерархию, улучшили читаемость и навигацию.
• Категории и подкатегории: Ввели цветовую дифференциацию разделов, чёткое разделение на подкатегории и статьи, добавили заголовки и визуальное выделение материалов, чтобы пользователь быстрее ориентировался.
• Настройка сайдбара и футера. Разработали адаптивный сайдбар, который на десктопе отображает меню разделов и блоки «Недавно обновлённые статьи» и «Последние обновления», а на мобильных скрывается за гамбургер-меню. Футер структурировали по четырём колонкам (основное меню, полезное, документация, подписка и соцсети) с добавлением кнопки скролла вверх.