Как дизайнеру создать сильный Pet-проект и получить уникальный опыт в портфолио

Привет! На связи Ваня Хафизов, дизайнер с опытом более 3,5 лет в коммуникационном дизайне, а также Product & Ux/Ui дизайнер с опытом 1,5+ года. Ведущий дизайнер в Palindrome, а также сооснователь команды аутсорс-дизайнеров Wouch. Здесь делюсь процессом создания своих пет-проектов и продуктовых кейсов, рассказываю про дизайн-доводы и рок-н-ролл с нейросетями, залетайте, коллегиум.

1. Мини интро и введение

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

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

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

2. Тема кейса

Как дизайнеру создать сильный Pet-проект и получить уникальный опыт в портфолио

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

Для удобства в дальнейшем я буду приводить в пример разработку своего проекта онлайн кинотеатра. А выбор интересной для себя темы в данном случае позволил:

  • Делать проект быстрее и качественнее
  • Сохранять увлеченность проектом на протяжении его разработки
  • Реализовывать более сложные и трудозатратные решения
  • Быть гибким в решениях и уметь ставить себя на место пользователя продукта, так как у тебя уже есть своего рода экспертиза в использовании аналогов

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

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

3. Не делать по шаблону

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

Секции анализа популярных онлайн кинотеатров 
Секции анализа популярных онлайн кинотеатров 

Пройдя этот путь и знатно его затянув, посоветую вот что:

  • Определять у подобных активностей конкретный дедлайн
  • Изначально составить карту критериев для анализа
  • Анализировать до 3-5 продуктов или кейсов в категории
  • Выписывать лучшие фичи и забирать в копилку для того, чтобы унести в будущий проект
  • При анализе 100% выделится группа идентичных наборов функций и критериев, из которых легко понять MVP версию вашего проекта

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

Соответственно, моя задача из абстрактной "сделать онлайн-кинотеатр будущего" превратилась в понятную: продумать интеграцию функций и возможностей AI и AR в привычные всем пользователям сценарии онлайн-кинотеатров, например: сценарий просмотра фильмов / сериалов / мультов, сценарий покупки билетов, поддержки, совместного просмотра и т.д

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

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

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

4. Анализ

Да, опять он. Опять анализ. Я проводил сутки напролет, копаясь в разных сценариях внутри Кинопоиска, Окко, Иви, Старта и других платформ. В ход шли и косвенные "конкуренты" или игроки рынка, например: Rutube, Youtube, Twitch, да даже Boosty.

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

В одних из следующих статей расскажу про процесс анализа аудитории, а именно про понятные всем фреймворки:

  • Анализ персона-моделей
  • Функциональные группы аудитории
  • JTBD (jobs to be done) продукта и отдельных сценариев

5. Функциональная база: User case, User flow

На основе анализа аудитории и других доков, которые разработал, пошел собирать User case или сценарии использования продукта и после этого перешел к плавному User Flow или основным сценариям. Их покажу отдельно в будущих статьях и в самом кейсе :)

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

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

6. Не мог обойти стороной минимальный концепт

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

Функциональный мудборд 
Функциональный мудборд 

7. Варфреймы основных сценариев

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

Отмечу основного помощника на данном этапе, которым является Чат ГПТ :) советую всем помучать его задачками из разряда "какие виджет можно разместить в панели управления подписками в кинотеатре будущего" и тому подобное. Это не решение проблемы и не замена ваших знаний и навыков, а просто доп инструмент для формирования гипотез, который сокращает работу в разы.

С этой же задачей неплохо справляется искусственный интеллект в Notion.

Notion AI и Чат ГПТ отлично подойдут для проработки гипотез 
Notion AI и Чат ГПТ отлично подойдут для проработки гипотез 

8. Первые наметки дизайн-системы

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

Система 
Система 

9. Сам дизайн и доработка визуальности всех фичей

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


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

Как дизайнеру создать сильный Pet-проект и получить уникальный опыт в портфолио
Как дизайнеру создать сильный Pet-проект и получить уникальный опыт в портфолио
Как дизайнеру создать сильный Pet-проект и получить уникальный опыт в портфолио

10. Как итог

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

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

Небольшое Френдли напоминание, что у меня есть и другие ресурсы, которые я веду и буду рад видеть вас там!


- телеграм канал про дизайн: Доводы Дизайнер

- соцсеть с картинками

- X (twitter)

- мой LinkedIn

-

44
4 комментария

ну это сильно!!!

1

благодарю!

Проект онлайн-кинотеатра будущего с ИИ звучит как вызов, но именно такие задачи и двигают индустрию вперед)) Получилось отлично

1

Спасибо за коммент! очень постараюсь в следующих статьях побольше показать и рассказать)