Привет, Хабр! Я Дмитрий Сыровнев, руководитель команды мобильного приложения «Х5 Недвижимость». Когда я рассказываю, чем я занимаюсь, то люди задаются вопросом: где Х5 Group, а где, собственно, строительство и недвижимость?  Отвечаю: X5 Group – это не только магазины «Перекрёсток» и «Пятёрочка», но и транспорт, импорт, а также стройка и недвижимость.

Задача моей команды – помогать коллегам более эффективно управлять стройкой распределительных центров и других крупных объектов. Есть две ключевые группы пользователей нашего мобильного приложения – это инженеры стройконтроля и менеджмент. Моя история будет про то, как мы сделали так, чтобы нашим приложением эта группа людей пользовалась с удовольствием, а не под административным прессингом. 

Начну с того, что приложение у нас кросс-платформенное: Android, iOS и Web. Идея распределения была следующей: в полях работают на планшетах с Android, топ-менеджмент – на iPad, а тем, кому не достались устройства, открывают приложение на компьютере. В плане технологий для нашего приложения мы выбрали Python & Flutter.  

Оффтоп ремарка: мобильное приложение «Х5 Недвижимость» – первое приложение на Flutter в Х5 Group, и у коллег было опасение, что могут быть проблемы с производительностью и вебом. Но, благодаря качеству разработки, этих проблем избежать удалось. 

Часть 1. Мелодраматичная – Выпуск MVP

Почти полгода мы делали MVP и показывали приложение только с экранов своих устройств. Коллегам из бизнеса нравилось, но хотелось уже нажимать на кнопочки. В рамках MVP мы сделали несколько вкладок:

  • Авторизация: вкладка для входа в приложение

  • Общие сведения о проекте: ключевые данные

  • Команда проекта: возможность создавать команду проекта из сотрудников дирекции по недвижимости

  • Фотографии: возможность делать фотографии с объектов стройки

  • Рабочие и механизмы: ввод данных по количеству рабочих и специальных строительных машин

  • Риски: управление рисками проектов 

  • Объёмы: работа со строительными объёмами проекта (смета) 

  • Штрафы: управление штрафными санкциями по отношению к подрядчикам

  • Отчёты: формирование и работа с регулярными отчётами

Коллегам из офиса (из дирекции по недвижимости) функциональность и интерфейс понравились, но сотрудники в полях приложение к тому моменту ещё не видели…

Самый большой мой страх заключался в том, что сотрудники в полях скажут: «Ок, мы будем им пользоваться», а про себя подумают: «Опять офис что-то придумал, а мы продолжим всё делать по старинке, как привыкли». 

Часть 2. Драматичная – Обратная связь

Когда приложение рассчитано на внутреннюю и ограниченную аудиторию, особенно важен диалог с заказчиком и конечными пользователями. Поясню: для большого приложения на широкую аудиторию так или иначе UX – это компромисс. В небольшом приложении для сотрудников надо услышать конкретных «Леонида» и «Сергея».

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

После недели использования приложения на объекте мы выехали в поле, чтобы понаблюдать, как сотрудники используют приложение и получить свою порцию обратной связи. И мы её получили.

Если совсем обобщать, то все претензии можно разделить на два блока:

  • неожиданные сценарии работы с приложением;

  • цвет, название, размещение кнопок и графиков не подходит.

Мы ожидали услышать всё, что угодно, но только не это. Оказалось, что цвета кнопок «детские». Цитата: “Цветовая гамма не устраивает, слишком красочно и «по-детски» для стройки. Нужно сделать более серой, суровой и тусклой. Цвета могут быть чуть похожи, главное – уйти от ярких красок к более строгим».

И вот ещё отзыв: «Пиканиски* не похожи на пиканиски».

(*как мы сами позже узнали, «пиканиска» – это обобщённое название подъёмного оборудования для погрузо-разгрузочных работ; слово стало нарицательным, произошло от названия финского бренда Pekkaniska).

Ну и, вдобавок ко всему, фотографии не загружаются, и вообще (цитата): «Мы строители, а не программисты»

Наше решение: Мы подумали, что несмотря на требование сделать цвета более суровыми, для строителей ничто человеческое не чуждо, и поэтому яркие цвета оставить стоит. Но при этом мы сделали две темы на выбор – «детскую» и «суровую».

На вкладке «Фотографии» у нас было требование установить проверки, что фотография уникальна, сегодняшняя и загружена вовремя. Проверки в основном были завязаны на метаданные фотографии. После использования оказалось, что сотрудники часто делают фотографии на свой телефон, а потом через мессенджер отправляют их на планшет. При отправке через мессенджер все данные о фотографии чистятся и по факту не проходят проверку.

Наше решение: Мы сообщили пользователям, как работает данный сценарий и создали для подобных вопросов страницу FAQ. Наличие которой дало возможность сотрудникам без обращения в поддержку разбираться, как работает тот или иной механизм приложения, даже в режиме offline.

Мда… Похоже, что мы были очень далеки от понимания того, кто наш пользователь несмотря на то, что формально все бизнес-требования мы выполнили.

