UX/UI кейс: приложение для интернет-магазина одежды

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

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

Содержание

• Исследования
• Анализ конкурентов
• Карта стейкхолдеров
• Подготовка к интервью
• Интервью
• Анализ
• Персоны
• Customer journey map
• User story
• User story mapping
• Workflow
• User flow
• Wireframe
• Прототип
• Юзабилити-тестирование

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

Исследования

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

Анализ конкурентов

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

Карта стейкхолдеров

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

Подготовка к интервью

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

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

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

Интервью

Целью интервью было узнать, что нравится людям в интернет-магазинах и что отталкивает, об их потребностях, болях, переживаниях и т.д. Для этого я не ориентировался на собственный опыт взаимодействия с приложениями и сайтами, а внимательно слушал и старался поставить себя на место респондента.
Благодаря гайду, каждое интервью было структурировано и разделено на этапы: приветствие, разминка, основная часть и заключение. Также, для проведения более подробного анализа, я записывал интервью на диктофон. В итоге, получилось провести 7 интервью: четыре с ЦА и три с аутсайдерами.

Анализ (синтез)

Полученную из интервью информацию, я рассортировал на группы: паттерны, потребности, проблемы/боли, противоречия, инсайты. Для этого составил таблицу в Google Docs.

Персоны

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

Похожие паттерны поведения отмечены цветом.

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

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

Customer journey map

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

Теперь стало ясно, какие этапы проходит пользователь на пути к покупке и с какими трудностями приходится сталкиваться. После юзабилити-тестирования прототипа и запуска MVP, стоит провести дополнительные измерения.

User story

Чтобы не забыть о важных деталях в прототипе, я составил user story. В итоге, получился список намерений ключевой персоны. Строилось это по принципу: «Диана хочет сделать что-то, чтобы…»

User story mapping

На основе полученной информации, я перешел к составлению user story map (USM) — функционалу будущего прототипа. Для этого взял ключевую персону, определил цели и действия для их достижения. В USM расположено в хронологическом порядке, слева на право.

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

Workflow

После проработки функционала прототипа в USM, я перешел к workflow. Workflow — это подробная схема всех экранов приложения, интерактивных элементов, элементов управления, ссылок и т.д. В общем, это структура всего прототипа.
Схему составил в Miro, где отобразил все элементы интерфейса планируемого прототипа.

Можно посмотреть подробнее :)

User flow

В User flow я отобразил все интерактивные элементы на пути пользователя к оформлению покупки. Данная схема поможет не забыть о важных элементах интерфейса будущего прототипа.

Wireframe

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

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

Прототип

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

Юзабилити-тестирование

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

После каждого выполненного респондентом задания, была выставлена оценка от 0 до 2, где 0 — респондент не справился с заданием, 1 — справился с небольшими затруднениями и 2 — справился без затруднений.

В ходе тестирования я сформировал следующие гипотезы:

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

До и после правки

• Пользователь тратит меньше времени на выбор товара, если сортировку и фильтры объединить в одно целое

До и после правки

• В разделе «избранное», нельзя посмотреть размер. Это полезная фича в том случае, если нужно проверить наличие нужного размера залежавшегося товара

До и после правки

После внесения изменений в прототип, все респонденты справились с заданиями за меньшее время и без затруднений.
P. S. Юзабилити-тестирование проводилось с теми же респондентами, что и интервью в самом начале. Поэтому решил не проводить его повторно.

Кому интересно, можно испробовать интерактивный прототип.

Вывод

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

Также, мне будет очень приятно, если вы оцените данный проект на Behance.