---
publishYear: 2023
name: Контроль Предписания
title: Мобильное приложение для работы с предписаниями
excerpt: Создали дизайн интерфейса нового мобильного приложения для работы с предписаниями от контролирующих органов.
context: |
Компания [Data Solution](https://datasolution.team) — наш очень старый клиент. Их специализация — IT-решения для автоматизации контролирующих органов (государственных и не только).
Мы уже делали для Data Solution [приложение для работы с государственными реестрами](/portfolio/control-mobile), [редизайн сервиса для управления такими реестрами](/portfolio/control), [интерфейс для лесников](/portfolio/control-forest), [конструктор коммерческих презентаций](/portfolio/data-solution) и множество других проектов.
В этот раз мы создали интерфейс для нового раздела приложения для госконтроля, которое поможет пользователям отчитываться о выполнении предписаний без визитов инспекций и инспекторов.
thumbnail:
src: ~/assets/images/portfolio/cards/control-predpisanie.svg
alt: Собака Павлова • Контроль • Интерфейс мобильного приложения для работы с предписаниями
logo:
src: ~/assets/images/portfolio/control/logo.svg
alt: Контроль • Логотип
link: https://datasolution.team/
image: ~/assets/images/portfolio/control-predpisanie/main.png
imageAlt: Собака Павлова • Контроль • Интерфейс мобильного приложения для работы с предписаниями
tags:
- gos
- ux-design
- ux-outsource
- prof
- mob
- control
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/redesign), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: control-patent
- collection: portfolio
page: control-forest
- collection: portfolio
page: control-mobile
- collection: portfolio
page: trash
- collection: portfolio
page: gormost
outcome:
title: Некоторые цифры
numbers:
- title: В процессе работы
number: "4 итерации"
text: разработки макетов
- title: После запуска
number: "17 комментариев"
text: "и UX-аудит"
- title: Дополнительно
number: "1 иконка приложения"
result:
- src: ~/assets/images/portfolio/figma.svg
text: Покажем из рук в руки и расскажем ещё больше
link: "mailto:we@sobakapav.ru"
budget: 170 000 ₽
time: 3 месяца
review:
text: |
Компанию Собака Павлова мы знаем уже 7 лет. Первое знакомство было у них в офисе. Мы приехали, поработали несколько дней напрямую со всей командой, которая позже вела наш проект. Открыто, без лишних формальностей и строго по делу.
С тех пор мы постоянно сотрудничаем. Презентации, витрины, UX, UI для веб и мобильных приложений... И прежде всего уверенность в результате при передаче высокоуровневой, бизнесовой задачи делают совместную работу максимально полезной для нас и наших заказчиков.
Продолжаем работать!
photo: ~/assets/images/portfolio/control-patent/person.jpg
person: Николай Грачев,
position: управляющий партнер Data Solution
director: Тем, кто вздрагивает, услышав слова «проверка», «нарушение» и «исправить в предусмотренный законом срок», не нужно объяснять, почему приложение для работы с предписаниями должно быть простым, понятным и удобным.
metadata:
canonical: https://sobakapav.ru/portfolio/control-predpisanie
title: Дизайн интерфейсов • Мобильное приложение для работы с предписаниями (кейс)
description: "Создали дизайн интерфейса нового мобильного приложения для работы с предписаниями от контролирующих органов."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/control-predpisanie/badge.png'
width: 1200
height: 630
type: website
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import PhoneMockup from '~/components/widgets/PhoneMockup.astro';
import UniversalSlider from '~/components/common/UniversalSlider.astro'
<TOC>
[Вводные](#anchor1) • [Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Отзыв, цены, сроки](#anchor4)
</TOC>
## <a name="anchor1" />Вводные
Один из продуктов компании — сервис «Контроль», который помогает упростить и автоматизировать взаимодействие с государством, государственными реестрами, проверяющими органими и т.п.
Заказчик пришел к нам за модулем «Предписания» для этого сервиса. Модуль, как ясно из названия, предназначен для работы с предписаниями от контролирующих органов.
> Предписание — требование от Инспектора к контролируемому лицу выполнить какие-то действия для устранения нарушений.
## <a name="anchor2" />Бизнес-задача
Добавить модуль «Предписания» в сервис «Контроль».
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-predpisanie/3.png" />
<PhoneMockup image="/images/portfolio/control-predpisanie/4.png" />
</div>
<em>У вас два невыполненных предписания</em>
## <a name="anchor3" />Дизайн-задача
Создать интерфейс для «Предписаний» и вписать новый модуль в приложение.
1. Проанализировать существующий интерфейс, изучить требования к функционалу и задачам.
2. Продумать архитектуру сервиса и его возможности.
3. Разработать карточку предписания со следующими блоками:
- общие данные по предписанию;
- перечень нарушений.
4. Показать основные сценарии работы со списком предписаний: создание и добавление материалов, отправка на проверку, оценка.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
## <a name="anchor4" />Результат
Заказчик получил макеты интерфейса раздела «Предписания», юзерфлоу взаимодействия пользователя с этим разделом по всем основным сценариям: создание и отправка отчетов, оценка.
Вот как это работает. Инспектор проверяет вашу организацию (aka «контролируемое лицо») на предмет чего-нибудь (несть числа таким проверкам). Находит какое-нибудь нарушение (например, огнетушителя нет на первом этаже). Выписывает предписание: к такому-то числу устранить.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-predpisanie/1.png" />
<PhoneMockup image="/images/portfolio/control-predpisanie/2.png" />
</div>
<em>Бывает и так, что нет у вас никаких предписаний. Но это редкость</em>
В модуле «Предписания» вы видите список всех таких нарушений с дедлайнами и способами устаранения.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-predpisanie/17.png" />
<PhoneMockup image="/images/portfolio/control-predpisanie/18.png" />
</div>
<em>Ваши нарушения</em>
Вы делаете все, что нужно для исправления каждого из нарушений и доказываете это, посылая инспектору подтверждающие материалы: документы, фото или видео, иногда с геометками.
<UniversalSlider count={3}>
<PhoneMockup image="/images/portfolio/control-predpisanie/9.png" />
<PhoneMockup image="/images/portfolio/control-predpisanie/10.png" />
<PhoneMockup image="/images/portfolio/control-predpisanie/11.png" />
<PhoneMockup image="/images/portfolio/control-predpisanie/12.png" />
<PhoneMockup image="/images/portfolio/control-predpisanie/13.png" />
<PhoneMockup image="/images/portfolio/control-predpisanie/14.png" />
</UniversalSlider>
<em>Сценарий «Создание ответа». <a href="/images/portfolio/control-predpisanie/9.png" target="_blank">1</a>, <a href="/images/portfolio/control-predpisanie/10.png" target="_blank">2</a>, <a href="/images/portfolio/control-predpisanie/11.png" target="_blank">3</a>, <a href="/images/portfolio/control-predpisanie/12.png" target="_blank">4</a>, <a href="/images/portfolio/control-predpisanie/13.png" target="_blank">5</a>, <a href="/images/portfolio/control-predpisanie/14.png" target="_blank">6</a>,</em>
Инспектор все проверяет и либо принимает исправление (ура, квест пройден!), либо отправляет вас на новый круг, если что-то не так.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-predpisanie/7.png" />
<PhoneMockup image="/images/portfolio/control-predpisanie/8.png" />
</div>
<em>Приложенные документы</em>
## <a name="anchor5" />Особенности и нюансы процесса
При проектировании интерфейса в ревью всегда принимали участие разработчики сервиса. Все решения мы обсуждали или прямо на звонке или в комментариях к макетам. Это позволяло в пределах одной итерации предлагать и согласовывать варианты, оптимальные как для бизнеса, так и для разработки. Мы быстро вносили корректировки и сразу отбрасывали варианты, не подходящие по техническим причинам.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-predpisanie/5.png" />
<PhoneMockup image="/images/portfolio/control-predpisanie/6.png" />
</div>
<em>Отправили предписание проверку</em>
Уже после запуска раздела провели дополнительный экспертный аудит. Так заказчик получил обратную связь для доработок обновленного интерфейса.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-predpisanie/15.png" />
<PhoneMockup image="/images/portfolio/control-predpisanie/16.png" />
</div>
<em>Инспектор не принимает исправление, посылаем новые доказательства</em>
Когда мы работали над интерфейсом, заказчик попросил обновить иконку приложения. Сделали иконку, адаптировали под различные платформы.
<a href="/images/portfolio/control-predpisanie/0.png" target="_blank"></a>
<em>Иконка</em>
## <a name="anchor6" /> Итог
Новый раздел мобильного приложения для госконтроля упрощает взаимодействие инспектора и контролируемого лица. Перечень нарушений, требования, статус и сроки исправления наглядно представлены в приложении, а отчитаться об устранении нарушений и предоставить подтверждающие материалы можно в несколько кликов.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/control-predpisanie/19.png" />
<PhoneMockup image="/images/portfolio/control-predpisanie/20.png" />
</div>
<em>Пока предписание не отправлено, его можно редактировать. Выполненные предписания.</em>
## <a name="anchor7" />