---
publishYear: 2023
name: Compel
title: Редизайн внутренних цифровых сервисов
excerpt: Спроектировали высокодетализированные чёрно-белые прототипы (wireframes) пользовательского интерфейса по отдельным задачам заказчика.
context: |
  Компания [Компэл](https://www.compel.ru/)  — ведущий поставщик электронных компонентов и модулей для производителей оборудования и электроники. 
  
  Заказчик пришел к нам с тем, чтобы обновить несколько ключевых сервисов, но проект перерос в долгосрочное сотрудничество — уже третий год мы работаем вместе. 
  
  Этот кейс — яркий пример того, как [аутсорсинг дизайн-команды](/services/ux-outsource) может быть выгоднее, гибче и проще в управлении, чем содержание собственного отдела. Вместо формирования штатной команды дизайнеров заказчик несколько лет сотрудничает с нами.
logo:
  src: ~/assets/images/portfolio/compel/logo.png
  alt: Компэл • Логотип
  link: https://www.compel.ru/
image: ~/assets/images/portfolio/compel/main.png
imageAlt: Собака Павлова • Компэл • Редизайн внутренних цифровых сервисов
thumbnail:
  src: ~/assets/images/portfolio/cards/compel.svg
  alt: Собака Павлова • Компэл • Редизайн внутренних цифровых сервисов
tags:
  - it
  - redesign
  - prototype
  - ux-outsource
  - prof
  - compel

relatedPages:
  - text: |
      ### Вам нужен интерфейс?
      #### Заказать дизайн
      Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru) 
      #### Что мы можем сделать?
      [Точечный редизайн](/services/redesign), как в этом кейсе, и [многое другое](/services). 
    collection: services
    page: redesign
  - text: |
      ### Хотите уметь так же?
      Научим создавать хорошие интерфейсы.
    collection: promo
    page: mio
  - collection: promo
    page: uc

relatedPages2:
  - text: |
      ### Похожие проекты
    collection: portfolio
    page: dipol
  - collection: portfolio
    page: elma
  - collection: portfolio
    page: geonaft
  - collection: portfolio
    page: veza
  - collection: portfolio
    page: edms
  - collection: portfolio
    page: amber

outcome:
  title: "Некоторые цифры"
  text1: "К тому дню, как начали этот кейс, мы успели сделать:"
  numbers:
    - number: "16" 
      text: бизнес-сервисов и микросервисов
    - number: "3"
      text: отдельных продукта
    - number: "5" 
      text: файлов дизайн-системы (компоненты, иконки, шрифты, wireframes)
  text2: |
    Макеты? Их не сосчитать. Много. Серьёзно.
    
    Такой объем работы потребовал бы от штатной команды дополнительных ресурсов и найма. В предложенном режиме мы гибко привлекали специалистов по мере необходимости.

result:
  - src: ~/assets/images/portfolio/figma.svg
    text: Покажем из рук в руки и расскажем ещё больше
    link: "mailto:we@sobakapav.ru"
budget: "3 700 000 ₽"
time: "более двух лет"

director: "Cотрудничать с дизайнерами на аутсорсе, как правило, обходится дешевле, чем завести свою UX-команду. А времени и нервов потратите гораздо, гораздо меньше."

metadata:
  canonical: https://sobakapav.ru/portfolio/compel
  title: Дизайн интерфейса • Редизайн внутренних цифровых сервисов
  description: "Спроектировали высокодетализированные чёрно-белые прототипы (wireframes) пользовательского интерфейса по отдельным задачам заказчика."
  robots:
    index: true
    follow: true
  openGraph:
    site_name: Собака Павлова
    images:
      - url: '~/assets/images/portfolio/compel/badge.png'
        width: 1200
        height: 630
    type: website
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';

