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

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

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

Ланцева Анастасия
Аналитик и UX-проектировщик в UXART

Немного о проекте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результаты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

131131
86 комментариев
500 ₽

От нашего дома вашему дому))

2
Ответить

Авторше надо подробно рассказать что это за база знаний такая
1. Какая цель создания базы знаний.
2. Что будем хранить, какую информацию?
3. Для кого эта информация? Кто будет работать с базой знаний? Какие отделы, какие сотрудники? Какие есть роли у тех кто будет работать с базой?
Условно - все инструкции для сотрудников от того как написать заявление на отпуск, увольнение, что делать если потерял пропуск в офис, что делать если нужно ПО на компьютер. И так далее, и так далее...
"Также выяснили, что большинство пользовалось мобильными устройствами". Ну пользовались, это конечно хорошо, у меня тоже смартфон есть и я им пользуюсь. А какой сценарий использования базы знаний с мобильного устройства? Это сотрудник в полях пользуется базой на мобильном, или сотрудник в офисе? С какой целью пользуется базой? В офисе у всех стационарные ПК есть.
Если бы авторша подробно рассказала о проблеме было бы понятно почему возникло столько сложностей. А то кажется, что сами себе придумали сложности, чтобы их преодолевать.

16
Ответить

Иван, спасибо за комментарий) Нашей целью было рассказать конкретно про редизайн продукта (не создание с нуля) в общих чертах и подсветить интересные решения в этой сфере на текущий момент.

Цели создания, что именно хранится, кто пользуется, в каких условиях, сценарии использования — конечно, все это и много чего еще мы прорабатывали детально, и очень хотели бы поделиться всем-всем, что есть, но тогда статья получилась бы необъятной) Поверхностно коснулись хранимых данных и ролевой модели, можете перечитать еще раз)

Основной проблемой было то, что продукт спустя много итераций, над которыми работали разные студии, превратился во Франкенштейна с запутанной логикой. Собственно, наша основная задача была — привести все к удобной структуре, и, кажется, нам это удалось)

7
Ответить

АвторшеАвторКЕ

Поуважительней, пожалуйста.

4
Ответить

Есть такое

Ответить