UX & UI дизайн процесс при разработке нового продукта. Опыт дизайнера в Кремниевой долине
В своем предыдущем посте «Как получить стажировку в США» я поделилась своими советами по поиску стажировки/работы в США для дизайнеров.
Сегодня хочу рассказать вам о своем опыте работы в дизайн студии в Калифорнии, а именно, какой процесс мы используем при разработке нового продукта. Что самое интересное, это самый главный вопрос, который задают на собеседовании. Напомню, что в мае 2016 года я получила J1 визу и поехала на стажировку, а точнее trainee program в дизайн студию в Кремниевой долине.
80 % наших клиентов — это большие enterprise компании, поэтому продукты довольно сложные и data-heavy. За последние 13 месяцев я работала над такими проектами, как smart home приложение, infotainment system для одного из самых крупных производителей автомобилей (NDA), финансовая платформа (отрисовала 140 дизайн компонентов:) и другие.
Ниже 8 основных шагов, которые мы используем при разработке большинства продуктов. Но хочу сразу оговориться, что, возможно, это не самый идеальный процесс, но по крайней мере он всегда хорошо работал и работает для наших проектов.
1. Workshop with client / Воркшоп с клиентом (2-3 дня)
Воркшоп — это brainstorming с клиентом, во время которого вы выясняете суть продукта, его индустрию, конкурентов, кто основной юзер и их pain points (проблемы), а также основные задачи продукта.
Creating Persona / Создание «персон»
«Персоны — это вымышленные персонажи, созданные для того, чтобы представлять собой различные типы пользователей, которые могут схожим образом использовать сайт, брэнд или продукт» Wikipedia
Это первый и основной этап в UX-процессе. Определите как минимум
Мы документируем всю информацию в заготовленные шаблоны в Sketch. Кстати, вот ссылка Personas Template на довольно хороший шаблон, который я нашла на Dribbble. Но вы можете проявить всю свою фантазию и создать что-то получше.
Когда я работаю над продуктом, всегда напоминаю себе, что делаю я это для основного пользователя, а не для себя. Главное, что этот продукт должен нравиться в первую очередь ему, а потом уже мне. К сожалению, мне часто приходилось видеть, как другие дизайнеры очень субъективно подходили к своей работе, что я считаю ошибкой.
Определение основных функций продукта и анализ конкурентов
Обычно клиент уже знает, что будет включать в себя продукт и какие конкретно функции он будет выполнять. Тем не менее будет полезным провести детальный анализ топ
Card Sorting (карточная сортировка) & Information Architecture (IA)
Карточная сортировка — это техника, которая используется для того, чтобы проанализировать и выстроить информационную архитектуру продукта. Для разных типов информации удобно использовать стикеры разного цвета. Приведу пример из работы над smart home приложением. Во время брейнсторма с клиентом на карточках желтого цвета мы поместили фичи продукта, на карточках зеленого цвета — smart home девайсы, а на карточках синего цвета — кастомизированные actions тех самых девайсов. Все эти карточки мы прикрепили на борд, а после перенесли всю информацию в digital site map. Наши клиенты активно принимали участие в процессе.
Пример Карточной сортировки, photo by Jessica Ivins
User Journey Map
Пользовательская карта — это анализ поведения пользователя во время первого знакомства с продуктом. Цель построения JM — помочь понять основные pain points юзера, какие эмоции он испытывает на определенных шагах. Основываясь на этой информации, можно улучшить опыт пользователя (UX) на самых ранних этапах разработки продукта.
Например, возьмем все тот же smart home application. Для JM мы взяли flow «Регистрация в приложении и настройка смарт девайсов». Мы предположили, что для некоторых пользователей будет довольно сложно настроить девайсы, следуя только инструкциям, которые шли в комплекте со смарт хабом. Поэтому мы добавили скрины с подсказками, фото и видео. Также добавили иллюстрации, чтоб создать более friendly настрой.
Ниже пример шаблона, который мы используем для Journey Map.
Пример шаблона для Journey Map
2. Backlog
После проведения воркшопа, у нас уже обычно имеется примерный список скринов продукта, фич, компонентов и т. д. Всю эту информацию мы добавляем в Backlog — Google Sheet документ, и выставляем приоритеты и estimates. В нем же мы и обновляем статус этих компонентов. Клиент также имеет доступ к этому документу.
Скриншот Backlog для финансовой платформы (140 компонентов)
3. Navigation Concept / Навигационный Концепт
Далее разрабатываем шаблоны/паттерны для разного типа скринов, которые возьмем за основу при разработке прототипа. Например, скрин Profile page будет иметь один паттерн, скрин со списком продуктов — другой, а скрин Edit mode — третий.
Примеры паттернов для разного типа скринов
4. Wireframing / Прототип
Следующий шаг и один из ключевых — это разработка прототипа. Мы очень редко пропускаем этот этап. Единственный раз, когда мы его пропустили, — это был проект по разработке Infotainment system для автомобиля. У нас были очень сжатые сроки, поэтому мы основывали наш visual дизайн на паттернах, что я описала выше.
Существуют два типа прототипов:
Low fidelity прототипы — намного быстрее создаются и, как правило, являются инструментом для облегчения командной работы над проектом. Это могут быть наброски на бумаге или на whiteboard.
Low Fidelity прототип (travel app)
High fidelity прототипы отличаются более актуальным контентом, конкретными вариантами шрифтов и могут содержать более точную информацию о размерах изображений и даже стиле кнопок. Играем с оттенками серого, чтобы показать тонкости, которые можно увидеть только применив различные оттенки цвета, стиль навигации. В большинстве проектов мы разрабатываем именно high fidelity прототипы. Это в дальнейшем ускоряет разработку visual дизайна.
High Fidelity Wireframes & User Flow (приложение по производству шоколада)
5. Clickable prototype / Кликабельный прототип
Далее используем всем известное приложение InVision для создания кликабельного прототипа. Это очень облегчает объяснение взаимодействия и навигации внутри продукта еще до создания UI и верстки. Также это отличный способ коммуникации с клиентом. Можно в режиме оффлайн вести обсуждение, получать фидбек с помощью комментариев. InVision регулярно делает обновления и добавляет новые фичи, которые облегчают работу дизайнеров :)
6. Visual Design
Прежде чем приступить к разработке visual дизайна, мы показываем клиенту несколько типов Moodboards — Light, Medium and Dark. Получаем фидбек, в каком направлении им бы хотелось двигаться и уже начинаем работать над visual дизайном.
Dark Moodboard
В зависимости от бюджета презентуем 2 или 3 концепта. Очень часто клиент выбирает разные элементы из нескольких концептов, мы их комбинируем и презентуем новый вариант. После получения подтверждения концепта отрисовываем уникальные скрины и отдельные компоненты приложения. Все страницы приложения не отрисовываем.
7. Interaction Animations / Интерактивные анимации
Если мы предусматриваем нестандартный interaction между элементами, то в таком случае делаем анимацию в приложении Principle. Показываем ее не только клиенту, но и разработчикам при верстке продукта.
Interaction animation made in Principle app
8. Style Guide
Здесь тоже зависит от бюджета и от того, как договоримся с клиентом изначально. Не все клиенты хотят тратиться на разработку Style Guide. Тем не менее это очень важный заключительный этап при разработке нового продукта или ре-дизайне имеющегося. Как минимум в Style Guide должны содержаться следующие элементы: логотип продукта, фирменные цвета, шрифты, допустимые и недопустимые варианты преобразования и использования элементов, правила оформления документации, рекламной продукции и т. д.
Style Guide for Travel platform
И в заключении скажу, что идеального процесса для всех продуктов не существует. Он варьируется от проекта к проекту, дополняется чем-то новым. Очень важно анализировать процесс и подход к выполнению работы после сдачи каждого проекта, делать работу над ошибками. Буду рада, если вы поделитесь своим опытом в комментариях.
P.S. Кому интересно, оставляю ссылку на свой Dribbble.
