Створення масштабованої дизайн-системи для B2B-платформи просування музики
Кейс про проєктування платформи музичної аналітики зі зрозумілими інформаційними панелями, візуалізацією даних і масштабованою дизайн-системою, яка допомагає перетворювати складні дані на висновки для дій.
Галузь Музичні технології
Послуги Продуктовий дизайн · UX/UI-дизайн · Дизайн-система · Візуалізація даних · Візуальна перевірка якості
S. — B2B SaaS-платформа для музичної індустрії США, яка допомагає артистам, продюсерам і лейблам просувати музичні релізи на радіостанціях.
Проєкт почався з раннього прототипу й потребував побудови повноцінного продуктового досвіду з нуля. Разом із клієнтом наша команда перетворила початкову концепцію на масштабовану платформу з єдиною мовою дизайну, основою з UI-компонентів для повторного використання та дизайн-системою, готовою до застосування в продукті.
Завдання
Платформа потребувала масштабованого інтерфейсу, здатного підтримувати складну аналітику й водночас залишатися інтуїтивним для щоденного використання.
Оскільки проєкт почався на ранній стадії, кожне дизайнерське рішення мало враховувати довгостроковий розвиток продукту. Замість окремих екранів ми зосередилися на шаблонах для повторного використання, масштабованих компонентах і міцній основі дизайну, яка могла б розвиватися разом із продуктом.
Створення виразної візуальної мови
Замість типових цифрових палітр ми розробили унікальну колірну систему, натхненну кольорами аерозольних фарб Montana 94.
Фізичну палітру ретельно перенесли в цифрове середовище, де вона стала основою візуальної ідентичності продукту. Кожен колір свідомо обрали, назвали й наділили чіткою роллю в дизайн-системі. Так сформувався впізнаваний і послідовний інтерфейс.
Розв’язуємо завдання візуалізації даних
Аналітика відігравала центральну роль у платформі, тому візуалізація даних стала одним із найбільших UX-завдань проєкту.
Щоб покращити читабельність інформаційних панелей, ми розробили окрему стратегію послідовності кольорів: вона зменшила повторення кольорів між рядами даних на діаграмах і зберегла чітке візуальне розрізнення навіть у великих наборах даних.
Цей підхід зробив діаграми зрозумілішими й водночас забезпечив узгодженість у всьому продукті.
Побудова масштабованої дизайн-системи
Дизайн-систему створили для підтримки як зростання продукту, так і ефективної співпраці з розробниками.
Тодішні інструменти дизайну мали значно менше можливостей, ніж сьогодні, тому потрібно було ретельно планувати багаторазові компоненти, документацію, правила найменування та настанови з реалізації. Ця основа дала змогу масштабувати продукт, зберігаючи узгодженість.
Співпраця дизайну й розробки
Тісна співпраця з командою розробки була ключовою частиною процесу.
Окрім передавання дизайн-файлів, ми підготували рекомендації з реалізації та провели візуальну перевірку якості, щоб кінцевий продукт точно відповідав задуму. Контроль якості охоплював не лише точність відтворення до пікселя, а й типографіку, міжлітерні інтервали, правила відступів, візуальну ієрархію та узгодженість.
Результат
У тісній співпраці з клієнтом ми перетворили ранній прототип на масштабований B2B SaaS-продукт зі структурованою дизайн-системою, послідовними UX-патернами та виразною візуальною мовою.
Проєкт демонструє наш підхід до продуктового дизайну: створення систем замість окремих інтерфейсів, розв’язання складних UX-завдань і розробку цифрових продуктів, які залишаються зручними в підтримці в міру зростання.