21.02.2015
Goodwin

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

Вводные данные

С развитием, Goodwin стал превращаться в каталог товаров. Фокус стал смещаться со сканирования в сторону e-commerce направления. Команда Goodwin хотела расширить область применения приложения и не превращать сервис в каталог. В новой стратегии, сканирование является больше, чем форматом электронной торговли.

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

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

Процесс

Первый шаг

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

У приложения было две основные проблемы: недостаток контроля над работой сканера и нехватка подсказок в приложении.

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

Бумажный скелет

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

Wireframes для iOS

Интерактивные мышцы

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

Первой рабочей версией стала версия для iOS. Также мы сделали прототип для Android устройств. Интерактивный прототип стал основой для параллельной работы над двумя версиями приложения.

Хорошая дизайн-документация всегда превращается в документы для дальнейшей работы команды разработчиков.
Wireframes для Android

Инструкция по применению

Итак, спустя множество брейн-штормов, встреч и обсуждений у нас на руках есть и бумажные наброски, и интерактивные прототипы. Казалось бы, что может быть нагляднее прототипа? На практике при работе нескольких команд над одним проектом всегда остается место вопросам.

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

Графическая кожа

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

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

Решения

Первое знакомство

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

Знакомство с сервисом — это лишь один из элементов в рамках комплекса решений проблемы нехватки подсказок. Помимо знакомства, в данный комплекс входят onboarding, контекстные подсказки, служба поддержки.

Плавающая кнопка

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

Плавающие кнопки появились задолго до выхода 5-й версии Android. Самым известным примером может служить приложение Foursquare, которое вывело это решение на массовый рынок. В нашем решении плавающая кнопка прекрасно соответствует новым гайдлайнам Android и является довольно обыденным явлением для iOS.

Лента событий

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

Сканнер

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

Иконки приложения

Результаты сканирования

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

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

Поддержка

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

Корзина

С целью упрощения процедуры заказа мы не стали выделять регистрацию или логин в отдельный шаг - вы можете зарегистрироваться во время оформления заказа.