UX UI Project/Проектирование интернет-магазина одежды
Много лет я работала архитектором, создавала необычные проекты, видела, как реализовывались мои идеи. Меня всегда вдохновляла творческая работа, но со временем я захотела быть ближе к digital-сфере, при этом оставаясь в среде создания креативных вещей.
В рамках курса DIGITAL PRODUCT DESIGN я обучилась мышлению ux/ui дизайнера и создала свой первый проект под руководством Alex Voloshyn.
1. Подготовительный этап
Основой для работы является описание задачи и определение итогового результата. Я выбрала для своего учебного проекта тему онлайн-покупок.
Что нужно сделать (результат): разработать продукт, с помощью которого пользователи смогут подбирать для себя одежду, заказывать товар или узнавать, где можно его купить. Это может быть мобильное приложение, веб-сервис или и то, и другое.
Какую проблему решаем (гипотеза): человек на одной платформе сможет следить за новыми поступлениями, акциями, скидками, отслеживать информацию, иметь возможность выбрать товар и оформить заказ без трудностей.
Зачем (цель): мы будем получать процент с каждого заказа.
Для кого (ЦА): люди в возрасте от 18 до 65 лет, которые любят хорошо одеваться и активно используют электронные устройства.
После того, как стало понятно, что необходимо получить в итоге, можно переходить к основной части.
Процесс создания продукта состоит из нескольких важных этапов, которые помогут сделать его качественным и удобным:
- дизайн продукта;
- дизайн взаимодействия;
- дизайн графического интерфейса.
2. Исследования и сбор информации
Данный этап является значимым для погружения в сферу, для которой разрабатывается продукт. Без ее глубокого изучения и анализа невозможно создать сайт или приложение, полностью отвечающее потребностям пользователя.
Полевые исследования или личный опыт
Изначально необходимо провести ряд исследований (чем больше, тем лучше), чтобы получить понимание того, для какого типа пользователей мы разрабатываем продукт, какие ключевые задачи решают пользователи, используя сервис, какую конечную цель они перед собой ставят, что им нравится на сайтах конкурентов, и какие возникают проблемы при их использовании. В дальнейшем, при разработке продукта, данный анализ поможет предложить эффективные решения.
С помощью инструмента для проведения исследований Customer Journey Map (CJM) я проанализировала сайты конкурентов, двигаясь по сценарию, который обычно проходят пользователи, попутно выявляя слабые и сильные стороны каждого этапа. Данные вносила в удобную сводную таблицу.
Проанализировав несколько сайтов, я выделила для себя основные проблемы, но, чтобы отчет не был субъективным, необходимо было собрать мнения разных пользователей.
Исследования целевой аудитории
Важной составляющей процесса является аналитика опыта пользователей, которая помогает понять потребности целевой аудитории.
Онлайн-анкета
Первый способ сбора информации — онлайн-опрос с помощью Google-формы. Ответы автоматически были сгруппированы в общую таблицу.
Помимо плюсов и минусов сайтов конкурентов, которыми пользовались респонденты, опрос дал понимание того, в какой ситуации пользователи чаще всего обращаются именно к онлайн-покупкам.
Живые интервью
Для более глубокого анализа я провела живые интервью с пользователями, где задавала им открытые вопросы. Такой подход помогает получить максимум информации об исследуемой области, понять, что для пользователя привычно и удобно, составить приблизительный сценарий его поведения.
Дополнительные способы сбора информации
Также мне было интересно и полезно посмотреть видео интервью project-менеджера компании «Аспро», который рассказывал об основных важных настройках сайта онлайн-магазина.
3. Анализ информации и поиск идей
Анализ ситуации
После систематизации полученной информации я составила общий анализ ситуации. Он помогает определить основные задачи, которые пользователь хочет решить, приходя на наш сайт. Вся информация сгруппирована по пунктам в таблице ниже.
Проблемы и идеи
Дальше начался процесс активного придумывания (и конечно же систематизирования в таблице) идей для решения проблем, выявленных на основании интервью и опроса.
Чтобы в итоге появилось эффективное решение, надо было запустить процесс генерирования идей. Для каждой проблемы я подобрала несколько решений.
Как показала практика, обычно сначала процесс генерации идет туго и появляются слабенькие стандартные идеи, мозг сопротивляется и не хочет работать. Поэтому нужно расслабиться и продолжать процесс, руководствуясь лозунгом «Чем больше идей — тем лучше!», как будто это такая детская игра, и постепенно мозг начнет выдавать действительно интересные решения.
Alex Voloshyn /автор и ментор курса/
4. Функциональные и технические требования к сайту
Функциональные требования
Функциональные требования объединяют бизнес-требования и пользовательские требования, помогают окончательно определить функционал, который должен входить в начальную версию сайта. Некоторые идеи ушли в беклог, так как на данном этапе важно оставить самые эффективные инструменты для решения задачи пользователя.
Технические требования
После определения функциональных требований нужно сделать описание технических требований к конечному результату, чтобы потом не возникло проблем с разработкой этого сайта.
5. Логика работы продукта
На данном этапе работы, после обширной аналитики и всех проделанных исследований, после определения основных выводов о том, каким должен быть конечный продукт, мы переходим непосредственно к проектированию сайта. Этот этап оказался самым увлекательным для меня.
User Flow-проектирование логики работы сайта.
Логические схемы (User Flow) — это поэтапный сценарий поведения пользователя на сайте, его путь при решении задач. Они показывают последовательность действий, где последним шагом является достижение первоначальной цели (задачи), при этом у пользователя не возникает ни на одном из этапов никаких проблем. Логические схемы помогают определить ключевую логику работы пользователя с сайтом.
Я выстроила подробный сценарий взаимодействия пользователя с проектируемым сайтом. Квадраты с голубой заливкой обозначают шаги вне веб-сервиса, зеленой заливкой обозначены ключевые шаги, а квадраты без заливки показывают промежуточные шаги.
Детализация и структура
Следующим важным шагом является формирование подробной структуры сайта. Благодаря подготовительным этапам сформировалось четкое понимание того, каким должен быть интерфейс сайта. Все предварительные исследования способствовали структурированию полученной информации, поэтому к моменту создания графической таблицы детализации функций сайта у меня сформировалось полное представление о том, каким он будет. Каждый пункт сайта стал очевидным.
6. Прототипирование и тестирование
Прототипирование интерфейса
На этапе прототипирования образ будущего сайта уже визуально становится понятным. Прототип создается для визуализации своих идей и служит инструментом для проверки юзабилити.
Выбор инструмента для прототипирования зависит от решаемых задач и требований к конечному результату. Я использовала программу Figma.
Для меня было сложно приступить к данному этапу, потому что необходимо было не только освоить новый материал и пройти этап по ux ui-дизайну, но и быстро разобраться в незнакомой программе. В действительности все оказалось очень легко благодаря тому, что в предыдущих этапах все было четко структурировано.
Тестирование
После того, как создание прототипа будущего сайта закончено, его необходимо протестировать. На этапе тестирования были выявлены и исправлены небольшие ошибки. Пользователям, которые видели этот прототип впервые, было проще составить мнение о том, на сколько он удобный и интуитивный. Поэтому пользовательское тестирование — еще один важный этап.
7. Графическое оформление интерфейса
Творческое завершение процесса — графическое оформление сайта. Необходимо определить настроение, задать атмосферу, ведь графический интерфейс — это лицо сайта.
Заключительный вывод
Путь от профессии архитектора в мир ux ui казался мне очень долгим и непростым. Оказалось, что в обоих этих сферах под внешней эстетической оболочкой скрывается большая аналитическая работа, четкие логические связи, понятный функционал и забота о пользователе. Для меня погружение в новую профессию прошло очень легко и увлекательно.
