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

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

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

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

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

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

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

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

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

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

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

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

Было

Сантехника

  • Демонтаж сантехники

  • Демонтаж биде

  • Демонтаж душевой кабинки

  • Герметизация швов ванны

  • Герметизация ванны силиконом

  • Монтаж сантехнического оборудования

  • Обвязка ванны

  • Установка смесителя

  • Замена смесителя

  • Устранение засоров

  • Установка аксессуаров

Стало

Сантехника

Унитаз

  • Установить напольный унитаз

  • Установить подвесной унитаз

  • Демонтировать унитаз

  • Починить запорную арматуру бачка

Смеситель

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

  • Починить смеситель

  • Заменить смеситель

Ванна

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

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

Гостиная

  • Диван

  • ТВ

  • Стенка, сервант

  • Освещение

Кухня

  • Холодильник

  • Плита

  • Вытяжка

  • Посудомойка

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

  • Унитаз

  • Раковина

  • Ванна

  • Стиральная машина

Прихожая

  • Входная дверь

  • Шкаф

  • Полки

  • Тумбочка

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

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

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

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

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

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

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

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

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

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

А вот и ФФФ

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

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

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

✸✸✸

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

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

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

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

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

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

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