---
updateDate: 2026-02-10T00:00:00Z
publishDate: 2024-07-24
publishYear: 2016
name: Otvet
title: Дизайн интерфейса корпоративного мессенджера
excerpt: Создали дизайн мессенджера с дополнительными функциями — веб-версию и мобильные приложения.
context: У заказчика было множество идей, как превратить мессенджер в полноценный инструмент командной работы. Очевидный риск — слишком усложнить продукт, напичкав его разрозненными функциями.
logo:
src: ~/assets/images/portfolio/otvet/logo.png
alt: Otvet logo
noCard: true
image: ~/assets/images/portfolio/otvet/otvet.jpg
imageAlt: Дизайн интерфейса корпоративного мессенджера
thumbnail:
src: ~/assets/images/portfolio/cards/otvet.svg
alt: Собака Павлова • Ответ • Создали дизайн мессенджера
tags:
- it
- ux-design
- mass
- mob
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн](/ux-design) и [продуктовые исследования](/ux-researches), независимо или [на аутсорсе](/ux-outstaff).
collection: services
page: redesign
- text: |
### Наша экспертиза
400+ интерфейсных проектов и более [140 проектных кейсов](https://sobakapav.ru/portfolio).
### Наши статьи
collection: post
page: work-with-ux-contractors
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: anggell-2025
- collection: portfolio
page: compel
- collection: portfolio
page: hyperus
- collection: portfolio
page: elma
- collection: portfolio
page: edms
- collection: portfolio
page: amber
result:
-
text: результат
src: ~/assets/images/portfolio/AppStore.jpg
link: https://itunes.apple.com/ru/app/%D0%BE%D1%82%D0%B2%D0%B5%D1%82/id1043180890?mt=8
budget: ~ 1 600 000 ₽
review:
text: Результат превзошел ожидания. Мы не просто спроектировали продукт, который хотели. В ходе проектирования мы продумали очень многие вещи, многое узнали о собственном продукте и довели это до ума.
photo: ~/assets/images/portfolio/otvet/person.png
person: Илья Лазарев,
position: руководитель проекта
director: Приложения разработаны по нашем дизайну.
metadata:
canonical: https://sobakapav.ru/portfolio/otvet
title: Интерфейс для бизнеса • Дизайн корпоративного мессенджера (практический кейс)
description: "Разработали UX-дизайн мессенджера с функциями таск-менеджера, в котором сообщения можно превращать в задачи. В двух версиях: мобильное приложение и для десктопа"
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/otvet/otvet.jpg'
width: 1262
height: 960
---
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Плюсы и минусы](#anchor3) • [UX-исследование](#anchor4) • [Дизайн интерфейса](#anchor5) • [Веб-версия](#anchor6) • [Мобильная версия](#anchor7) • [Результат](#anchor8) • [Отзыв, цены, сроки](#anchor9)
</TOC>
## <a name="anchor1" />Бизнес-задача
«Ответ» — мессенджер для корпоративных коммуникаций с акцентом на дополнительные возможности, которых не хватает в мессенджерах массовых. В первую очередь речь идет про работу с мелкими поручениями, которые легко забыть и для которых таск-менеджер слишком громоздок.
_Скриншот с промостраницы компании «Ответ»_
## <a name="anchor2" />Дизайн-задача
У заказчика было достаточно четкое видение продукта. А наша задача в общем виде формулировалась тривиально: нужны прототипы веб-версии и мобильных приложений. Традиционно мы оценили плюсы и минусы.
## <a name="anchor3" />Плюсы и минусы
>**+ Есть команда**
>Сильные разработчики и, главное, возможность общаться с ними столько, сколько нужно.
>**+ Есть продукт**
>К началу нашего сотрудничества существовала тестовая версия мессенджера.
>**- Большие планы**
>Деньги есть, хотя и не много. А вот ресурсов разработки — почти нет.
>**- Нет цельности**
>Продукт строился «от функций», а это далеко не лучший способ сделать удобный интерфейс.
Ситуация типовая, задача посильная. Успех зависит от эффективности взаимодействия с заказчиком. Проще говоря, от того, сможем ли мы стать на время проекта частью команды «Ответа». Спойлер: смогли и даже не особо этому удивились.
Про совместную работу мы написали [статью на Хабр](https://habrahabr.ru/company/sobakapavlova/blog/333774/). Здесь же отметим основные этапы и расскажем о результатах.
## <a name="anchor4" />UX-исследование
Отталкивались от видения заказчика, тестовой версии мессенджера и списка функций, которые «хорошо было бы реализовать». Это хорошие вводные, но недостаточные для начала проектирования.
_Новый мессенджер объединяет в себе функции таск-менеджера и социальной сети_
_Мы провели четыре интервью с потенциальными пользователями. Не исследование, нет. Разговоры были нужны, чтобы погрузиться в контекст и сверить видение заказчика с реальностью. И заодно прикинуть, чем мы рискуем_
Затем прошлись по функциям (реализованным и запланированным), обсудили с заказчиком, подумали про контекст и составили сценарии. Ну то есть пришли к более-менее стандартной постановке на проектирование.
_Функции приложения появились только после описания жизненных ситуаций_
## <a name="anchor5" />Дизайн интерфейса
Работали в четыре руки. Один проектировщик занимался веб-версией, другой — мобильными приложениями.
### <a name="anchor6" />Веб-версия
Глупо заниматься изобретением велосипеда, особенно когда дело касается профессионального интерфейса. Мы взяли за основу привычное для пользователей того же Slack разделение рабочей области на три колонки и сосредоточились на функциональных особенностях «Ответа».
_Прототип веб-версии_
Напомним, одно из важных отличий этого мессенджера — работа с задачами. Это не «приятный бонус», это базовая возможность продукта.
Левый столбец традиционно оставили под список чатов и контакты, задачи вынесли в правую часть экрана. Центральная область — основное рабочее пространство. Сейчас такое деление кажется очевидным, но на самом деле были и другие варианты. Например, полная интеграция обычных чатов с чатами по задачам или работа с задачами в модальном окне. Мы их отбросили как менее наглядные и более запутанные.
_Еще одна фишка — иерархия пользователей. Это не нужно в малых группах, но принципиально в бизнесе_
Самым сложным оказалось добиться цельности предстающей перед глазами пользователя картинки. Слишком много сущностей, чатов, команд, уведомлений, лейблов, статусов, способов сортировки.
_Внимательно проработали типографику. У каждого блока есть заголовок определенного кегля. Пользователю будет легко понять, что с какой сущностью он работает_
Наконец, нужно было обсудить и нарисовать (а потом еще раз обсудить и перерисовать) поведение отдельных интерфейсных элементов и содержание модальных окон.
_Разработчикам отдаем UI-Kit, где описаны состояния элементов_
Заказчик решил отказаться от разработки веб-версии и сосредоточился только на мобильной версии.
### <a name="anchor7" />Мобильная версия
Параллельно шла работа над мобильной версией. В основе — все те же сценарии и все те же функции. Визуально решения отличаются, но дело не в цвете плашек, конечно, а в контексте использования.
_Мы снова опирались на привычные пользователю решения, но уже мобильные, а не десктопные_
Как и с веб-версией, углублялись в детали. Смотрите, как здорово получилось!
А нет, не смотрите. Заказчик попросил нас пока что не показывать все подробности.
Напоследок мы предложили новое концептуальное решение мобильной версии и отрисовали несколько экранов.
_Справа — наш концепт, слева — готовое приложение на Google play_
## <a name="anchor8" />Результат
Лучший из возможных — мобильное приложение разработано по нашим прототипам для ios и android. Заказчик решил отказаться от разработки веб-версии и сосредоточился только на мобильной версии.
## <a name="anchor9" />