Milan Art — соцмережа для художників

Контекст

Milan Art Institute — велика академія мистецтв із Джорджії (США) з великою спільнотою студентів і викладачів. Школа вирішила перенести цю спільноту в онлайн і створити власну соцмережу для художників: стрічку, де художники діляться роботами, підписуються одне на одного й коментують, а також бібліотеку курсів і лайв-сесій від викладачів школи.

Це було справжнє продуктове середовище: велика дизайн-система, десятки флоу, моушн і ретельні ітерації разом із CEO та розробниками.

Запуск

Ми довели платформу до продакшну. Ось анонс, який школа зняла до запуску: засновники, викладачі й студенти розповідають про продукт.

Три дизайн-системи

Перш ніж масштабувати продукт, ми заклали фундамент. З часом він виріс у три пов’язані бібліотеки: основну систему ArtSocial для соцмережі, темну систему ArtClub для платного клубу і бібліотеку листів, щоб кожен лист від платформи виглядав частиною того самого продукту.

Палітра зроблена для мистецької аудиторії: нейтральні сірі дають головну роль роботам, а яскраві вторинні кольори й градієнти несуть бренд. Art Club отримав власний бірюзовий акцент на тій самій базі, тож продукти схожі, але розрізняються.

Стрічка

Серце продукту. Художники публікують готові роботи, процес і запити на критику, підписуються одне на одного й перемикаються між власною стрічкою Feed і Explore, де знаходять нових авторів. Кожен пост має категорію (General, Finished Art, Critique, Discussion або Announcement), тож стрічку можна відфільтрувати під свою мету. Ментори позначені в коментарях, а бічна панель підказує художників і спільноти.

Публікація займає кілька дотиків: обрати категорію, написати кілька рядків, додати до п’яти зображень, і пост з’являється у стрічці з підтвердженням. На мобільному категорію обирають першою в нижньому листі, тож кожен пост потрапляє куди треба.

Художники приходять по фідбек, тому коментарям ми приділили не менше уваги, ніж постам: треди відповідей, згадки, лайки на коментарях, бейджі менторів і поле вводу, яке тримається над клавіатурою.

Спільноти

Довкола стрічки ми побудували спільноти: простори для програми, коучинг-групи чи просто художників зі спільним інтересом. Кожна спільнота буває Public, Limited або Private, і саме це налаштування визначає весь флоу. До публічної може приєднатися будь-хто, в обмежену треба подати запит, який схвалюють модератори, а приватна невидима, доки тебе не запросять чи не приймуть.

Кожна картка мала одразу показувати, де користувач зараз, тому ми спроєктували повну матрицю станів: за замовчуванням, учасник, підписник, запит на розгляді та вхідні запити для модераторів.

Сторінка спільноти має власну стрічку, вкладку About і список учасників, де вгорі коучі й модератори. Публікувати можуть лише учасники, а гості бачать, що саме треба зробити, щоб долучитися.

Блог

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

Чат і безпека

Художники листуються напряму, а відкрита спільнота художників приваблює й шахраїв, найчастіше з фейковими NFT-пропозиціями. Тому чат не просто доставляє повідомлення: він позначає підозрілі й пропонує одним кроком поскаржитися та заблокувати відправника або проігнорувати попередження. Заблокованого можна будь-коли розблокувати, а кожен крок закінчується зрозумілим підтвердженням.

Профіль і налаштування

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

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

Онлайн-курси

Mastery Program — річний курс, вбудований у ту саму соцмережу. Сторінка курсу показує секції з прогресом, закриті тижні й викладачів, а кожен урок тримає відео, список уроків і файли в одному місці. На мобільному ми вбудували менторство прямо в урок: запропонувати персонального ментора, показати, що він уже призначається, а потім показати ментора з кнопкою для повідомлення.

Ментори

Mastery Program закріплює за кожним студентом особистого ментора. Студент бачить, хто його ментор, і може написати йому або відкрити коучинг-спільноту прямо зі стрічки. Ментори отримують власний робочий простір My Students: кожен студент із датою старту й статусом (призначений, скасований або невдалий платіж, з деталями в підказці), а також контакти й приватні нотатки в картці, що розгортається.

Один бренд, багато продуктів

