Привет всем! Меня зовут Женя, я системный аналитик в Sminex IT. Сегодня я хочу поделиться нашим опытом использования методик прототипирования при реализации ИТ‑проекта «Портал продукта». Расскажу, как с помощью прототипов нам удалось попасть в ожидания заказчика, уложиться в сроки и сделать классный продукт.

Евгений

Системный аналитик

Проблематика

Как правило, на старте проекта заказчик не всегда точно понимает, насколько его пожелания будут поняты и соблюдены. Возможность увидеть и «пощупать» готовый результат появляется только при готовности первой MVP‑версии. При таком подходе неизбежен возврат на этапы анализа и разработки, что накладывает риски на проект: увеличиваются сроки и стоимость разработки.

Прототипирование

Мы включили этап прототипирования в блок сбора и анализа требований для предотвращения обозначенных рисков.

Прототип интерфейса позволяет быстро получить обратную связь на самых начальных этапах проекта. Он помогает понять, на сколько удобен проектируемый пользовательский интерфейс и позволит ли он закрыть бизнес — потребности.

Виды прототипов

Цель создания прототипа — подготовить упрощённую версию продукта, демонстрирующую его основные функциональные возможности. Существуют следующие типы прототипов:

• Прототипы низкой точности — создаются относительно быстро и не требуют специальных знаний. Они позволяют проработать идею функции самостоятельно или вместе с дизайнером. Например, можно набросать зарисовки интерфейса в Miro.

• Прототипы средней точности — компромисс между низкой и высокой точностью. В таких прототипах элементы интерфейса рисуются достаточно реалистично. В Sminex IT их разработкой занимаются аналитики и продакт/проджект‑менеджеры. Для создания используем инструмент MockFlow.

• Прототипы высокой точности — полностью проработанные карты экранов продукта с оформленным визуалом. Их создают наши UX/UI дизайнеры в интерактивном виде с помощью Figma, Framer или Sketch.

Кейс применения прототипов в рамках проекта "Портал продукта"

Заказчик вышел с запросом реализации общей вики по нашим девелоперским проектам. Данный ресурс должен дать сотрудникам необходимую информацию и интерактив о проектах.

Ниже пошагово расскажем, как мы применили прототипирование при разработке, и чем прототипы помогли нам на каждом этапе.

Шаг №1. Синхронизация с заказчиком

После сбора бизнес‑требований мы организовали дополнительную встречу с заказчиком, где продемонстрировали прототипы низкой точности. Цель — проверить соответствие всех необходимых функций и показать предполагаемые элементы интерфейса.

Что нам это дало:

• Добавлено дополнительное меню для доступа к внешнему сервису с проектной информацией.

• Изменена система навигации. Мы отказались от бокового меню для увеличения области информации о продукте.

• Улучшен слайдер с рендерами домов, устранена проблема с недоступностью изображений в прошлых версиях портала.

Итог: Результат работы по прототипу низкой точности позволил улучшить требования к системе и учесть новые функции на начальном этапе.

Шаг №2. Передача задачи в отдел UX/UI-дизайна

Мы разработали прототип средней точности по обратной связи заказчика, установили связи между экранами, написали user stories, создали user persona. Далее передали ТЗ в отдел UX/UI‑дизайна.

Итог: Прототип средней точности в ТЗ помог предотвратить расхождения между ожиданиями аналитика и представлениями дизайнера о системе.

Шаг №3. Юзабилити тестирование

Теперь у нас есть прототип высокой точности, который отвечает ожиданиям заказчика и был скорректирован с точки зрения UX/UI. Однако важно убедиться, что продукт будет удобен для конечных пользователей. На самом деле на шаге № 2 дизайнер разработал не один, а целых три варианта прототипов, которые мы использовали для тестирования гипотез на пользовательской фокус‑группе.

Мы подготовили задания:

1. Найти информацию об архитектуре проекта (воспользоваться поиском).

2. Найти и открыть исходные изображения рендеров фасадов.

3. Подписаться на обновления информации по машиноместам.

4. Предложить исправить неточности в информации на странице о детской площадке.

Итог: Установили, что для задания № 1 пользователям был понятнее второй вариант прототипа (окно поиска в центре страницы). Респонденты справлялись с заданием на 60–70% быстрее по сравнению с первым вариантом (окно поиска в верхнем углу). Для заданий № 2–4 результаты выполнения в вариантах прототипа 1 и 2 — были одинаковые (+-15% отклонение во времени).

Также мы получили и неочевидные результаты: заметили, что пользователям не совсем было понятно, что разделы проекта с приглушенным оформлением были недоступны в системе. Мы приняли решение использовать вариант визуализации с дополнительной плашкой «статус», который дает пользователям информацию о готовности раздела.

На выходе мы получили ожидаемый результат, обеспечив качество и срок. «Портал продукта» успешно выпущен в прод, и пользователи оценили его удобство и функциональные возможности.

Практика внедрения этапа прототипирования показала положительные результаты. Мы планируем масштабировать ее на другие проекты и продуктовые группы.

Прототипирование помогает соблюдать сроки и сохранять содержание благодаря:

• Тщательной проработке функциональных требований. Наличие прототипа позволяет лучше понять и сформулировать функциональные требования системы.

• Точному описанию задач для дизайнера. Прототип помогает четко и подробно объяснить дизайнеру задачи по разработке интерфейса.

• Тестированию гипотез до разработки. Возможность тестировать различные гипотезы до начала разработки позволяет создать продукт, который точно удовлетворяет требованиям заказчика.

• Демонстрации продукта заказчику на старте проекта. Прототипирование позволяет показать заказчику, каким будет продукт по окончанию разработки. Это помогает избежать необходимости внесения изменений, которые могут повлиять на сроки проекта.

Обязательно делитесь своими кейсами и вопросами в комментариях. До новых встреч!