6 шагов к успешному продуктовому дизайну: руководство

В основе каждого успешного цифрового продукта лежит надежный дизайн-процесс.

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

В основе каждого безупречного цифрового продукта лежит надежный дизайн-процесс. Возьмем, к примеру, Spotify, мирового лидера на рынке стриминга музыки с более чем 626 миллионами пользователей. Успех Spotify можно объяснить тщательным подходом к проектированию: компания ставит во главу угла интересы пользователей, принимает решения на основе данных и постоянно совершенствует свой продукт.

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

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

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

1. Определите цели продукта

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

Отсутствие четко сформулированных целей повышает вероятность несогласованных действий, избыточного добавления функций и неэффективного распределения ресурсов. Результат — неспособность удовлетворить реальные потребности пользователей и достичь целей бизнеса. Яркий пример — Google Glass — многообещающие умные очки, которые в конечном итоге не понравились аудитории.

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

Эти мероприятия должны дать ответы на три ключевых вопроса:

• Чего мы хотим достичь?
• Когда мы хотим этого достичь?
• Как мы будем оценивать, была ли достигнута наша цель, с точки зрения количественных показателей успеха?

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

Работать с целями также помогают специальные инструменты. Например, Aha! — ПО для составления дорожных карт, которое позволяет отслеживать конкретные задачи и ключевые показатели эффективности.

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

Пример из практики:

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

С самого начала мы четко определили видение продукта, что позволило увеличить активную клиентскую базу до 300 000 человек, а в течение двух лет Chaka привлекла 1,5 миллиона долларов инвестиций.

2. Исследуйте и анализируйте

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

Команды, пренебрегающие комплексными исследованиями, в итоге получают продукты, которые не способны решить проблемы клиентов, не отвечают потребностям рынка и не выделяются на фоне конкурентов.

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

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

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

Пример из практики:

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

Анализ рыночных трендов показал, что одной из главных трудностей при поиске работы является составление сопроводительных писем, поэтому мы сосредоточились на создании функций, позволяющих упростить эту задачу. Благодаря исследованию мы смогли запустить MVP менее чем за две недели и привлечь 15 000 клиентов за три месяца без дополнительных затрат.

3. Генерируйте идеи и разрабатывайте концепции

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

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

После того как вы сформулировали ряд идей, необходимо выбрать наиболее жизнеспособные. Расставьте их в приоритетном порядке с учетом ранее выявленных ограничений, осуществимости и прогнозируемого воздействия. Три широко используемые техники приоритизации идей — MoSCow, RICE и Kano. Здесь сосредоточимся на MoSCoW, поскольку чаще всего обращаемся именно к ней.

MoSCoW расшифровывается как Must-have (обязательно должно быть сделано), Should-have (следовало бы сделать), Could-have (можно было бы сделать) и Won't-have (не надо делать).

Пример из практики:

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

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

На основе собранных данных о поведении клиентов мы распределили их потребности по категориям: «обязательно нужно сделать» (M), «следовало бы сделать» (S), «можно было бы сделать» (C) и «не надо делать» (W). Это помогло нам быстро определить наиболее важные и срочные функции для главного экрана: обзор глобальных и локальных акций, трендовые акции и последние новости.

4. Создавайте прототипы

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

Так было с запуском «сырой» версии карт Apple Maps в 2014 году. Генеральному директору Тиму Куку пришлось принести официальные извинения после многочисленных жалоб пользователей на географические ошибки и информационные пробелы.

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

Среди других популярных инструментов для создания вайрфреймов — MockFlow, Justinmind и Flinto. А для более сложных прототипов подходят Figma, Sketch и Pixso. Высокоточные прототипы часто применяются для тестирования многоэтапных процессов, таких как регистрация пользователей или сброс пароля.

Недавно Nielsen Norman Group предложила еще один подход к моделированию цифровых продуктов — promptframes (дословно — «фреймы из подсказок»). Это промежуточный вариант прототипа, состоящий из инструкций для AI, позволяющих сгенерировать контент для его заполнения.

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

Продуманные прототипы — мощный инструмент коммуникации, который позволяет продемонстрировать заинтересованным сторонам и клиентам потенциал и функциональность продукта.

Пример из практики:

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

5. Тестируйте продукт и собирайте обратную связь

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

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

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

Команды могут использовать такие инструменты, как UserTesting и Userlytics, для сбора обратной связи, а также тепловые карты, например, Crazy Egg, для отслеживания и анализа взаимодействий.

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

В целом, стратегию пользовательского тестирования можно разбить на пять шагов:

1) Определить цели и объем работ

Начните с определения целей и задач тестирования, например, выявить проблемы юзабилити или оценить конкретные функции. Затем определите объем работ: количество участников тестирования, методы, устройства, платформы и т.д.

2) Продумать сценарии и сформулировать задания

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

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

3) Определить методы и инструменты тестирования

Выберите метод тестирования, например, модерируемое или немодерируемое юзабилити-тестирование, A/B-тестирование или бета-тестирование. Чтобы упростить сбор и анализ данных, используйте специальные инструменты для записи экрана, проведения опросов, тепловые карты.

4) Набрать участников

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

5) Составить график тестирования и определить структуру отчетности

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

Наиболее популярные инструменты для планирования тестов — Jira, TestRail, Trello.

Пример из практики:

Во время пандемии COVID-19 мы проводили редизайн сценария совершения покупок для виртуальной торговой выставки компании CoopLag. (В дальнейшем он позволил увеличить доходы на 330%.) Нам необходимо было использовать технологии для создания эффективного и интуитивно понятного онлайн-опыта. В частности, клиент хотел обеспечить безопасность онлайн-транзакций для участников и продавцов.

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

6. Передайте дизайн команде разработчиков

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

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

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

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

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

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

Пример из практики:

Конечно, существуют и другие способы эффективно передать свои макеты. В WriteSea мы используем Figma Dev Mode, чтобы предоставить разработчикам прямой доступ к спецификациям, компонентам и фрагментам кода в интерфейсе Figma. После утверждения дизайна мы создаем специальную handoff-страницу в нашем файле. На ней мы размещаем стайлгайд с рекомендациями по использованию логотипа, цветовой палитры, типографики, изображений и графических элементов.

*****

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