Завдання та люди
Бізнес-цілі, люди, які користуються продуктом, і завдання, які їм потрібно виконати. Разом визначаємо пріоритети та обсяг наступної версії.
Результат: опис продукту, пріоритети та гіпотези.
ПослугиПродуктовий дизайн
Продуктовий дизайн
Робота, що починається ще до екранів: завдання, аудиторія, модель продукту, ключові сценарії та основний інтерфейс. SKARR.PRO також передбачає перевірку гіпотез і альтернативні моделі продукту.
Ще до екранів.
Сам продукт.
Ви можете починати з ідеї, вдосконалювати наявний продукт або створювати нову функцію. Ми перетворюємо цю початкову точку на модель продукту, основний інтерфейс і, якщо це погоджено, робочий код.
Від відкритого запитання
до функціонального продукту.
Продуктове мислення, дизайн інтерфейсу та розробка залишаються взаємопов’язаними. Спільно ухвалені рішення втілюються в програмному забезпеченні, яким користуються люди.
На початку ми узгоджуємо обсяг, разом переглядаємо ключові рішення та повертаємося до припущень, якщо під час роботи з’являється нова інформація.
Якщо продукт уже визначений і йому потрібні екрани, сценарії та стани, перегляньте послугу UX/UI-дизайну.
Що ми опрацьовуємо
разом із вами.
Кожен етап перетворює відкрите запитання на рішення, на якому можна будувати далі.
Модель продукту та ключові сценарії
Що таке продукт, як він створює цінність і які шляхи найважливіші. Ми впорядковуємо інформацію, потрібну людям на кожному кроці, та рішення, які вони ухвалюють у процесі.
Результат: шляхи користувачів і структурна основа продукту.
Основний інтерфейс
Екрани, на яких продукт створює цінність: їхній візуальний характер, ієрархія та стани для кожної дії. У SKARR.PRO гіпотези й альтернативні моделі перевіряють на прототипах до того, як зупинитися на рішенні.
Результат: основний інтерфейс, узгоджений на реальних екранах.
Система навколо продукту
Компоненти, типографіка та принципи роботи, що забезпечують цілісність усього продукту. SKARR охоплює основу; SKARR.PRO розширює систему для підтримки майбутніх функцій.
Результат: дизайн-система потрібного продукту масштабу.
Перехід до коду, якщо погоджено
Основу можна створити безпосередньо на React: як інтерактивний прототип для перевірки сценаріїв або як функціональний інтерфейс із погодженою поведінкою. Figma не є обов’язковим проміжним етапом.
Результат: інтерактивний прототип на React або функціональний інтерфейс на React — у межах погодженого обсягу.
Ширший погляд.
Чіткіший наступний крок.
Для швидкого завдання на мобільному пристрої та робочого простору команди потрібні різні способи впорядкування інформації.
Застосунок для сфери охорони здоров’я.
Статус, деталі та дії в єдиній структурі.
Для вебзастосунків і панелей керування ми об’єднуємо статуси, деталі та дії в чітку структуру. Команда бачить, що потребує уваги, відкриває контекст і просуває роботу вперед.
Візуальна концепція з демонстраційними даними для продукту в розробці. Банківський застосунок вище показує той самий підхід на маленькому екрані.
Переглянути, як відбувається роботаСтруктура продукту.
Основа для подальшої розбудови.
Ви отримуєте чітку модель продукту, ключові сценарії та основний інтерфейс: у вигляді дизайн-файлів або, якщо це погоджено, інтерактивного прототипу на React чи функціонального інтерфейсу на React.
Подальші ітерації, ширшу дизайн-систему та розробку додаткових функцій узгоджуємо як наступний крок.
Як відбувається
робота.
Чотири етапи, кожен завершується рішенням, на якому можна будувати далі.
01
Аналіз і дослідження
Ми вивчаємо бізнес, людей і контекст використання: проводимо аналіз бізнесу й продукту, дослідження користувачів, порівняльний аналіз конкурентів та аудит продукту, добираючи методи відповідно до важливих запитань. Результат — опис продукту, пріоритети та гіпотези.
02
Структура та прототипування
Інформаційна архітектура, навігація, ієрархія контенту та шляхи користувачів. Прототипи дають змогу вивчити основні сценарії та логіку важливих взаємодій до детального дизайну. У SKARR.PRO ми створюємо прототипи альтернативних моделей продукту та порівнюємо їх.
03
Візуальна концепція та основний інтерфейс
Ми досліджуємо, який вигляд, відчуття та поведінку має мати продукт, показуємо напрям на репрезентативних екранах і розробляємо основний інтерфейс із реалістичним контентом, розмірами екранів і станами для кожної дії.
04
Розробка, тестування та передача
Якщо розробку погоджено, ми реалізуємо погоджений обсяг на React, тестуємо ключові шляхи й стани та звіряємо результат із дизайном. Ви отримуєте погоджені файли, вихідний код і нотатки з налаштування.
Оберіть глибину
відповідно до потреб продукту.
Обидва варіанти охоплюють місячну роботу над продуктом. У таблиці показано, що входить до кожного рівня.
| Властивість |
SKARR
Індивідуальний дизайн екранів. Власна візуальна мова.
$7,000 / місяць
за місяць роботи
Придбати SKARR
Безпечне оформлення замовлення через Stripe |
SKARR.PRO
Глибше й детальніше опрацювання всього досвіду взаємодії, у кожній точці контакту.
$12,000 / місяць
за місяць роботи
Придбати SKARR.PRO
Безпечне оформлення замовлення через Stripe |
|---|---|---|
| Над чим працюємо | ||
| Вихідні дані | Вихідні дані Продукт із чітким напрямом. Завдання, аудиторію та обсяг наступної версії визначаємо разом. | Вихідні дані Модель продукту ще не визначена. Перш ніж зупинитися на одному варіанті, ми розглядаємо кілька напрямів. |
| Модель продукту та сценарії | Модель продукту та сценарії Одна модель продукту та ключові сценарії, які вона має охоплювати. | Модель продукту та сценарії Порівняння альтернативних моделей продукту та опрацювання ключових сценаріїв для вибраної моделі. |
| Основний інтерфейс | Основний інтерфейс Основні екрани, спроєктовані з урахуванням ієрархії, станів і візуального характеру. | Основний інтерфейс Основні екрани, для яких гіпотези перевіряють на прототипах до детального дизайну. |
| Глибина роботи | ||
| Дослідження | Дослідження Аналіз бізнесу й продукту, дослідження користувачів і аудит продукту, підібрані відповідно до важливих запитань. | Дослідження Ті самі дослідження, доповнені порівняльним аналізом конкурентів і додатковими дослідженнями для з’ясування відкритих питань. |
| Дизайн-система | Дизайн-система Компоненти, типографіка та принципи роботи основного інтерфейсу. | Дизайн-система Розширена система, підготовлена для підтримки майбутніх функцій. |
| Ітерації | Ітерації Спільний перегляд ключових рішень на кожному етапі. | Ітерації Більше ітерацій моделі, сценаріїв і деталей інтерфейсу. |
| Співпраця | ||
| Щомісячна робота | Щомісячна робота Робота над продуктом протягом місяця. Обсяг і очікувані результати узгоджуємо до початку. | Щомісячна робота Робота над продуктом протягом місяця на вибраному рівні. Обсяг і очікувані результати узгоджуємо до початку. |
| Дизайн у коді | Дизайн у коді Основна частина у вигляді дизайн-файлів або, якщо це погоджено, інтерактивного прототипу на React. | Дизайн у коді Основна частина у вигляді дизайн-файлів, інтерактивного прототипу на React або функціонального інтерфейсу на React — як погоджено. |
| Що ви отримаєте | Що ви отримаєте Опис продукту, шляхи користувачів, основний інтерфейс і погоджені матеріали для передачі. | Що ви отримаєте Те саме, а також перевірені гіпотези, порівняні моделі та розширена система. |
Перш ніж
ми почнемо.
Чи потрібні нам файли Figma, чи продукт можна спроєктувати в коді?
Можливі обидва варіанти. Основну частину можна спроєктувати у Figma або безпосередньо в React як інтерактивний прототип. Формат узгоджуємо на початку, зважаючи на те, як ваша команда перевірятиме результат і продовжуватиме роботу.
Чим це відрізняється від UX/UI-дизайну?
UX/UI-дизайн працює в межах уже визначеного продукту: його екранів, сценаріїв і станів. Продуктовий дизайн починається раніше — із завдання, аудиторії та моделі продукту — і на цій основі формує основний інтерфейс.
Чи включає продуктовий дизайн розробку?
За домовленістю основу можна реалізувати на React: як інтерактивний прототип або робочий інтерфейс. Повноцінна розробка застосунку, серверної частини та інтеграцій визначається окремо.
Чи замінює це дослідження ринку?
Ні. Ми аналізуємо бізнес, людей і контекст використання, щоб ухвалювати рішення щодо продукту. Формальне дослідження ринку до цієї роботи не входить.
Що відбувається після місяця?
Ми разом оцінюємо результати й узгоджуємо наступний крок: подальші ітерації, розширення системи або розробку додаткових функцій.
Залишилися запитання?
Обговорити ваш продукт