Дизайн рабочего места оператора

Для некоторых риэлторов и сотрудников банка сайт Росреестра — полноценное рабочее место. Они отправляют по сто заявлений в день в федеральную службу, и каждый раз им приходится продираться через сложный интерфейс.

Разработали интерфейс (прототипы и дизайн) профессионального сервиса для работы с заявлениями в Росреестр.
Контекст
Результат
~ 1 200 000 ₽
Бюджет
2017
На старт
На старт
Сделки с недвижимостью нужно регистрировать в Росреестре. Подать заявление можно прямо на сайте: интерфейс выглядит вот так.
Сделки с недвижимостью нужно регистрировать в Росреестре. Подать заявление можно прямо на сайте: интерфейс выглядит вот так.
Как было. Регистрация недвижимости.
Пользователи тратят много времени на оформление заявлений. Люди ошибаются, а система их не поправляет.
Нельзя отправить документы пакетом, только по одному. Нельзя отслеживать состояние заявлений.
Интерфейс далек от совершенства. И с этим можно смириться, если пользоваться им раз в год. А если нужно подавать по сто заявлений в день? Цифра не гипотетическая, это реальность для риелторов и сотрудников банков. Они используют сайт Росреестра как профессиональный инструмент. И этот инструмент неудобен.
Интерфейс далек от совершенства. И с этим можно смириться, если пользоваться им раз в год. А если нужно подавать по сто заявлений в день? Цифра не гипотетическая, это реальность для риелторов и сотрудников банков. Они используют сайт Росреестра как профессиональный инструмент. И этот инструмент неудобен.
Наш заказчик решил исправить эту ситуацию и разработать профессиональный сервис для работы с заявлениями в Росреестр.
Наш заказчик решил исправить эту ситуацию и разработать профессиональный сервис для работы с заявлениями в Росреестр.
Наша задача
Наша задача
Разработать прототипы и дизайн продукта, который значительно упростит процедуру работы с заявлениями. Как это сделать? Взять и сделать. Есть план, есть процесс, опыт, руки и головы.
PDF, 267 КБ
Позволим себе немного лирики. Почему вот это «взять и сделать» в одном случае приводит к результату, который, скажем мягко, далек от совершенства, а в другом — четко соответствует и требованиям заказчика, и представлениям пользователей о прекрасном?
Позволим себе немного лирики. Почему вот это «взять и сделать» в одном случае приводит к результату, который, скажем мягко, далек от совершенства, а в другом — четко соответствует и требованиям заказчика, и представлениям пользователей о прекрасном?
Секрет прост. Половина успеха зависит от заказчика. И здесь нам повезло.
Секрет прост. Половина успеха зависит от заказчика. И здесь нам повезло.
Идеальный заказчик и идеальное ТЗ
Идеальный заказчик и идеальное ТЗ
  • заместитель генерального директора;
  • директор по развитию бизнеса;
  • директор по инфраструктуре;
  • технический директор;
  • директор по производству.
Со стороны заказчика в проекте принимали участие пять человек:
Все пятеро участвовали во всех созвонах, презентациях и обсуждениях. Все решения принимали за десять минут. Если в команде возникали разногласия, проводили голосование — тоже сразу и не подвергая сомнению решения большинства.
Со стороны заказчика в проекте принимали участие пять человек:
  • заместитель генерального директора;
  • директор по развитию бизнеса;
  • директор по инфраструктуре;
  • технический директор;
  • директор по производству.