<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Отзыв, цены, сроки](#anchor4)
</TOC>

## <a name="anchor1" />Бизнес-задача

Сделать сервисы заказчика удобными и понятными — как для внутренних пользователей, так и для внешних. Это ускорит работу, снизит количество ошибок, упростит адаптацию новых сотрудников и улучшит взаимодействие с внешними партнерами.

<a href="/images/portfolio/compel/1.png" target="_blank">![Редизайн внутренних цифровых сервисов | SobakaPav.ru](~/assets/images/portfolio/compel/1.png)</a>
_Первый заказ_

## <a name="anchor2" />Дизайн-задача

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

- Спроектировали интерфейсы для множества сервисов: Управление резервами, Корзина, Условия и способы оплаты, Журнал заказов, Поиск предложений, Вход и Регистрация и др.
- Объединили пользовательский опыт для разных ролей: внешних пользователей, внутренних команд и партнеров.
- Создали дизайн-систему, чтобы привести все интерфейсы к единому стилю и ускорить разработку.
- Провели редизайн существующих интерфейсов для их гармоничной интеграции в общую систему.

<a href="/images/portfolio/compel/2.png" target="_blank">![Редизайн внутренних цифровых сервисов | SobakaPav.ru](~/assets/images/portfolio/compel/2.png)</a>
_Первый заказ развернутый_

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

<a href="/images/portfolio/compel/3.png" target="_blank">![Редизайн внутренних цифровых сервисов | SobakaPav.ru](~/assets/images/portfolio/compel/3.png)</a>
_Повторный заказ_

## <a name="anchor3" />Результат
### Интерфейсы

Сейчас пользователь, заходя в любой из сервисов, не теряется — структура и визуальные паттерны повторяются. Это делает работу быстрее и проще.

<a href="/images/portfolio/compel/4.png" target="_blank">![Редизайн внутренних цифровых сервисов | SobakaPav.ru](~/assets/images/portfolio/compel/4.png)</a>
_Поиск по наименованию_

### Дизайн-система

У заказчика теперь есть стройная дизайн-система. Она помогает и в текущей работе, и при масштабировании.

<a href="/images/portfolio/compel/5.png" target="_blank">![Редизайн внутренних цифровых сервисов | SobakaPav.ru](~/assets/images/portfolio/compel/5.png)</a>
_Поиск по списку. Начальное состояние_

### Усиление команды

Заказчику не пришлось заниматься наймом или онбордингом — мы подключили дизайнеров сразу. Оплата шла только за выполненные задачи, а наш менеджер сам распределял нагрузку. Это позволило заказчику сосредоточиться на бизнесе, а не на управлении дизайнерами.

Без расходов на содержание in-house дизайнеров. Без паузы на поиск. С полным контролем и прозрачностью.

<a href="/images/portfolio/compel/6.png" target="_blank">![Редизайн внутренних цифровых сервисов | SobakaPav.ru](~/assets/images/portfolio/compel/6.png)</a>
_Поиск по списку. Ручное распознавание_

### Давайте посчитаем

Затраты на одного штатного дизайнера в год:
- Зарплата: 120 000 руб./мес. × 12 = 1 440 000 руб.
- Налоги и сборы: ~60 000 руб./мес. × 12 = 720 000 руб.
- Отпуск (оплачиваемый, но без работы): 120 000 руб.
- Больничные: ~60 000 руб.
- Поиск и отбор: 100 000 руб.

Итого на одного дизайнера: ~2 440 000 руб.

Для команды из двух дизайнеров и менеджера — около 6–6,5 млн руб. в год (без учета затрат на замену, ДМС, технику и рабочее место).

Затраты на аутсорсинг: за 2024 год Компэл заплатил нам 3 700 000 рублей. Почти вдвое меньше, чем ушло бы на штатную команду.

<a href="/images/portfolio/compel/7.png" target="_blank">![Редизайн внутренних цифровых сервисов | SobakaPav.ru](~/assets/images/portfolio/compel/7.png)</a>
_Способ получения_

## <a name="anchor4" />А что еще?
### Организация в Figma

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

### Коммуникация

Создали telegram-группу с ветками обсуждений для каждого сервиса. Менеджеры следили за прогрессом, быстро меняли приоритеты и планировали загрузку. Дизайнеры были на связи в рабочее время — правки вносились даже в процессе согласования.

### Процесс

Еженедельные сверки внутри команды позволили:
- держать единый стиль во всех сервисах
- быстро перекидывать задачи между дизайнерами
- снизить вовлечённость заказчика в контроль: мы держали уровень сами

<a href="/images/portfolio/compel/8.png" target="_blank">![Редизайн внутренних цифровых сервисов | SobakaPav.ru](~/assets/images/portfolio/compel/8.png)</a>
_Подсказки по наведению_

## <a name="anchor5" />