Это БАЗА

Это БАЗА. Как мы собирали все знания корпорации в один удобный интерфейс. База знаний ТЕХНОНИКОЛЬ

Альтернатива Notion, Confluence и других зарубежных сервисов — собственная база знаний компании. Рассказываем о комплексном UX дизайне и редизайне внутреннего сервиса ТЕХНОНИКОЛЬ, показываем все интерфейсы проекта и делимся опытом создания корпоративной системы управления знаниями с нуля.

This browser does not support the video element.

Всем привет, меня зовут Ланцева Анастасия, я аналитик и UX-проектировщик в студии интерфейсов UXART, где мы ежедневно работаем над тем, чтобы сделать интернет удобнее. Сегодня поделюсь опытом работы над редизайном корпоративной базы знаний и покажу все этапы создания пользовательских интерфейсов.

О проекте: внутренний сервис ТЕХНОНИКОЛЬ для сотрудников

База знаний — это система управления знаниями и внутренний сервис ТЕХНОНИКОЛЬ для сотрудников компании. В ней централизованно хранятся полезные инструкции для работы, шаблоны документов, регламенты и другая корпоративная информация.

Мы начали работать с этой базой знаний еще в 2019 году, создав MVP с нуля. У проекта была непростая судьба — к работе подключали другую студию, менялись дизайнеры, часть разделов была перерисована, другая оставалась в старом дизайне.

Команда ТЕХНОНИКОЛЬ вернулась к нам с задачей провести глобальный редизайн корпоративной системы. К этому времени мы уже работали с их дизайн-системой на других проектах, поэтому решили сделать обновление на её основе. Но ключевое в редизайне — не визуальные изменения.

Что такое редизайн?

В UX дизайне редизайн часто ассоциируется с визуальными изменениями. Но настоящий редизайн — это масштабный процесс: изменение функций → изменение структуры → изменение стиля. Все это вместе — комплексный редизайн базы знаний.

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

Итак, что было вначале:

К нам пришел своеобразный «Франкенштейн» из наших предыдущих разработок и работы дизайнеров из другой студии. Система функционировала, но требовала серьезной доработки.

Это мы смотрим на то, что стало с базой

Решили с клиентом, что можно переделывать систему полностью. При этом нужно было учесть, что MVP работало, им пользовались около 1500 человек, была настроена ролевая модель и привычная архитектура. Также выяснили, что большинство пользователей работали с мобильной версией корпоративной системы.

Поиск и анализ best practices

Поиск и анализ лучших практик — важный этап создания эффективной системы управления знаниями. Основными референсами стали: Confluence, Notion, Evernote как наиболее релевантные инструменты в сфере корпоративных решений.

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

Для глубокого анализа мы отобрали следующие популярные решения для корпоративных баз знаний:

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

Существующие системы управления знаниями являются универсальными решениями для миллионов пользователей. В рамках нашего проекта нужно было учитывать специфические особенности, чтобы создать корпоративную базу знаний, удобную конкретно для сотрудников ТЕХНОНИКОЛЬ.

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

Исследования и проектирование

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

Я тут быстренько поясню для тех кто не знает, а потом Настя продолжит. Мета-прототипы, которые также называют: «wireframe», «высокоуровневые прототипы» необходимы для того, чтобы максимально быстро, с низкой детализацией визуализировать гипотезы и обсудить их перед разработкой детальных прототипов. Это позволяет определиться с набором и приоритезацией функций, контента, страниц.

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

— Читателям привычнее главная, как набор популярных блоков;

— Автору важно сразу видеть изменения в его статьях;

— Важна возможность делиться статьями с коллегами.

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

Затем подготовили вопросы и снова пошли к пользователям. В итоге они выбрали вариант с боковым меню. Еще по результатам интервью:

— Узнали сценарии использования каждой роли;

— Зафиксировали структуру главной и всего приложения;

— Определили главные функции для тщательной проработки;

— Составили структуру сервиса.

Ключевые решения

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

Боковое меню — одна из ключевых переработок, оно играет главную роль в навигации. Многие разделы одновременно и отдельные страницы, и раскрывающиеся пункты. Это обеспечивает:

— Доступ к списку статей из любой точки приложения;

— Быстроту: при раскрытии пунктов не требуется загрузка страниц;

— Понятность: вся навигация в одном месте.

Сделали несколько уровней поиска:

— На главной: открытое поле поиска и частые запросы;

— В меню при активном поиске: недавние запросы, недавно просмотренные категории, категоризация по типу контента;

— Расширенный поиск: отдельная страница с фильтрацией и сортировкой результатов.

Настроили оптимальные параметры статьи, так как 90% времени пользователи тратят на чтение, этот процесс должен быть максимально комфортным:

— Содержание статьи для навигации между заголовками;

— Предложение похожих статей;

— Оптимальная ширина контента ~ 700px.

Про ширину контента — супер важный пункт. Многие им пренебрегают и получаются вот такие тексты. Боль.

Так как мобильная версия была в приоритете, по ней также есть несколько важных решений:

— Поиск всегда под рукой в таббаре;

— Удобная навигация по дереву статей;

— Ничего лишнего в режиме чтения.

Результаты

Проработали все страницы и состояния, в итоге получили прототипы продукта, который учел лучшие практики рынка, боли и привычки аудитории, а также задачи бизнеса.

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

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

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

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

Подведем итоги

Подготовили все прототипы, проект уже ушел в дизайн, покажем его во второй части статьи)

По предварительным опросам пользователи довольны структурой приложения, клиент также считает, что у новой версии продукта большие шансы на то, чтобы оказаться понятным и удобным для сотрудников.

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

Валентин Фетисов — Руководитель проектов, Ведущий тех. специалист ТЕХНОНИКОЛЬ

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

Спасибо всем за внимание. Это наша первая статья-кейс, поэтому будем рады поддержке <3

Покупайте строительные материалы ТЕХНОНИКОЛЬ — они реально крутые, мы ездили в академию, всё лично видели на объектах и на больших домах, и на модельках, как на видео.

This browser does not support the video element.

shop.tn.ru

До глобального редизайна магазина пока не добрались, только точечно улучшали, зато сделали полностью тендерную платформу roof.ru, ключевой сайт-навигатор: nav.tn.ru, сайт для готовых домов: dom.tn.ru и ещё более 20 различных проектов.

Кому интересно больше узнать про UXART — у нас есть Telegram-канал, где анонсируем предстоящие выпуски статей и рассказываем о студии и интерфейсах. Открыто, нешаблонно, с кружочками и фотками)

Предлагайте в комментариях свои идеи для статей или просто приходите к нам за интерфейсами — мы делаем только их и делаем круто :)

Всем удобства)