Продуктовый дизайн-процесс. Или 10 шагов, которые помогут создать сильный проект в портфолио

Освоить навыки продуктового дизайнера и найти работу мечты.

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

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

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

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

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

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

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

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

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

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

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

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

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

Сделайте фокус на анализе существующих сервисов, а не работ с Dribbble и подобных сайтов. Существующие интерфейсы могут быть не такими красивыми, но зато они проверены реальным миром.

Результатом анализа удобнее оформить в FigJam или Miro. Нужно добавить скриншоты всех основных экранов, а лучше полноценный сценарий, и к каждому добавить небольшие пометки, если какие-либо интерфейсные идеи вам показались интересными. Или, наоборот, неудобными.

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

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

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

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

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

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

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

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

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

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

Следующий шаг – описать, какие экраны понадобятся для реализации данного проекта. И отдельно описать, какие элементы должны располагаться на каждом экране. Таким образом вы сможете продумать, где и какую информацию лучше размещать еще до того, как начнете рисовать макеты в «Фигме».

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

Дизайн-система – важная часть любого современного продукта, поэтому нужно показать понимание этого инструмента хотя бы в рамках использования компонентов. Компоненты можно найти в Figma Community, купить или создать самому.

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

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

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

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

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

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

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

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

Именно поэтому мы заранее проработали все экраны, чтобы в «Фигме» осталось их лишь собрать из готовых компонентов и грамотно расположить. Конечно, это тоже непростая задача, но благодаря тщательной проработке сделать это будет намного проще.

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

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

Чего я вам и желаю, друзья.

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