Все пятеро участвовали во всех созвонах, презентациях и обсуждениях. Все решения принимали за десять минут. Если в команде возникали разногласия, проводили голосование — тоже сразу и не подвергая сомнению решения большинства.
Когда голоса делились два на два, шел торг за решающий голос: «в прошлый раз я за тебя голосовал, теперь ты за меня». В шутку, конечно.
Когда голоса делились два на два, шел торг за решающий голос: «в прошлый раз я за тебя голосовал, теперь ты за меня». В шутку, конечно.
Идеальное ТЗ
Эдуард
Эдуард
Понятно, что техзаданием дело не ограничивалось. У нас был пользователь-эксперт, который работает с сайтом Росреестра в том самом режиме — «сто заявлений в день». Быстро найти нескольких респондентов не удалось, все-таки продукт профессиональный и узкий. Но один — больше нуля.
Понятно, что техзаданием дело не ограничивалось. У нас был пользователь-эксперт, который работает с сайтом Росреестра в том самом режиме — «сто заявлений в день». Быстро найти нескольких респондентов не удалось, все-таки продукт профессиональный и узкий. Но один — больше нуля.
Эдуард показал нам, как он работает с сайтом Росреестра. Он создает шаблоны MS Word и оттуда копирует информацию в заявления. Это натолкнуло нас на мысль — предусмотреть возможность создания шаблонов и копирования информации из готового заявления в новое.
Эдуард показал нам, как он работает с сайтом Росреестра. Он создает шаблоны MS Word и оттуда копирует информацию в заявления. Это натолкнуло нас на мысль — предусмотреть возможность создания шаблонов и копирования информации из готового заявления в новое.
Когда мы сделали две трети прототипов, провели тестирование. Эдуард остался доволен результатом: «Если все это будет реально работать, это будет очень-очень круто и значительно облегчит мне жизнь!» (цитата по памяти).
Google Docs
Процесс
Процесс
Упрощенный план действия
Выглядит слишком просто? Погодите. У нас во всей этой истории участвовало семь человек:
  • менеджер проекта;
  • аналитик-социолог;
  • ведущий проектировщик;
  • проектировщик;
  • три графических дизайнера.
Как вы видите на плане, дизайн начался раньше, чем закончилось проектирование. В какой-то момент на проекте одновременно работали два проектировщика и три дизайнера.
Выглядит слишком просто? Погодите. У нас во всей этой истории участвовало семь человек:
  • менеджер проекта;
  • аналитик-социолог;
  • ведущий проектировщик;
  • проектировщик;
  • три графических дизайнера.
Как вы видите на плане, дизайн начался раньше, чем закончилось проектирование. В какой-то момент на проекте одновременно работали два проектировщика и три дизайнера.
Проектировщики работали параллельно и независимо — каждый занимался своим разделом. При этом удалось сохранить согласованность данных в интерфейсных решениях.
Проектировщики работали параллельно и независимо — каждый занимался своим разделом. При этом удалось сохранить согласованность данных в интерфейсных решениях.
Менеджер дирижировал этим оркестром, а заказчик — с удовольствием похвалим его еще раз — понимал и принимал работу поэтапно.
Менеджер дирижировал этим оркестром, а заказчик — с удовольствием похвалим его еще раз — понимал и принимал работу поэтапно.
А где картинки?
А где картинки?
Сейчас, сейчас будут. Итак, сразу после общения с Эдуардом мы сделали структуру интерфейса на примере ключевых страниц.
  • Дашборд (он же — главная страница).
  • Список заявлений.
  • Сценарий подачи одного из типов заявления.