В целом можно сказать, что большинство замечаний не являлись критичными с точки зрения требований бизнеса, но для того, чтобы планшет с приложением не пылился в столе, это было важно услышать. 

Часть 3. Комедийная – Предвосхищение ожиданий

Я решил, что важным шагом к тому, чтобы сделать приложение более клиентоориентированным, будет применение популярного метода дизайн-мышления – «Персона». Но не с коллегами, которые формируют требования, как это обычно происходит, а с командой разработки. Идея была в том, чтобы, когда коллеги разрабатывали тот или иной функционал, они не просто писали очередной код, а задумались о конкретном образе пользователя. Так мы вместе с ними создали нашего персонажа, олицетворяющего обобщённого пользователя, по имени «Игорь»:

«Игорь» обладал следующими характеристиками:

 Идеи команды, чтобы пользователю было комфортно:

Такой подход имел долгосрочный эффект, так как он строился на эмпатии к пользователю, к которому мы теперь кроме как «Игорь» не обращались.

Одно из частых негодований пользователей любых приложений связано с тем, что вкладка очень долго загружается. В нашем приложении такой вкладкой была смета – объёмный Excel-файл, который парсится.

Наше решение: Мы поставили лоадер с мыслью об «Игоре»:

И это сработало! У «Игоря» больше не было негатива от ожидания сметы настолько, что, когда мы за счёт рефакторинга ускорили работу страницы, коллеги попросили её замедлить, чтобы лоадер присутствовал на экране какое-то время.

Ещё одно важное требование к приложению, которое отражается на работе почти всех вкладок – это работа в режиме офлайн и уведомление пользователей. С одной стороны, сотрудникам в полях необходимо иметь возможность использовать приложение без интернета, т. к. для строек отсутствие связи – это обычное дело. С другой стороны, бизнес просит сделать так, чтобы несколько раз в день мы напоминали инженеру стройконтроля, что он должен сделать фотографии и заполнить данные по объекту.

Для решения этой задачи мы завели локальные уведомления, которые отправляются пользователю из приложения без интернета. И ещё в админпанели Django сделали возможность отправки смс с заданным или произвольным текстом тому или иному сотруднику, чтобы он в любом случае мог получить напоминание о задачах.

Часть 4. Кульминация – Проверка отношений

Проверка того, насколько ваши отношения крепки и любовь настоящая, происходит в сложных и непростых условиях. Для нас это была миграция (и не та, о которой, возможно, вы сразу подумали – в Грузию или Казахстан), а внутри компании с вендорского облачного решения на собственное.

Миграция нашего приложения заняла около 3-х месяцев и, к сожалению, за это время регулярно возникали проблемы с работоспособностью приложения и потерей данных. Но к этому времени у нас уже сложились партнёрские и доверительные отношения с пользователями. Внимание к деталям и попытки услышать пользователя на этапе активной разработки позволили максимально безболезненно пройти миграцию, и теперь уже сами пользователи выступали нашими адвокатами.

Часть 5. Эпилог

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

Хочу поделиться с вами своим чек-листом, родившимся методом проб и ошибок, который может помочь сделать ваше приложение таким, каким его хочет видеть ваш пользователь (ну или максимально близким к этому):

  • Вы чётко представляете цели и задачи приложения.

  • Вы поддерживаете идею, что приложение должно соответствовать современным требованиям UX/UI.

  • Вы знаете своих пользователей, т. е. не только то, что вам сказал заказчик в бизнес-требованиях, но и мнение/взгляды конечных пользователей.

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

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

  • Вы предлагаете, а лучше проактивно решаете проблему, которая для заказчика не очевидна или добавляете фичу, о которой вас пока не просили, но вы уверены в ней. Убрать её быстро всегда можно, а если покажете на демо, то бизнес может и поддержать. В итоге конечный пользователь будет вам признателен. 

  • Вы настроили уведомления об ошибках/ограничениях для пользователя, и он сможет понять, почему в приложении доступен/не доступен тот или иной функционал.

  • У вас налажен диалог с пользователями через посредников.

 Буду рад, если мой опыт и опыт моей команды окажется кому-то полезен.

Комментарии (4)


  1. nnazarov
    22.12.2022 17:19

    Круто, не знал, что в X5 на flutter пишут. Сложно было принять решение попробовать новый фреймворк?


    1. DSyrovnev Автор
      22.12.2022 17:35

      Мы первое приложение) у нас требования бизнеса хорошо ложись в этот фреймворк, поэтому принять решение было не сложно, но коллег поубеждать пришлось


  1. Vorchun
    23.12.2022 11:04
    +1

    Классный кейс! Очень откликается - прошли примерно такое же. Только персонажа не отрисовали, а в целом обсудили. Надо сделать красиво, как у вас.

    Но мы выбрали RN. По той причине, что внутренние системы на фронте используют React + Ant Design


  1. Nata_lya
    24.12.2022 13:07

    Дима, спасибо за прекрасную статью! Читала с удовольствием! Первопроходцы! Процветания вашему приложению! Только 1 вопрос (даже с учетом того, что это все же проект): «А jobs to be done” проводили? И если да, то какие результаты были? Все же не очень поняла, что по поводу offline режимов решили?