MyTalent — дім для кожного таланту
Про проєкт
MyTalent — соціальна платформа, де артисти, креатори, спортсмени й інноватори показують, що вміють, знаходять своїх людей і зростають. За три місяці команда запустила соцмережу й застосунок, а ще за два їх доопрацювала. Я почав із бренду (логотипа й маскота), а далі робив UX і UI вебверсії.
Моя роль
Логотип, маскот, UX і UI вебзастосунку, дизайн-система
Команда
Два дизайнери, PM і розробники. Я вів веб, Олександр — мобільний застосунок
Терміни
3 місяці до запуску й ще 2 на доопрацювання
Результат
Близько 300 людей щодня публікували контент
Логотип
Клієнт хотів відійти від старої «спортивної» зірки: зберегти зірку, але зробити її чистішою, впевненішою й не лише про спорт. Пошук звівся до трьох напрямів: людина, творчість і зв'язки. Обрали зірку-людину, а згодом я оновив знак: голова виходить за межі іконки, а зірка нахиляється, ніби людина в русі.
Маскот
Маскота я придумав, щоб інтерфейс не був сухим. Він виріс із логотипа: кругла голова, що ширяє над м'яким тілом-зіркою. Я згенерував його в Nano Banana з одного референсу та сталого шаблону промпту, тож персонаж однаковий у кожній сцені — співає він, малює чи шукає.
Задача
За три місяці запустити соцмережу для талантів у вебі та застосунку. Вимоги приходили від PM і з регулярних дзвінків із клієнтом. Ми проєктували для двох людей:
Креатор
Показує свої роботи, збирає аудиторію, веде групи й організовує події
Глядач
Шукає таланти за інтересами, підписується, вступає в групи й приходить на події
На що дивились
- Luma
Часу на велике дослідження не було, тож ми дивились, як ті самі задачі розв'язують платформи, якими люди вже користуються. Для Events орієнтувались на Luma.
Від вайрфрейму до фіналу
Дизайн ішов майже паралельно з розробкою, тож ми працювали короткими циклами. Кожну фічу ділили на епіки та юзер-сторі, щоб її можна було задизайнити, передати й зібрати окремо, а спільні компоненти робили першими.
- 01Драфти
- 02Перший раунд
- 03Другий раунд
- 04Тестування
Чорнові ідеї та драфти ключових екранів, щоб домовитися про напрямГортайте далі
Ключові рішення
Контент на першому місці
Таланти приходять показати свою роботу, тож інтерфейс відходить на другий план. Спокійна трьохколонкова сітка тримає навігацію ліворуч, стрічку посередині й пошук нового праворуч. Таланти, групи й пости використовують одну систему карток, а в мобільному вебі стрічка займає весь екран.
Живий інтерфейс
Мінімалістичний інтерфейс легко стає порожнім. Маскот заповнює порожні стани й пости, а 3D-значки додають трохи гри, тож продукт здається дружнім ще до того, як людина щось опублікувала.
Дизайн-система
Разом з Олександром ми взяли за основу gluestack v2 і майже повністю переробили його під продукт. Одна система обслуговувала і веб, і мобільний застосунок.
Змінні
Кольори й розміри як змінні замість захардкоджених значень
Токени
Дизайн-токени, спільні для вебу й мобільного застосунку
Компоненти
Власні компоненти з усіма станами, які були потрібні юзер-сторі
- #4F7BFF
- #3156C5
- #F2F5FF
- #4C4759
- #525252
- #E5E5E5
Результат і висновки
За три місяці ми запустили соцмережу й застосунок, а ще за два їх доопрацювали. Поки ми працювали над продуктом, близько 300 людей щодня публікували контент у MyTalent.
Наступного разу я б інакше вибудував роботу з самого початку й набагато тісніше працював би з розробниками. Ми постійно були на зв'язку, але з такими дедлайнами дизайн-рев'ю верстки вдавалося робити не завжди.