Milan Art — це родина продуктів: інститут, арт-магазин, клуб, ретрити й кілька навчальних програм. Ми звели всі знаки в одну логосистему: спільний знак із власним кольором для кожного суббренду та єдиний типографічний стиль для програм.

Art Club

Art Club — платна частина платформи: закритий клуб для художників із тренінгами, онлайн-стрімами та щомісячними конкурсами. Він свідомо працює на власній темній дизайн-системі: Art Club — окремий преміальний простір, і темна тема візуально відділяє платний клуб від основної соцмережі. До того ж на темному краще виглядають відео й роботи художників. Ми спроєктували відеобібліотеку з плейлистами й сезонами, прогрес курсів і картки конкурсів для кожного етапу: від подачі робіт до голосування й переможців.

Клуб відкривається персональною головною: пошук із фільтрами за рівнем, поточний конкурс із таймером і відео, які ви ще не додивилися. Тут живе й власне реаліті-шоу школи The Outstanding Artist, розбите на сезони й епізоди, як на стримінговому сервісі.

Кожен урок має власну сторінку: відео, теми, швидкі лайки й можливість зберегти на потім. На мобільному відео лишається вгорі, а нижня панель тримає решту соцмережі на відстані одного дотику.

Поверх базового клубу є платні рівні. Pro Library збирає повні курси з відстеженням прогресу, а Group Mentoring дає учасникам закриту спільноту з менторами. Коли функція потребує вищого плану, ми показуємо, що це, і апгрейд прямо там, не залишаючи екран.

Вступ до Art Club

Art Club — платна щомісячна підписка, тому чекаут мав бути таким самим спокійним і надійним, як і весь продукт. Ліва частина продовжує продавати клуб, права робить лише одну справу. Реєстрація й оплата вміщаються на один екран: Apple Pay, Google Pay, PayPal або картка через Stripe.

Ми продумали й кожен крок після кнопки: оплата в процесі, дружня помилка з можливістю спробувати ще раз, вітальний екран з відео від засновників і наступним кроком, а також нагадування підтвердити email.

Листи

Кожен лист від платформи, від підтвердження акаунта до онбордингу в програму й проблем з оплатою, зібраний зі спільної бібліотеки хедерів, футерів, кнопок і логотипів, з гайдлайнами, як він виглядає в реальних поштових клієнтах.

Адмінка

За продуктом стоїть адмінка для команди: користувачі та їхні покупки, теги, ментори зі статусами оплат і модерація. Сповіщення ми спроєктували як флоу з чотирьох кроків: обрати отримувачів за тегами й ролями, написати повідомлення, запланувати й надіслати. Кожен завершений крок згортається в короткий підсумок, тож адмін завжди бачить, що й кому піде.

Від дизайнера до дизайн-ліда

Я прийшов як продуктовий дизайнер. Через рік компанія запропонувала мені очолити дизайн, і на загальному мітингу мене представили всій команді як UX design team lead. Відтоді я вів команду до 5 дизайнерів і працював напряму з CEO та розробниками.

Як дизайн-лід я відповідав і за команду, і за те, як дизайн працює з рештою компанії:

• Команда. Я ставив пріоритети, розподіляв задачі, вів дейлі, допомагав дизайнерам розв’язувати складнощі та робив ревʼю кожної задачі перед передачею в розробку.
• Розвиток. Я менторив джунів і допомагав їм рости.
• Продуктові рішення. Обговорював плани й рішення з CEO на спільних брейнштормах, а щодня працював напряму з керівником IT-відділу та техлідом команд фронтенду й бекенду.
• Постійні покращення. Я регулярно збирав відгуки спільноти та звіти QA-тестувальників, перетворював їх на пріоритети й від релізу до релізу покращував ключові флоу.
• Своя робота. Найскладніші та найважливіші задачі я брав на себе.

Результати

За перші пів року після релізу:

Що я виніс

Цей проєкт дуже виростив мене як продуктового дизайнера. Я навчився будувати й підтримувати великі дизайн-системи та тримати цілісність продукту із сотнями екранів, поки він ріс. Я отримав перший справжній досвід керування продуктовою командою до п’яти дизайнерів: ставити пріоритети, рев’юїти роботу й тримати якість рівною в усій команді. А щоденна робота з американською компанією навчила мене комунікувати з американським ринком: чітко презентувати ідеї, аргументовано захищати дизайн-рішення й знаходити спільну мову з CEO, розробниками та бізнесом.