Кейс из России: разработка интерфейса мобильного приложения по доставке продуктов iGooods

Команда Heads and Hands подготовила для vc.ru материал о разработке мобильного приложения для сервиса iGooods: для чего нужна «скрытая регистрация», как избежать тупиковых пользовательских сценариев и как изменилась айдентика бренда.

iGooods — это сервис по доставке продуктов на экологичных скутерах из Metro, Prisma и «Лента» по ценам магазинов в Санкт-Петербурге. В 2016 году компания решила выйти на новый рынок с мобильным приложением.


Представители iGooods обратились к нам с задачей создать мобильный продукт, который позволил бы без проблем сделать заказ. Продукт должен был завоевать новую аудиторию и передать философию бренда с помощью дизайна.

Всю функциональность сервиса на тот момент мы взяли с веб-версии и адаптировали под приложения для iOS и Android. Казалось бы, на этом стоит поставить точку, ведь что нового можно сказать о том, как для веб-сервиса разрабатывалось мобильное приложение?

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

За тем, что выглядит легко, всегда скрывается сложная и комплексная проработка. Мы хотим на примере iGooods показать, из каких элементов собирается дружелюбный интерфейс и как он может повлиять на работу компании. Никогда не говорить пользователю «нет» Отсутствие тупиковых сценариев

Одним из наших основных принципов при разработке стал такой — не дать пользователю заскучать и не заводить его в тупик. Именно этот подход часто называют привлекательным интерфейсом.

Ему подчиняются абсолютно все экраны. Даже пустые экраны-заглушки из разряда «Нет описания товара» или «Товар отсутствует» не пустуют и не заканчиваются тупиком. Мы выходили из таких ситуаций двумя способами: обучали и попутно объясняли, почему пользователь зашел в тупик, либо предлагали альтернативное решение.

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



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

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

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

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

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



Реализовать такой механизм просто: достаточно создать пользователя при первом наполнении корзины. Затем его данные будут автоматически подтягиваться из профиля при входе с любого устройства. Подсказки на всех этапах работы

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



Мы уже упоминали отсутствие тупиковых сценариев, но подсказки появляются не только тогда, когда пользователь сам не может понять, что делать дальше. Они сопровождают человека на всех этапах работы с приложением. Человеку просто не придет в голову удалять такое приложение из-за его сложности. Функции сервиса

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

У iGooods очень ответственная и сознательная целевая аудитория. Эти люди любят читать тексты на этикетках, разбираются в экологичности товаров и нюансах фасовки. Поэтому и к дизайну нам нужно было подходить осознанно: от списков мы перешли к плитке, чтобы каждый товар можно было преподнести с красочным изображением. От текстов в описаниях мы при этом не отказались.

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



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



Все нововведения в приложении должны быть обоснованными и работать не только по принципу исправления багов. Мы сразу работали на то, чтобы приложение органично развивалось и «училось» вместе с пользователями. Динамическая лента заказа

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



Дружелюбность сервиса в данной функции достигается за счет push-уведомлений на сборку каждой позиции или связи сборщика с покупателем по каким-то товарам. Если вы заказали желтые помидоры, а в магазине есть только красные, то вас спросят, согласны ли вы с заменой — либо в приложении, либо по телефону. Расширенные возможности обратной связи

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

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



По этим отзывам с покупателями связывается закупщик и быстро решает проблему. Простота и ненавязчивость

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



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

Упрощенная регистрация

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



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

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



Мы предложили ввести «скрытую» регистрацию: при добавлении первого товара в корзину создается некая базовая учетка пользователя, а детали можно ввести и добавить после. Дополнение существующей айдентики

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



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



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

За время работы мы отрисовали более 70 экранов приложения на этапе прототипирования и продумали максимально удобные для работы сценарии. Полностью учли адаптацию сервиса и под платформу iOS, и под Android. Для финальной версии приложения было создано 130 экранов под все состояния.

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

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

За счет появления удобных сценариев и простого рабочего интерфейса ожидается значительный прирост заказов — как через веб, так и через мобильную версию. Мы уже наблюдаем прирост пользователей iGooods более чем на 50%.