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

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

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

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

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

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

В нашем обществе дизайн часто ассоциируется с чем-то исключительно визуальным. Поэтому услышав «редизайн» многие представляют что-то вроде перекрашивания кнопок.

Но на деле это масштабнее: изменение предназначения (функций) → изменение структуры (формы) → изменение внешнего вида (стиля). И все это вместе — редизайн.

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

Как писала выше, пришел к нам некий Франкенштейн из наших предыдущих разработок и творчества дизайнеров из другой студии.

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

Мы смогли получить информацию от пользователей, что им нравилось, что было неудобно, но для старта проектирования этого недостаточно. Нужно понять, какие практики есть на рынке, поэтому начали с аналитики: собрали и оценили аналоги, выяснили потребности аудитории, пообщались с бизнесом и только потом приступили к прототипам. Но давайте обо всём по порядку :)

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

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

1. Фиксированное боковое меню с навигацией по основным разделам: главная, недавние, избранные, статьи автора, все статьи;
2. Отсутствие главной, этот раздел часто занимают подписки или избранное, статьи автора;
3. Персонализированный контент: подписка на конкретных авторов, коллег, рекомендованные разделы;
4. Верхнеуровневое разделение всех статей на категории (разделы, пространства) конечное количество верхнеуровневых категорий;
5. Несколько точек входа на поиск разного уровня внутри страницы, постепенная детализация глобального поиска;
6. Разнообразие параметров фильтрации при поиске.

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

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

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

— Читателям привычнее главная, как набор популярных блоков;
— Автору важно сразу видеть изменения в его статьях;
— Важна возможность делиться статьями с коллегами.

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

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

— Узнали сценарии использования каждой роли;
— Зафиксировали структуру главной и всего приложения;
— Определили главные функции для тщательной проработки;
— Составили структуру сервиса.

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

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

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

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

— На главной: открытое поле поиска и частые запросы;
— В меню при активном поиске: недавние запросы, недавно просмотренные категории, категоризация по типу контента;
— Расширенный поиск: отдельная страница с фильтрацией и сортировкой результатов.

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

— Содержание статьи для навигации между заголовками;
— Предложение похожих статей;
— Оптимальная ширина контента ~ 700px.

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

— Поиск всегда под рукой в таббаре;
— Удобная навигация по дереву статей;
— Ничего лишнего в режиме чтения.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Непонятно, работают ли хештеги, но если кому-то удобно по ним переходить: #uxart #interface #ux #proto #figma #analytics #технониколь