UX/UI-дизайн платформы для совместной работы и управления знаниями Teamly

Главное о кейсе

Мы разработали платформу, учитывая привычные подходы к работе с документами в Confluence, Notion и Google-Docs. Наши решения делают использование платформы простым для всех пользователей. Мы не ограничились внедрением лучших практик, усилив платформу в соответствии с потребностям наших пользователей. С интуитивным интерфейсом, элементами геймификации и доступностью через десктоп и мобильное приложение, мы создали удобное пространство для эффективной работы с документами и задачами для всей компании.

___________________

We developed the platform, taking into account familiar approaches to document work in Confluence, Notion, and Google-Docs. Our solutions make the platform easy to use for all users. Going beyond the implementation of best practices, we strengthened the platform to meet the needs of our users. With an intuitive interface, gamification elements, and accessibility through both desktop and mobile applications, we've created a convenient space for effective document and task management across the entire company.

Бизнес-задача и ее решение

Ключевая задача заключалась в создании отечественной KMS-платформы, воплощающей лучшие мировые практики в управлении знаниями. Проект включал в себя два основных направления: исследование лучших решений на рынке и тщательную работу с пользовательскими сценариями и задачами.

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

___________________

The primary goal was to create a domestic Knowledge Management System (KMS) platform that embodies the best global practices in knowledge management. The project involved two main directions: researching the best solutions on the market and meticulous work on user scenarios and tasks.

We developed a scalable design system, taking into account the challenges faced by our clients, such as user engagement, seamless transition, and quick access to materials. Currently, TEAMLY provides more than 130 clients with a unified space for the entire information lifecycle: migration and export, creation and formatting, editing and storage, along with tools for working with created materials, such as courses and tests.

Крафт (мастерство), реализация, технические детали

Для обеспечения легкой адаптации к нашей платформе мы придерживались привычных паттернов, анализируя опыт использования Confluence, Notion и Google-документов. Благодаря проведенному бенчмарку мы выделили ключевые решения, которые заслуживают внедрения. После тщательной работы над сценариями использования и внутреннего тестирования мы оптимизировали отдельные аспекты для максимального удобства взаимодействия с системой:

1)Простота навигации:
- Легкость и интуитивность интерфейса, обеспечивающие понятную структуру и навигацию, выражается в наличии привычных решений в верхнем меню, древовидной структуре внутри пространств, личном кабинете и пр.
- Каждого нового пользователя встречает онбординг, помогающий сориентироваться и знакомящий с разделами на платформе.
- У большинства элементов есть интерфейсные подсказки при наведении.

2) Эффективность в выполнении задач:
- Для нас важно было минимизировать количество шагов и времени, которые пользователи затрачивают на выполнение задач.
- Для этого мы использовали блочную верстку внутри редактора, позволив быстро редактировать последовательность и расположение элементов.
- Мы реализовали миграцию данных с других платформ в Управлении аккаунтом в 2 простых шага, при этом позволив пользователям выбирать что именно они хотят перенести.
- AI-ассистент внутри статьи также призван облегчить работу пользователей - он может оформить статью, собрать саммари, написать список задач и т.п.
- Мы ориентировались на создание гибкого инструмента, который пользователь сможет настроить под собственные процессы - например, умная лента позволяет просматривать последние обновление и новые статьи, пользователь может настроить ее под себя.

3) Вовлечение через геймификацию:
- На вовлечение пользователей в работу с материалами работает система реакций - лайки, просмотры, комментарии и закладки.
- А еще мы добавили раздел Популярное - в нем есть рейтинг авторов.

4) Четкость и понятность:
- Мы также ориентировались на понятный “язык” интерфейса, чтоб пользователь быстро понимал, что за инструменты перед ним, как и для чего взаимодействовать с тем или иным разделом.
- Особенно важно было сохранить понятность работы и инструментов в визуальном редакторе, а именно сохранить знакомый вид редакторской панели.

5) Отзывчивость и консистентность интерфейса:
- Разработали и внедрили собственную дизайн-систему, включающую визуальные компоненты и гайдлайны по использованию.
- Мы выработали 5 основных шаблонов и определили правила их компоновки. Благодаря этому дизайнеру не приходится каждый раз с нуля придумывать макет страницы, а верстальщик может собрать типовую страницу без помощи дизайнера.

6) Эстетика и дизайн:
- Нам важно было создать чистый и понятный интерфейс, который не будет отвлекать пользователя от работы над текстом.
- При этом важно было дать все необходимые инструменты для яркого и четкого оформления самих статей.

7) Адаптивность и отзывчивость:
- Доступность контента как на десктопе, так и через мобильное приложение.
- Верстка под разные разрешения без потери функциональности интерфейса.
- Мобильное приложение доступно в Google Play и App Store.

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

___________________

To ensure easy adaptation to our platform, we adhered to familiar patterns, analyzing the usage experience of Confluence, Notion, and Google Docs. Through benchmarking, we identified key solutions worthy of implementation. Following meticulous work on usage scenarios and internal testing, we optimized specific aspects for maximum user convenience:

Navigation Simplicity:

Ease and intuitiveness of the interface, providing clear structure and navigation, are reflected in familiar solutions in the top menu, tree-like structure within spaces, personal profiles, etc.

New users are greeted with onboarding to help them navigate and become acquainted with platform sections.

Most elements feature interface tooltips upon hover.

Task Efficiency:

We prioritized minimizing the steps and time users spend on tasks. To achieve this, we implemented block-based editing within the editor, allowing quick edits to the sequence and placement of elements.

Data migration from other platforms through Account Management was streamlined to two simple steps, with users able to choose what specific data they wish to transfer.

An AI assistant within articles is designed to ease user tasks, capable of formatting articles, creating summaries, writing to-do lists, etc.

Our focus was on creating a flexible tool that users can customize to fit their processes, such as the smart feed that allows users to view the latest updates and new articles, with customization options.

Engagement through Gamification:

A reaction system involving likes, views, comments, and bookmarks enhances user engagement with materials.

Additionally, we introduced a "Popular" section featuring author rankings.

Clarity and Comprehensibility:

We also focused on a user-friendly interface language to ensure users quickly understand the tools and how to interact with different sections.

Preserving the clarity of operations and tools in the visual editor, particularly maintaining a familiar appearance for the editing panel, was of utmost importance.

Responsiveness and Interface Consistency:

Developed and implemented our proprietary design system, encompassing visual components, a code library, and guidelines for usage.

We established five primary templates and defined rules for their composition, reducing the designer's need to create layouts from scratch and enabling the developer to assemble standard pages without designer assistance.

Aesthetics and Design:

Our goal was to create a clean and user-friendly interface that doesn't distract users from working on text.

It was crucial to provide all necessary tools for vibrant and clear formatting of articles.

Adaptability and Responsiveness:

Content accessibility on both desktop and through the mobile application.

Adaptable layout for various resolutions without losing interface functionality.

The mobile application is available on Google Play and the App Store.

Скриншоты