Это БАЗА. Как мы собирали все знания корпорации в один удобный интерфейс. База знаний ТЕХНОНИКОЛЬ
Альтернатива Notion, Confluence и прочих сервисов — собственная база знаний. Сделали MVP, протестили, потом наши макеты правила другая студия, затем ТН вернулись к нам на глобальный редизайн — про него и поговорим. Непростая история корпоративной базы знаний ТЕХНОНИКОЛЬ. В статье показываем все интерфейсы, а не только говорим о них.
Всем привет, меня зовут Ланцева Анастасия, я аналитик и UX-проектировщик в студии интерфейсов UXART, где мы вместе стараемся ежедневно делать интернет удобнее. Сегодня расскажу о том, как работали над редизайном Базы знаний и покажу все интерфейсы.
Немного о проекте
База знаний — это внутренний сервис ТЕХНОНИКОЛЬ (далее ТН) для сотрудников. В ней хранятся полезные инструкции для работы, шаблоны документов и многое другое.
Мы начали работать с базой еще в 2019 году, с нуля сделали MVP. Дальше у проекта была нелегкая судьба — к работе над ним подключали другую студию, менялись дизайнеры, часть разделов перерисовали, другая оставалась в старом дизайне.
Ребята из ТН вернулись к нам с задачей провести глобальный редизайн. К этому времени мы на других их проектах уже работали с дизайн-системой, поэтому решили сделать обновление на ней. Но ключевое в редизайне не дизайн, как бы странно это не звучало :)
Что такое редизайн?
В нашем обществе дизайн часто ассоциируется с чем-то исключительно визуальным. Поэтому услышав «редизайн» многие представляют что-то вроде перекрашивания кнопок.
Но на деле это масштабнее: изменение предназначения (функций) → изменение структуры (формы) → изменение внешнего вида (стиля). И все это вместе — редизайн.
На успешность продукта может влиять каждый из этапов. В нашем случае главная функция базы знаний — доступ, хранение и распространение информации осталась неизменной, а для стилей уже была дизайн-система. Поэтому основная аналитическая работа свелась к изменению структуры и проработке функционала базы на прототипах.
Итак, что было вначале:
Как писала выше, пришел к нам некий Франкенштейн из наших предыдущих разработок и творчества дизайнеров из другой студии.
Решили вместе с клиентом, что можно всё переделывать. Тем не менее, нужно было учесть, что MVP работало и было около 1500 человек, ролевая модель и привычная архитектура. Также выяснили, что большинство пользовалось мобильными устройствами.
Мы смогли получить информацию от пользователей, что им нравилось, что было неудобно, но для старта проектирования этого недостаточно. Нужно понять, какие практики есть на рынке, поэтому начали с аналитики: собрали и оценили аналоги, выяснили потребности аудитории, пообщались с бизнесом и только потом приступили к прототипам. Но давайте обо всём по порядку :)
Поиск и анализ best practices
Основными референсами стали: 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 #технониколь
Авторше надо подробно рассказать что это за база знаний такая
1. Какая цель создания базы знаний.
2. Что будем хранить, какую информацию?
3. Для кого эта информация? Кто будет работать с базой знаний? Какие отделы, какие сотрудники? Какие есть роли у тех кто будет работать с базой?
Условно - все инструкции для сотрудников от того как написать заявление на отпуск, увольнение, что делать если потерял пропуск в офис, что делать если нужно ПО на компьютер. И так далее, и так далее...
"Также выяснили, что большинство пользовалось мобильными устройствами". Ну пользовались, это конечно хорошо, у меня тоже смартфон есть и я им пользуюсь. А какой сценарий использования базы знаний с мобильного устройства? Это сотрудник в полях пользуется базой на мобильном, или сотрудник в офисе? С какой целью пользуется базой? В офисе у всех стационарные ПК есть.
Если бы авторша подробно рассказала о проблеме было бы понятно почему возникло столько сложностей. А то кажется, что сами себе придумали сложности, чтобы их преодолевать.
Иван, спасибо за комментарий) Нашей целью было рассказать конкретно про редизайн продукта (не создание с нуля) в общих чертах и подсветить интересные решения в этой сфере на текущий момент.
Цели создания, что именно хранится, кто пользуется, в каких условиях, сценарии использования — конечно, все это и много чего еще мы прорабатывали детально, и очень хотели бы поделиться всем-всем, что есть, но тогда статья получилась бы необъятной) Поверхностно коснулись хранимых данных и ролевой модели, можете перечитать еще раз)
Основной проблемой было то, что продукт спустя много итераций, над которыми работали разные студии, превратился во Франкенштейна с запутанной логикой. Собственно, наша основная задача была — привести все к удобной структуре, и, кажется, нам это удалось)
АвторКЕ
Поуважительней, пожалуйста.
Есть такое
Собрать базу знаний - большой дело.
Собрать базу знаний для большой компании - дело огромное.
Собрать базу знаний для большой компании да и еще чтобы смотрелось симпотично и понятная структура была, алё, вы с этой планеты то вообще?
Я дико извиняюсь, а как по этой статье и набору вайфремов понял что она «смотрится симпотно и понятная структура»? У тебя такая сильная эмпатия, что ты между строк ux прочувствовал?
Технониколь - большая компания? Там же меньше 10 тысяч сотрудников
Они 5 лет учились в тибетском монастыре.
Погодите, так ТН же сидит в ЯТрекере, а там есть вики. Зачем лишние сущности?
Что за Вики на ЯТ? Откройте новую дверь в мир плз
Ты не понимаешь, это другое
Где скачать базу? На торрентах?
База сама приходит
На торентах есть все)
Эх, читал и ожидал в конце уже увидеть дизайн, а он только в следующей части. Буду ждать)
Интересный материал!
Вы сделали большую работу, причем очень качественно. Молодцы!
Я не до конца понял, почему нельзя было использовать Ноушн или Конфлюенс
Вот-вот
Конфюенс еще ладно, а вот ноушн вроде не заселхостишь. На моей памяти он лежал как минимум раз.
Скрепы
Уже было свое, вот и решили переделать свое, видимо, а не завязываться на сторонние сервисы.
А деньги, деньги какие?
Сколько стоит аналогичная работа для аналогичного заказчика?
В часах, или в рублях
Как обычно, хулиард + откаты
Берёшь состав команды, умножаешь на средние человеко-часы дизайнеров, проджекта, аналитика итд, умножаешь примерно на 24*22*3(?), ну и там маржу накидывацте процентов 20 естесно. На вскидку я бы назвал до ляма, ближе к 600, если там не было тендерной закупки конечно
Чем это лучше конфлюэнса?
Тут совокупность факторов:
1. В каждом из предлагаемых рынком есть свои недостатки для конкретной цели, которых можно избежать только делая базу под себя.
2. Полная свобода в разработке функций и настройке с учетом специфики.
3. Своя база знаний — это безопаснее. В комментах уже многие про это писали.
4. Тут ещё и интерфейсы удобные, ещё и в фир.стиле компании (покажем в след. статье). Что тоже приятно)
Тем что это инхауз тулза и никто ее не отнимет у них
От нашего дома вашему дому))
жду вторую часть статьи ,хочется увидеть результат
Автору спасибо за достойный и понятный контент, сам считаю что БЗ должна быть в каждом предприятии от малого до большого, это очень хорошая практика управления предприятием, так же это очень большая эффективность в работе, понятно, что от бумажек не уйти. Да кстати сам ТЕХНОНИКОЛЬ в 1 км от моего дома, приятно видеть земляков на VC.RU. Лайк, в избранное и уважение Вам!
А у вас там действительно база знаний (https://ru.wikipedia.org/wiki/%D0%91%D0%B0%D0%B7%D0%B0_%D0%B7%D0%BD%D0%B0%D0%BD%D0%B8%D0%B9)? Прям с правилами вывода новых знаний из существующих, нахождением противоречий? Или базой знаний вы называете набор документов и внутренних инструкций предприятия?
А для тех кто деньги считает и копеечку бережет - рекоммендую BookStack. База знаний на своем сервере. Бесплатно. Не реклама.
кайфовый собакен)
Молодцы, крутой кейс!
какой молодой, позитивный, заряженный коллектив)
А это самописная база знаний или на готовом движке?
Самописная)
Golang + Vue.js
я не видела френдли баз знаний :) обычно это нелинейная куча, на которую ссылаются со словами "в инструкции, которую мы выслали три года назад с ноунейм адреса, который ты никогда не найдешь в почте, на 155 странице написано где скачать форму, непонятно штоле??"
из вашего описания это больше внутреннее медиа, чем олдскульная свалка форм, так?
Не знаю насколько это можно назвать «медиа», но мы постарались сделать максимально удобный инструмент для поиска, хранения и создания знаний)
Это уж точно не свалка форм)
Не так давно анализировал технониколь. Раздел контента был ужасен.
Чего мне не хватило в данном кейсе и чего не делают в большинстве случаев редизайна, так это учёт мнения SEO-специалиста. Контент дело хорошее, но в большинстве случаев источник трафика - поисковые системы.
Если что я в целом про редизайн, как комплекс работ, не только смена картинки.
У нас тут корпоративная база знаний — закрытая, для сотрудников)
Открытую делали вот тут, там по SEO хорошо: https://nav.tn.ru/knowledge-base/
Спасибо за статью. Есть интересные готовые базы знаний которые встраиваются в любую корпоративную 1С, вот например https://knowcorp.ru
Да есть, но тут много нюансов и впервую очередь цена, выше описанная БЗ написана по ТЗ а в случае с 1С придется докупать модули которые не копейки стоят мягко говоря. Сам работаю в учреждении и мы запрашивали 1С БЗ так нам выкатили стоимость в 700 тыс под наши нужды на наш сервер, не оптимизации не обновлений а если все это хотите заключайте договор на обновления и ТО, одним словом выкачивание денег. 1С мягко говоря припухла уже , на рынке много продуктов которые куда легче, дешевле и не нуждаются в ТО и поддержки, это все может делать штатный администратор систем.
Прикольный кейс, жду 2-ую часть, хочется увидеть дизайн)
Зачем вы на первой картинке вы используете логотип twitter?
ахаха, прогуглил новость)
актуальненько обложку сделали)
Очень интересно посмотреть на дизайн и развитие продукта) жаль нельзя скачать и потыкать, может есть демка?
коментарий
А какой редактор текстов вставили?
tinyMCE
Комментарий удален модератором