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

Главное о кейсе

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

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

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

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

Как проект изменил жизнь пользователей

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

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

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

Оптимизировали ключевые страницы (статьи, релизноутсы, FAQ, категории), сделав их удобными для быстрого поиска ответов и скан-чтения.

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

Бизнес-задача и ее решение

Запрос клиента, задачи

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

Визуальная модернизация. Переработать типографику, цветовую схему и графику в строгом соответствии с новым фирменным стилем (брендбук Р7). Использовать корпоративные цвета, шрифты Gilroy и Arial, обеспечить минималистичный и профессиональный дизайн.

Оптимизация пользовательского опыта (UX). Улучшить навигацию по разделам, внедрить визуальные маркеры для разных типов контента (FAQ, инструкции, справочники, документы). Особое внимание уделить страницам статей, категорий, подкатегорий, релизноутсов и PDF-документации.

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

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

SEO и производительность. Обеспечить высокую скорость загрузки (Core Web Vitals), поддержку мобильных устройств и соответствие требованиям поисковых систем.

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

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

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

Типографика и цвета: Использовали фирменные шрифты Gilroy (Light, Regular, Bold) и Arial, а также основную палитру (белый, светло-серый, нейтральный серый, космический чёрный) и акцентные цвета из брендбука.

Светлая и тёмная темы: Спроектировали две полноценные темы оформления, переключаемые одной кнопкой. Для тёмной темы адаптировали все элементы — от фона до иконок и блоков кода, сохранив контрастность и читаемость.

Типовые страницы: Проработали макеты для главной страницы (с уникальным шапкой и блоками продуктов, доп. информации и обновлений), страниц статей (с оглавлением, инфоблоками, оценкой), категорий, подкатегорий, FAQ, релизноутсов и PDF-документации. Для каждого типа страниц создали уникальные визуальные решения, улучшающие навигацию и восприятие контента.

Крафт (мастерство), реализация, технические детали

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

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

FAQ и PDF-страницы: Обновили стили, ввели визуальную иерархию, улучшили читаемость и навигацию.

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

Настройка сайдбара и футера. Разработали адаптивный сайдбар, который на десктопе отображает меню разделов и блоки «Недавно обновлённые статьи» и «Последние обновления», а на мобильных скрывается за гамбургер-меню. Футер структурировали по четырём колонкам (основное меню, полезное, документация, подписка и соцсети) с добавлением кнопки скролла вверх.

Инструменты: Figma, UX Pilot, Adobe Photoshop, Adobe Illustrator.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

Скриншоты