Редизайн современной базы знаний с продуманной структурой контента, а также информация об обновлениях продуктов
О клиенте
Р7-Офис — российский разработчик офисного программного обеспечения, включающего корпоративные серверы, редакторы документов, облачные сервисы и другие продукты для бизнеса и государственных организаций.
Компания обладает большой базой знаний и технической документацией, которая ежедневно используется тысячами пользователей и администраторов. Чтобы сделать работу с материалами ещё удобнее и соответствовать современным стандартам цифровых продуктов, заказчик обратился в Иностудио с запросом на редизайн своего центра поддержки.
Контекст
Существующий сайт поддержки support.r7-office.ru выполнял свои функции, но со временем перестал отвечать актуальным требованиям к юзабилити и визуальному стилю
01
Дизайн устарел и не соответствовал новому брендбуку компании. Это создавало путаницу среди клиентов и снижало доверие к имиджу Р7.
02
Навигация по разделам и статьям была недостаточно интуитивной, пользователям было сложно быстро находить нужную информацию.
03
Отсутствовала единая визуальная иерархия элементов — код, предупреждения, примечания и скриншоты смешивались, затрудняя скан-чтение.
04
Страницы релизноутсов, блок часто задаваемых вопросов и PDF-инструкций имели монотонную структуру, что снижало вовлечённость.
05
Не было современных функций, таких как тёмная тема или фиксированное оглавление, которые повышают комфорт при длительной работе с документацией.
Запрос клиента, задачи
Перед нами стояла задача провести комплексный редизайн визуальной части сайта без изменения серверной архитектуры и с сохранением совместимости с текущими плагинами WordPress.
Визуальная модернизация
Переработать типографику, цветовую схему и графику в строгом соответствии с новым фирменным стилем Р7. Использовать корпоративные цвета, шрифты, обеспечить минималистичный и профессиональный дизайн.
Оптимизация пользовательского опыта
Улучшить навигацию по разделам, внедрить визуальные маркёры для разных типов контента. Особое внимание уделить страницам статей, категорий, подкатегорий, релизноутсов и PDF-документации.
Внедрение светлой и тёмной темы
Реализовать возможность переключения между темами оформления для комфортной работы в любых условиях освещения.
Улучшение читаемости и структуры контента
Создать адаптивную типографику, внедрить автоматическое оглавление с якорями, стандартизировать блоки для кода, предупреждений и советов, оптимизировать отображение таблиц и изображений.
Поисковая оптимизация и производительность
Обеспечить высокую скорость загрузки (Core Web Vitals), поддержку мобильных устройств и соответствие требованиям поисковых систем.
Используемые шрифты на проекте
Решение задач
Мы провели детальный анализ текущего сайта, изучили брендбук и совместно с заказчиком сформировали техническое задание, в котором описали новую структуру и дизайн-решения для каждого типа страниц. Работа велась итерационно: отрисовка макетов в Figma, согласование с клиентом, вёрстка и интеграция с WordPress.
Проектирование интерфейса. На основе брендбука мы разработали современную дизайн-концепцию, которая сочетает корпоративную строгость с удобством для пользователя.
Типографика и цвета
Использовали фирменные шрифты Gilroy и Arial, а также основную палитру и акцентные цвета из брендбука.
Светлая и тёмная темы
Спроектировали две полноценные темы оформления, переключаемые одной кнопкой. Для тёмной темы адаптировали все элементы — от фона до иконок и блоков кода, сохранив контрастность и читаемость.
Типовые страницы
Проработали макеты для главной страницы, библиотеки статей, категорий, подкатегорий, блок часто задаваемых вопросов, релизноутсов и PDF-документации. Для каждого типа страниц создали уникальные визуальные решения, улучшающие навигацию и восприятие контента.
Улучшение UX на ключевых страницах
Настройка сайдбара и футера. Разработали адаптивный сайдбар, который на десктопе отображает меню разделов и блоки «Недавно обновлённые статьи» и «Последние обновления», а на мобильных скрывается за гамбургер-меню. Футер структурировали по четырём колонкам с добавлением кнопки скролла вверх.
Библиотека статей
Внедрили иерархическое оглавление, которое остаётся на экране при прокрутке. Добавили стандартизированные блоки «Важно», «Примечание» и «Выделение серым» с соответствующими иконками и цветами. Улучшили отображение кода, таблиц, а также внутренних и внешних ссылок. В подвале статьи теперь есть блоки для оценки, возможность «Задать вопрос» (с отправкой через AJAX) и рекомендуемые материалы.
Релизноутсы
Переработали монотонный список изменений в структурированный журнал с чётким разделением версий, дат и списка изменений. Добавили навигацию по версиям и визуальные акценты для важных обновлений.
Блок часто задаваемых вопросов и PDF-страницы
Обновили стили, ввели визуальную иерархию, улучшили читаемость и навигацию.
Категории и подкатегории
Ввели цветовую дифференциацию разделов, чёткое разделение на подкатегории и статьи, добавили заголовки и визуальное выделение материалов, чтобы пользователь быстрее ориентировался.
Результаты
01
Создали современный, эргономичный дизайн центра поддержки, полностью соответствующий обновлённому брендбуку Р7 и укрепляющий доверие к продукту.
02
Внедрили светлую и тёмную темы, что повысило комфорт пользователей при работе с документацией в любое время суток.
03
Существенно улучшили пользовательский опыт за счёт интуитивной навигации, чёткой визуальной иерархии, автоматического оглавления и стандартизированных блоков контента.
04
Оптимизировали ключевые страницы , сделав их удобными для быстрого поиска ответов и скан-чтения.