Кейс №2: Methodix
Кратко
Компания
«Балтика»
Продукт
Methodix — помощник для проектного и продуктового управленца.
Моя роль
Продакт дизайнер
Какие стоят задачи
Продумать основные «что, зачем, как?» продукта,
Задать общий стиль и тон продукту, обернуть в минимальный бренд,
Отрисовать макеты для MVP,
Продумать масштабирование с учётом возможной B2B составляющей,
Получить от бизнеса «ок» на разработку полноценного продукта.
Задать общий стиль и тон продукту, обернуть в минимальный бренд,
Отрисовать макеты для MVP,
Продумать масштабирование с учётом возможной B2B составляющей,
Получить от бизнеса «ок» на разработку полноценного продукта.
Что делаю
Анализирую основные задачи продукта, отмечаю, где он может быть чем‑то большим, предвосхитить ожидания,
Рисую макеты, продумываю UF,
Консультирую команду по UX,
Участвую в подготовке полной продаже идеи бизнесу.
Рисую макеты, продумываю UF,
Консультирую команду по UX,
Участвую в подготовке полной продаже идеи бизнесу.
Результат на текущий момент
Идея продана бизнесу, дан зелёный свет на разработку MVP,
Отрисованы макеты для MVP: регистрация/авторизация, ЛК, навигация, базовые сущности, один из ключевых процессов продукта — калькулятор методологий, предусмотрена мобильная версия,
Произошёл коннект с разработкой, логика и вёрстка по макетам почти завершена,
MVP на финишной прямой к тестовому стенду и демонстрации бизнесу.
Отрисованы макеты для MVP: регистрация/авторизация, ЛК, навигация, базовые сущности, один из ключевых процессов продукта — калькулятор методологий, предусмотрена мобильная версия,
Произошёл коннект с разработкой, логика и вёрстка по макетам почти завершена,
MVP на финишной прямой к тестовому стенду и демонстрации бизнесу.
Не кратко
Ситуация
«Балтика» — крупная компания с множеством направлений деятельности. Основное — производство, которое поддерживается рекламой, менеджментом, проектной и продуктовой работой.
Из-за разнообразия направлений у компании большой портфель проектов. Подразделения регулярно сталкиваются с необходимостью запускать новые проекты или продукты.
Возникает частый вопрос: «Как инициировать проект? Что делать?». Чтобы облегчить работу для коллег, впервые сталкивающихся с проектной или продуктовой деятельностью, возникла идея создать «Витрину проектов», впоследствии названную Methodix.
Из-за разнообразия направлений у компании большой портфель проектов. Подразделения регулярно сталкиваются с необходимостью запускать новые проекты или продукты.
Возникает частый вопрос: «Как инициировать проект? Что делать?». Чтобы облегчить работу для коллег, впервые сталкивающихся с проектной или продуктовой деятельностью, возникла идея создать «Витрину проектов», впоследствии названную Methodix.
Задача
Разработать MVP для оптимизации управления продуктовой и проектной историей. Презентовать MVP ключевым стейкхолдерам, продемонстрировать его ценность и получить одобрение на развитие до полноценного продукта, а также дальнейшее масштабирование.
Наличие MVP, а не прототипов — условие от бизнеса.
Наличие MVP, а не прототипов — условие от бизнеса.
Действие №1: Цели и структура
Methodix задумался как веб-сервис, который значительно упрощает работу с проектами и продуктами.
Основные инструменты:
Калькулятор методологий — помогает выбрать наиболее подходящую методологию для работы на основе входных данных.
Справочник методологий — содержит методы и стандарты работы с проектами и продуктами.
Конструктор — второй по важности инструмент сервиса, принцип его работы пока что не для огласки, а детали его реализации пока обсуждаются.
Глоссарий — термины и понятия для быстрого погружения в тему.
Источники и сертификации — полезная информация.
Тесты — помогают проверить и улучшить знания в проектных и продуктовых методах.
Основные инструменты:
Калькулятор методологий — помогает выбрать наиболее подходящую методологию для работы на основе входных данных.
Справочник методологий — содержит методы и стандарты работы с проектами и продуктами.
Конструктор — второй по важности инструмент сервиса, принцип его работы пока что не для огласки, а детали его реализации пока обсуждаются.
Глоссарий — термины и понятия для быстрого погружения в тему.
Источники и сертификации — полезная информация.
Тесты — помогают проверить и улучшить знания в проектных и продуктовых методах.
Мной были предложены два ключевых механизма, на которых базируется логика будущего сервиса:
Система свойств — тегов — для каждой крупной сущности, по которой будут работать связки внутри сервиса. Например, ключевые характеристики методики и жёсткий фильтр по ним: если хотя бы одна из характеристик отсутствует или не равна нужной — методика не проходит отбор.
Система антиципации внутри процессов продукта — для настоящей помощи и качественных результатов, сервис должен предвосхищать запрос и цель пользователя. То есть не просто выдавать результат в формате:
Система свойств — тегов — для каждой крупной сущности, по которой будут работать связки внутри сервиса. Например, ключевые характеристики методики и жёсткий фильтр по ним: если хотя бы одна из характеристик отсутствует или не равна нужной — методика не проходит отбор.
Система антиципации внутри процессов продукта — для настоящей помощи и качественных результатов, сервис должен предвосхищать запрос и цель пользователя. То есть не просто выдавать результат в формате:
a+b+c=d
а предлагать возможные варианты, например:
Если сейчас A+B+C=D,
то заменив A → A/2 и С → X,
вы получите ½A+B+X=D²,
то заменив A → A/2 и С → X,
вы получите ½A+B+X=D²,
помогая тем самым пользователю искать варианты решения и сравнивать их. Если говорить не формулами, а конкретикой, то, например, сервис может предложить увеличить команду разработки, благодаря чему подойдёт методика SAFe, а не SoS, работа в рамках которой приведёт к уменьшению рисков.
Действие №2: Состав MVP
Чтобы MVP реально был minimum, взяли в реализацию всего два блока:
Базу с попаданием пользователя в систему, навигацией и представлениями основных сущностей.
Один из ключевых процессов — «Калькулятор методологий» в его самой простой версии. Так как в нём заложена сложная математика, команде аналитиков пришлось бы несколько месяцев составлять списки характеристик тех или иных методик, не говоря уже о списке самих методик. По этому решили показать процесс в его начальной точке развития. Заложили мобилку для более объёмной демонстрации и задела на будущие адаптивы.
Базу с попаданием пользователя в систему, навигацией и представлениями основных сущностей.
Один из ключевых процессов — «Калькулятор методологий» в его самой простой версии. Так как в нём заложена сложная математика, команде аналитиков пришлось бы несколько месяцев составлять списки характеристик тех или иных методик, не говоря уже о списке самих методик. По этому решили показать процесс в его начальной точке развития. Заложили мобилку для более объёмной демонстрации и задела на будущие адаптивы.
Действие №3: Определение стека
В основе проекта лежала Material Design 3, и для быстрого развертывания демонстрационной версии мы выбрали WordPress. Это решение было логичным, так как разработчик хорошо знает эту платформу, а адаптация моих макетов под вёрстку и логику не вызовет у него сложностей — мы с ним работаем уже давно и сделали не один проект.
Хотя Material Design 3 значительно опередил вторую версию в плане UI, при разработке мы столкнулись с проблемой: веб-версия дизайн-системы была неполной. Некоторые ключевые компоненты либо отсутствовали, либо находились под тегом planned. Почти все задачи нужно было решать базовыми компонентами, чтобы облегчить и так потяжелевшую работу фронт-энд разработчика.
Действие №4: Бренд
На этапе разработки концепции не было необходимости сразу создавать полноценный бренд. Однако презентовать «голый» продукт бизнесу тоже было бы не комильфо. Чтобы не тратить ресурсы на полный брендбук, я предложил минимальный набор гайдлайнов: базовый логотип, ключевые брендовые цвета, лёгкие векторные иллюстрации, стандартные интерфейсные шрифты.
В логотипе использовали простой, но эффективный графический приём: круг с тремя сходящимися в точке линиями, символизирующими рост и развитие. Это решение выполняло две задачи одновременно: отражало основной символ заказчика — три полоски — и символизировало движение вперёд. Плотная форма логотипа создавала ощущение надёжности и уверенности.
Для цветовой палитры оставили полностью корпоративные цвета. Такой подход позволил создать у заказчиков чёткую ассоциацию с продуктом, а саму идею представить как уже «упакованную». Лишнюю работу не сделали, базовое доверие вызвали. В дальнейшем можно будет легко доработать и масштабировать этот минималистичный бренд, когда это потребуется.
Действие №5: Макеты
Регистрация и авторизация
Первым шагом в работе над макетами стало проектирование интерфейсов для логина, регистрации и сброса пароля. Всё выполнено по стандартным паттернам, с акцентом на строгий визуальный стиль, так как MVP создавался для внутреннего использования в компании. Стили были адаптированы под корпоративный бренд, чтобы сохранить необходимый официоз. При регистрации предусмотрен ввод фамилии, имени и отчества, что позволяет сверять данные с базой сотрудников, поскольку сервис функционирует в закрытой среде.
Навигация
После авторизации пользователь попадает в раздел методологий и методов, который было решено сделать стартовым экраном. Навигация выполнена в виде бокового дровера, по рекомендациям Material Design 3. Меню включает стандартные подразделы: профиль пользователя, два основных блока — «Инструменты» и «Библиотеки», а также раздел настроек. Навигацию открывают и закрывают логотипы сервиса и компании — ещё один крючок привязки к бизнесу.
Раздел методологий и методов
Основной экран, который состоит из трёх ключевых элементов: заголовок со строкой поиска, блок фильтрации и список сущностей в виде карточек. Основные фильтры вынесены на верхнюю панель, чтобы облегчить пользователям поиск нужной методологии. Их релевантность определена экспертами из команды аналитки, в дальнейшем их список будем составлять на основе фидбека от пользователей. Фильтрация может быть как верхнеуровневой, так и более детальной. Карточки содержат краткое описание, ключевые характеристики и теги, которые позволяют быстро оценить, подходит ли методология. Я хотел со старта дать как можно больше информации для оценки, чтобы не менее 40% информации была понятна без погружения в элементы списка.
При разворачивании карточки методологии или метода отображается полная информация, включая описание, область применения, бюджет, плюсы и минусы, а также связанные документы и другие детали. Всё это организовано в стиле бенто-дизайна — небольшие визуально разделённые блоки, что облегчает восприятие информации. Такой подход также упрощает адаптацию для мобильных устройств.
Сравнение методологий и методов
Пользователи могут сравнивать до трёх методологий между собой. Без этого функционала библиотека была бы неполной, так что мы взяли его в MVP. Сравнение осуществляется через кнопку «Сравнить» на карточке, после чего появляется Floating Action Button (FAB) с возможностью начать сравнение. Выбрав две или три методологии, пользователь видит поп-ап с сравнительной таблицей. Мы сознательно ограничили количество до трёх, чтобы не перегружать интерфейс. На этапе MVP таблицу в мобилке реализовали с горизонтальным скроллом — для адаптива таблиц нужна отдельная вёрстка.
Личный кабинет
Состоит из двух больших блоков: «Мой Методикс» и «Система». Первый собирает все сущности, с которыми взаимодействует пользователь: методологии, инструменты, результаты тестов, обобщает избранное со всего сервиса. Также предусмотрены настройки личных данных. В блоке «Система» размещены: ТП, уведомления и список новостей. На старте эти блоки были отобраны для MVP, чтобы обеспечить базовый функционал и структурировать взаимодействие пользователей с сервисом.
Настройки
Далее отрисовал раздел настроек, здесь всё стандартно: настройки электронной почты, логинов, паролей и уведомлений. Для этапа MVP этого набора мы посчитали достаточно, но в дальнейшем планируем расширить и доработать этот раздел.
Калькулятор методологий
Калькулятор методологий — один из ключевых процессов сервиса, реализованных в MVP. Мы задействовали лишь 10-15% от всего функционала из-за сложной математической основы, требующей обширных данных и кастомной математики, которыми сейчас занимаются ребята из отдела аналитики. С главного экрана можно: подобрать новую методологию, просмотреть черновики незаконченных подборов, вернуться к уже законченным подборам методологий. Пользователь пошагово вводит данные: область применения, тип работы, сроки, бюджеты, опыт и размер команды. Система генерирует облако тегов и предлагает подходящие методологии. На втором этапе можно корректировать параметры и получать рекомендации для оптимизации. В итоге пользователь получает адаптированную методологию, которая помогает начать работу с уже готовым решением, а не с нуля.
Развитие инструмента предполагает более гибкий подбор методологий по большему спектру параметров.
В общем все макеты были отрисованы в течение двух рабочих недель, с учётом того, что дважды в неделю были регулярки с командой, на которых решались вопросы по визуалу.
Разработка началась чуть раньше завершения макетов и проходила без сособых сложностей.
Результат
MVP сервиса Methodix.
Путь от идеи до работающего MVP занял два месяца. Основные функции — регистрация, авторизация, навигация и логика сервиса — уже готовы. Команда аналитиков, выступая в роли администраторов, может наполнять справочники данными и тестировать работу системы. После завершения тестирования на достаточном объёме данных и оформления паспорта проекта планируется демонстрация бизнесу.
Путь от идеи до работающего MVP занял два месяца. Основные функции — регистрация, авторизация, навигация и логика сервиса — уже готовы. Команда аналитиков, выступая в роли администраторов, может наполнять справочники данными и тестировать работу системы. После завершения тестирования на достаточном объёме данных и оформления паспорта проекта планируется демонстрация бизнесу.
Несколько скриншотов с тестового стенда
Связаться со мной
Отсюда через форму
Denya Design,
©
Другими способами
