Сервис «Руки»

Приложение для Айфона

Рассказывают Маша Булина и Миша Нозик

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

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

Ещё у клиента уже есть готовая база услуг, которую тоже хорошо бы использовать.

К моменту начала работы над приложением уже утверждено общее визуальное решение фирменного стиля. Проектируем задуманные экраны и примеряем на них утверждённый стиль:

Осознаём, что выбранная структура каталога не годится: открываешь категорию «Сантехника» и на тебя смотрят десятки однообразных услуг, из которых каким‑то образом надо выбрать нужную. Но как? Не читать же их все? А ведь со временем услуг станет ещё больше.

Дополнительный хаос вносят нечеловеческие названия услуг типа «Демонтаж сантехники» и «Подключение электроники к водосети». Как обычному человеку понять, что туда входит?

Принимаем внутрибюрошное решение изменить структуру каталога и отредактировать названия услуг.

Тут должна быть фотография, как мы придумывали структуру приложения, глядя на белую доску с наклееными на неё цветными стикерами и стрелочками, нарисованными маркером. Но мы справились без доски.

Придумываем ввести дополнительное разделение услуг по понятным обычному человеку объектам и сразу же пишем нормальные названия:

Было

Сантехника

  • Демонтаж сантехники
  • Демонтаж биде
  • Демонтаж душевой кабинки
  • Герметизация швов ванны
  • Герметизация ванны силиконом
  • Монтаж сантехнического оборудования
  • Обвязка ванны
  • Установка смесителя
  • Замена смесителя
  • Устранение засоров
  • Установка аксессуаров
Стало

Сантехника

Унитаз

  • Установить напольный унитаз
  • Установить подвесной унитаз
  • Демонтировать унитаз
  • Починить запорную арматуру бачка

Смеситель

  • Установить смеситель
  • Починить смеситель
  • Заменить смеситель

Ванна

  • Установить чугунную ванну

Заодно придумываем разделить услуги не только по категориям типа «Сантехника», «Электрика» и «Мебель», «Двери», но и по комнатам: ванной, кухне, прихожей, гостиной и так далее — некоторые люди мыслят не категориями, а комнатами, в которых что‑то нужно сделать. В некоторых категориях объекты и услуги будут дублироваться, но это не страшно.

Гостиная

  • Диван
  • ТВ
  • Стенка, сервант
  • Освещение

Кухня

  • Холодильник
  • Плита
  • Вытяжка
  • Посудомойка

Туалет и ванная

  • Унитаз
  • Раковина
  • Ванна
  • Стиральная машина

Прихожая

  • Входная дверь
  • Шкаф
  • Полки
  • Тумбочка

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

Перерисовываем:

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

Одновременно собираем по просьбе клиента кликабельный прототип, чтобы протестировать поведение пользователей

Принимаемся за оставшиеся вспомогательные экраны:

Одновременно собираем по просьбе клиента кликабельный прототип, чтобы протестировать поведение пользователей

Показываем и утверждаем у клиента вместе с мелкими правками по первым экранам.

Клиент просит придумать, как заказать в приложении сразу несколько услуг за один раз. Придумываем: раз у нас можно заказывать услуги по ремонту как в магазине, то почему бы не быть и корзине? Набираешь в неё установку унитаза, подвеску люстры и сборку шкафа и оформляешь как в интернет‑магазине. Вместе с корзиной нужна и история заказов. Так появляется нижний таб‑бар:

По просьбе клиента придумываем праздник после окончания работы
Перерисовали ручки: теперь они получают звезду, а не отталкивают

Тем временем уже вовсю идёт разработка. Как обычно, применяем дизайнерское управление разработкой: сами передаём разработчикам макеты, утверждаем спецификацию, смотрим вёрстку, пишем замечания, принимаем исправления. Фрагменты рабочей переписки в телеграме:

А вот и ФФФ 

Ближе к дедлайну вместе с разработчиками понимаем, что не успеем реализовать всё, что нарисовано в макетах. Анализируем задачи и предлагаем в первой итерации отказаться от таймера работы мастера, корзины, истории заказов и красивых спецэффектов на экране завершения работы. Отзывы тоже решено сделать попроще.

За неделю или две до пуска готовим описание и скриншоты приложения для Апстора:

В назначенный день приложение уходит на проверку в Апстор.

✸✸✸

Вторая итерация

Задачи: начать принимать оплату банковскими картами, лучше объяснить состав работ у выбранной услуги, мотивировать пользователей включить пуш‑уведомления. А ещё по результатам тестирования и использования приложения стало понятно, что большое количество плиток на главном экране сбивает пользователей с толку, и они начинают думать, что эти плитки — это всё, что умеют делать Руки.

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

На главном экране решаем радикально уменьшить количество цветных плиток и вывести категории в виде списка:

Новый главный экран показал результаты лучше, чем старый.

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

Отправить
Поделиться
Запинить