Как выстроить UI/UX дизайн процесс

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

Клиент: компания, занимающаяся доставкой воды

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

Обычно я следую 4 основным шагам в процессе работы над UI/UX дизайном:

Для меня UX дизайн — это процесс повышения удовлетворенности пользователя продуктом, за счет удобства использования при взаимодействии с продуктом.

1. RESEARCH / Поиск

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

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

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

Stakeholders interview / Интервью с клиентом

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

Нам нужно ответить на эти вопросы:

• что нужно пользователям?
• каковы бизнес-требования?
• что мы можем технологически построить?

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

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

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

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

Обратная связь от пользователей

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

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

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

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

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

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

• какой образ жизни покупателей?
• какой их уровень дохода?
• размер населенных пунктов в которых они живут?
• основные клиенты частные или корпоративные?

2. ANALYSIS / Анализ

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

Creating Persona / Создание персон
В случае с нашим приложением, у нас была возможность пообщаться с покупателями продукта, и на этой основе создать несколько персонажей. Но кроме этого мы создали дополнительных, вымешанных персонажей, что бы понимать все варианты пользования продукта.
В итоге у нас было 3–4 персоны, каждая из которых имела свои потребности, цели и проблемы.

Для примера вы можете использовать такой шаблон

User Journey Map / Пользовательская карта

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

Ниже показаны варианты карт, шаблоны можно скачать по ссылке

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

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

3. DESIGN / Дизайн

Работа над дизайном обычно состоит из нескольких шагов:

• information architecture & sitemaps
• low fidelity prototype
• high fidelity prototype
• clickable prototype
• visual design

Information Architecture / Информационная архитектура

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

Wireframes

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

На первом этапе я делаю карандашные драфты на бумаге — low fidelity prototype. Рисую разные версии, продумываю варианты. Далее перехожу к high fidelity prototype, которые помогут больше понять итоговый результат, отобразить более точные размеры, стиль. После работаю над кликабельными прототипами, которые максимально показывают взаимодействие пользователя с продуктом на этом этапе.

Основываясь на концепциях и пользовательских сценариях, я создал wireframes, чтобы подробно рассказать о том, где элементы должны быть размещены на каждом экране.

Прототип / Prototype

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

4. USER TESTING / Тестирование пользования

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

Ниже вы можете увидеть окончательный дизайн приложения.