PDF, 16 МБ
Все самое вкусное, как водится, в деталях
Дашборд | sobakapav.ru
Нелинейное заполнение
Нелинейное заполнение
Бывает, и довольно часто, что не все документы и данные, необходимые для заполнения заявления, есть сразу. Но что-то есть.
Бывает, и довольно часто, что не все документы и данные, необходимые для заполнения заявления, есть сразу. Но что-то есть.
Этап создания заявления | sobakapav.ru
Мы разбили создание заявления на несколько шагов — в зависимости от типа заявления. Пользователь может переходить между этими шагами в любом порядке и заполнять только те поля, для которых данные уже есть.
Мы разбили создание заявления на несколько шагов — в зависимости от типа заявления. Пользователь может переходить между этими шагами в любом порядке и заполнять только те поля, для которых данные уже есть.
А еще — заполнять шаг данными из предыдущих заявлений.
А еще — заполнять шаг данными из предыдущих заявлений.
Проверка
Проверка
После создания заявления предусмотрели дополнительную проверку всех введенных данных. Незаполненные поля или неправильно введенные данные подсвечиваются красным цветом. Система не дает отправить заявление с ошибками.
После создания заявления предусмотрели дополнительную проверку всех введенных данных. Незаполненные поля или неправильно введенные данные подсвечиваются красным цветом. Система не дает отправить заявление с ошибками.
Все изменения, исправления, дополнения можно сделать прямо на странице проверки, не надо возвращаться назад и прыгать по шагам.
Все изменения, исправления, дополнения можно сделать прямо на странице проверки, не надо возвращаться назад и прыгать по шагам.
Последний этап созданий заявления на государственную регистрацию | sobakapav.ru
Все предусмотреть невозможно
Все предусмотреть невозможно
В середине работы оказалось, что для каждого заявителя (не пользователя, а именно заявителя!) требуется личная электронная цифровая подпись. А если этой подписи нет, ее нужно создать, и не где-то там, а прямо в продукте.
В середине работы оказалось, что для каждого заявителя (не пользователя, а именно заявителя!) требуется личная электронная цифровая подпись. А если этой подписи нет, ее нужно создать, и не где-то там, а прямо в продукте.
Создание электронной подписи | sobakapav.ru
Теперь сделаем это красиво
Теперь сделаем это красиво
Задачка-то сложная. Как представить числа и таблицы, чтобы они не выглядели скучно? Мы сделали так.
  1. Собрали требования к дизайну и составили тестовое задание.
  2. Разместили объявление на freelance.ru, выбрали там двух претендентов и пригласили еще одного знакомого дизайнера.
  3. Заплатили всем дизайнерам за тестовое задание
Все три варианта предложили заказчику. Задачка-то сложная. Как представить числа и таблицы, чтобы они не выглядели скучно?
Задачка-то сложная. Как представить числа и таблицы, чтобы они не выглядели скучно? Мы сделали так.
  1. Собрали требования к дизайну и составили тестовое задание.
  2. Разместили объявление на freelance.ru, выбрали там двух претендентов и пригласили еще одного знакомого дизайнера.
  3. Заплатили всем дизайнерам за тестовое задание
Все три варианта предложили заказчику.
Первый концепт
Первый концепт дашборда | sobakapav.ru
Оттенки серого — не лучшее решение.
Оттенки серого — не лучшее решение.
Второй концепт
Второй концепт дашборда | sobakapav.ru
Смотрите, здесь дизайнер раскрасил слово «Согласовано» в столбце «Статус». Казалось бы мелочь, но именно из таких мелочей складывается работа дизайнера над сложным прототипом.
Смотрите, здесь дизайнер раскрасил слово «Согласовано» в столбце «Статус». Казалось бы мелочь, но именно из таких мелочей складывается работа дизайнера над сложным прототипом.
Третий концепт
Nретий концепт дашборда, понравившийся заказчику | sobakapav.ru
Заказчик выбрал третий вариант. С оговоркой — только не розовый!
Про работу с дизайнерами, кстати, нам есть что рассказать.
  1. В задании был указан стоп-цвет — красный. Как вы видели, третий вариант — ярко-розовый. Почему? Аргумент простой: розовый — это не красный. Ругаться не стали, попросили поменять.
  2. Объем работы был большой, и менеджер постоянно созванивался с дизайнером. Но вот что интересно. Менеджер расшаривал экран и пояснял прототипы. Дизайнер отвечал письменно в чате. Без камеры и микрофона.
  3. Без ошибок не бывает. Работу дизайнера мы принимали по картинкам. Когда приняли работу и получили исходники — обнаружили полный бардак. У дизайнера отсутствовала техническая культура работы с файлами, и нам пришлось вносить правки в уже согласованную и оплаченную работу дизайнера своими силами. Проектировщик в буквальном смысле ночевал на работе — не успел на метро.
  4. И все-таки респект дизайнеру. В процессе работы он ничего не потерял — ни одного элемента. Это редкость, правда.
