Альтернатива Notion, Confluence и других зарубежных сервисов — собственная база знаний компании. Рассказываем о комплексном UX дизайне и редизайне внутреннего сервиса ТЕХНОНИКОЛЬ, показываем все интерфейсы проекта и делимся опытом создания корпоративной системы управления знаниями с нуля.
Всем привет, меня зовут Ланцева Анастасия, я аналитик и UX-проектировщик в студии интерфейсов UXART, где мы ежедневно работаем над тем, чтобы сделать интернет удобнее. Сегодня поделюсь опытом работы над редизайном корпоративной базы знаний и покажу все этапы создания пользовательских интерфейсов.
О проекте: внутренний сервис ТЕХНОНИКОЛЬ для сотрудников
База знаний — это система управления знаниями и внутренний сервис ТЕХНОНИКОЛЬ для сотрудников компании. В ней централизованно хранятся полезные инструкции для работы, шаблоны документов, регламенты и другая корпоративная информация.
Мы начали работать с этой базой знаний еще в 2019 году, создав MVP с нуля. У проекта была непростая судьба — к работе подключали другую студию, менялись дизайнеры, часть разделов была перерисована, другая оставалась в старом дизайне.
Команда ТЕХНОНИКОЛЬ вернулась к нам с задачей провести глобальный редизайн корпоративной системы. К этому времени мы уже работали с их дизайн-системой на других проектах, поэтому решили сделать обновление на её основе. Но ключевое в редизайне — не визуальные изменения.
Что такое редизайн?
В UX дизайне редизайн часто ассоциируется с визуальными изменениями. Но настоящий редизайн — это масштабный процесс: изменение функций → изменение структуры → изменение стиля. Все это вместе — комплексный редизайн базы знаний.
На успешность корпоративной системы управления знаниями влияет каждый этап. В нашем случае основная функция — доступ, хранение и распространение информации — осталась неизменной, а для стилей уже была готова дизайн-система. Поэтому основная аналитическая работа свелась к изменению структуры и проработке функционала на прототипах.
Итак, что было вначале:
К нам пришел своеобразный «Франкенштейн» из наших предыдущих разработок и работы дизайнеров из другой студии. Система функционировала, но требовала серьезной доработки.
Это мы смотрим на то, что стало с базой
Решили с клиентом, что можно переделывать систему полностью. При этом нужно было учесть, что MVP работало, им пользовались около 1500 человек, была настроена ролевая модель и привычная архитектура. Также выяснили, что большинство пользователей работали с мобильной версией корпоративной системы.
Поиск и анализ best practices
Поиск и анализ лучших практик — важный этап создания эффективной системы управления знаниями. Основными референсами стали: Confluence, Notion, Evernote как наиболее релевантные инструменты в сфере корпоративных решений.
У каждого сервиса есть преимущество, за которое их выбирают пользователи. Например, у Confluence — расширенный поиск и удобный редактор контента. Но невозможно развить все характеристики на максимум, нужно выбрать приоритеты.
Для глубокого анализа мы отобрали следующие популярные решения для корпоративных баз знаний:
Существующие системы управления знаниями являются универсальными решениями для миллионов пользователей. В рамках нашего проекта нужно было учитывать специфические особенности, чтобы создать корпоративную базу знаний, удобную конкретно для сотрудников ТЕХНОНИКОЛЬ.
- Фиксированное боковое меню с навигацией по основным разделам
- Персонализированный контент с подписками на авторов и рекомендуемые разделы
- Верхнеуровневое разделение контента на категории
- Множественные точки входа для поиска разного уровня
- Разнообразные параметры фильтрации при поиске информации
Существующие системы управления знаниями являются универсальными решениями для миллионов пользователей. В рамках нашего проекта нужно было учитывать специфические особенности, чтобы создать корпоративную базу знаний, удобную конкретно для сотрудников ТЕХНОНИКОЛЬ.
В рамках разрабатываемого продукта нужно было учитывать специфичные отличия, чтобы сделать его удобным для конкретной аудитории — сотрудников ТН.
Исследования и проектирование
Начали с опроса пользователей, для этого подготовили 3 варианта мета-прототипов с разным составом и расположением блоков на основе существующих трендов и исходных данных.
Я тут быстренько поясню для тех кто не знает, а потом Настя продолжит. Мета-прототипы, которые также называют: «wireframe», «высокоуровневые прототипы» необходимы для того, чтобы максимально быстро, с низкой детализацией визуализировать гипотезы и обсудить их перед разработкой детальных прототипов. Это позволяет определиться с набором и приоритезацией функций, контента, страниц.
Многие результаты опроса были ожидаемы, но некоторые послужили основой для изменения первоначальной структуры. Вот некоторые из них:
— Читателям привычнее главная, как набор популярных блоков;
— Автору важно сразу видеть изменения в его статьях;
— Важна возможность делиться статьями с коллегами.
После опроса скорректировали структуру главной и разработали детализированные прототипы в двух версиях: с боковым и с верхним меню.
Затем подготовили вопросы и снова пошли к пользователям. В итоге они выбрали вариант с боковым меню. Еще по результатам интервью:
— Узнали сценарии использования каждой роли;
— Зафиксировали структуру главной и всего приложения;
— Определили главные функции для тщательной проработки;
— Составили структуру сервиса.
Ключевые решения
Навигация, удобство и скорость поиска информации — одна из самых важных функций базы знаний, все главные решения касаются именно этого.
Боковое меню — одна из ключевых переработок, оно играет главную роль в навигации. Многие разделы одновременно и отдельные страницы, и раскрывающиеся пункты. Это обеспечивает:
— Доступ к списку статей из любой точки приложения;
— Быстроту: при раскрытии пунктов не требуется загрузка страниц;
— Понятность: вся навигация в одном месте.
Сделали несколько уровней поиска:
— На главной: открытое поле поиска и частые запросы;
— В меню при активном поиске: недавние запросы, недавно просмотренные категории, категоризация по типу контента;
— Расширенный поиск: отдельная страница с фильтрацией и сортировкой результатов.
Настроили оптимальные параметры статьи, так как 90% времени пользователи тратят на чтение, этот процесс должен быть максимально комфортным:
— Содержание статьи для навигации между заголовками;
— Предложение похожих статей;
— Оптимальная ширина контента ~ 700px.
Про ширину контента — супер важный пункт. Многие им пренебрегают и получаются вот такие тексты. Боль.
Так как мобильная версия была в приоритете, по ней также есть несколько важных решений:
— Поиск всегда под рукой в таббаре;
— Удобная навигация по дереву статей;
— Ничего лишнего в режиме чтения.
Результаты
Проработали все страницы и состояния, в итоге получили прототипы продукта, который учел лучшие практики рынка, боли и привычки аудитории, а также задачи бизнеса.
Так как респондентам оказалось привычнее видеть главную, как набор популярных блоков, на ней расположили: поиск, подразделения, популярные тематические подборки, популярные статьи.
Расположили все статьи, с которыми взаимодействовал пользователь, в одном месте. Для автора первыми отображаются опубликованные статьи и черновики. Для читателя — избранные, затем недавние.
Основное действие в базе знаний для автора — создание статьи. Поэтому проработали редактор статьей и сделали его удобнее, в том числе и для мобильных.
Спроектировали логику ролевой модели, которая позволяет гибко настраивать возможности пользователей. В ней нет конечного количества ролей, можно создавать новые, настраивая отдельные параметры.
Подведем итоги
Подготовили все прототипы, проект уже ушел в дизайн, покажем его во второй части статьи)
По предварительным опросам пользователи довольны структурой приложения, клиент также считает, что у новой версии продукта большие шансы на то, чтобы оказаться понятным и удобным для сотрудников.
Команда дизайнеров UXART проделала отличную работу, учитывая опыт и пожелания наших сотрудников. Интерфейс, особенно мобильная версия, выглядит удобным и понятным. Особенно важно было учесть потребности сотрудников заводов, которые не имеют доступа к компьютеру и используют только смартфон в своей работе.
Валентин Фетисов — Руководитель проектов, Ведущий тех. специалист ТЕХНОНИКОЛЬ
После релиза проведем количественное тестирование и поделимся успехами с вами. А потом будем участвовать в развитии продукта и добавлении новых функций. Мы рады, что проект продолжает развиваться, и с удовольствием в этом помогаем)
Спасибо всем за внимание. Это наша первая статья-кейс, поэтому будем рады поддержке <3
Покупайте строительные материалы ТЕХНОНИКОЛЬ — они реально крутые, мы ездили в академию, всё лично видели на объектах и на больших домах, и на модельках, как на видео.
До глобального редизайна магазина пока не добрались, только точечно улучшали, зато сделали полностью тендерную платформу roof.ru, ключевой сайт-навигатор: nav.tn.ru, сайт для готовых домов: dom.tn.ru и ещё более 20 различных проектов.
Кому интересно больше узнать про UXART — у нас есть Telegram-канал, где анонсируем предстоящие выпуски статей и рассказываем о студии и интерфейсах. Открыто, нешаблонно, с кружочками и фотками)
Предлагайте в комментариях свои идеи для статей или просто приходите к нам за интерфейсами — мы делаем только их и делаем круто :)
Всем удобства)