Задача и пользователи
Цели бизнеса, люди, использующие продукт, и задачи, которые им нужно выполнять. Вместе мы определяем приоритеты и объём следующей версии.
Результат: описание продукта, приоритеты и гипотезы.
УслугиПродуктовый дизайн
Продуктовый дизайн
Работа, которая начинается ещё до экранов: задача, аудитория, модель продукта, ключевые сценарии и основной интерфейс. 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, если это согласовано: в виде интерактивного прототипа или работающего интерфейса. Полноценная разработка приложения, серверная часть и интеграции определяются отдельно.
Заменяет ли это исследование рынка?
Нет. Мы анализируем бизнес, людей и контекст использования, чтобы принимать решения о продукте. Формальное исследование рынка в эту работу не входит.
Что происходит по окончании месяца?
Мы вместе оцениваем результаты и согласуем следующий шаг: дальнейшие итерации, более широкую систему или разработку дополнительных функций.
Остались вопросы?
Обсудить ваш продукт