Заказчик выбрал третий вариант. С оговоркой — только не розовый!
Про работу с дизайнерами, кстати, нам есть что рассказать.
  1. В задании был указан стоп-цвет — красный. Как вы видели, третий вариант — ярко-розовый. Почему? Аргумент простой: розовый — это не красный. Ругаться не стали, попросили поменять.
  2. Объем работы был большой, и менеджер постоянно созванивался с дизайнером. Но вот что интересно. Менеджер расшаривал экран и пояснял прототипы. Дизайнер отвечал письменно в чате. Без камеры и микрофона.
  3. Без ошибок не бывает. Работу дизайнера мы принимали по картинкам. Когда приняли работу и получили исходники — обнаружили полный бардак. У дизайнера отсутствовала техническая культура работы с файлами, и нам пришлось вносить правки в уже согласованную и оплаченную работу дизайнера своими силами. Проектировщик в буквальном смысле ночевал на работе — не успел на метро.
  4. И все-таки респект дизайнеру. В процессе работы он ничего не потерял — ни одного элемента. Это редкость, правда.
Финальные макеты
Финальные макеты
Дело за малым. «Натянуть» дизайн на все прототипы. Здесь нет места для креатива, а в глазах рябит от таблиц. Работа для зрелого и очень внимательного (если не сказать дотошного) дизайнера.
Дело за малым. «Натянуть» дизайн на все прототипы. Здесь нет места для креатива, а в глазах рябит от таблиц. Работа для зрелого и очень внимательного (если не сказать дотошного) дизайнера.
Чтобы не потонуть в сотнях и тысячах заявлений, нужна фильтрация и поиск.
Экран заявлений с добавленными поиском и фильтрацией | sobakapav.ru
В сервисе предусмотрена проверка заявлений руководителем. Если что-то не так, то начальник завернет заявку на переделку.
В сервисе предусмотрена проверка заявлений руководителем. Если что-то не так, то начальник завернет заявку на переделку.
Комментарий руководителя к не до конца заполненному заявлению.




Комментарий руководителя в неполном зявлении | sobakapav.ru
При создании заявления можно заполнить поля данными из предыдущего документа.
При создании заявления можно заполнить поля данными из предыдущего документа.
Создание заявлений разбито на шаги, чтобы не вываливать на пользователя сразу все поля и формы.
Один из шагов создания заявления | sobakapav.ru
Результат
Результат
Картинки вы видели. Прототип — по ссылке. Но мы оцениваем результат по другим критериям.
  1. В рамках авторского сопровождения не было ни одного вопроса, решение которого заняло у нас больше пяти минут. Это говорит и о профессионализме разработчика, и о качестве прототипов.
  2. Проект закончен точно в срок. Еще раз. Проект закончен точно в срок.
  3. И главное: сервис разработан в точности по нашим прототипам.
Картинки вы видели. Прототип — по ссылке. Но мы оцениваем результат по другим критериям.
  1. В рамках авторского сопровождения не было ни одного вопроса, решение которого заняло у нас больше пяти минут. Это говорит и о профессионализме разработчика, и о качестве прототипов.
  2. Проект закончен точно в срок. Еще раз. Проект закончен точно в срок.
  3. И главное: сервис разработан в точности по нашим прототипам.
~ 1 200 000 ₽
Бюджет
Достигнутые результаты оцениваю на 4+, возможно, потому что по окончании работ у меня сложилось ощущение, что я бы смог справиться и без вас. Но это скорее профессиональная деформация плюс завышенные ожидания лично мои. Результаты практически применимы на 100%. Порекомендовать вас могу друзьям на UX.
Алексей Макаров
Заместитель ген. директора

Профессиональный заказчик — профессиональный результат. Что тут еще скажешь?

Результат
Made on
Tilda