Как бизнес-процессы превратить в интерфейс: от user stories до no-code
В последнее время no-code и low-code решения стали одними из самых трендовых инструментов, которые используют и дизайнеры, и продакты, и даже в крупных компаниях. Продукт без написания кода с нуля экономит время, деньги и силы по сравнению с традиционной разработкой. Чем не инструмент для стартаперов, которым нужно быстро и дешево проверить гипотезу и сделать MVP?
Начнем с того, что же такое стартап. Существует классическое определение Стива Бланка:
“Стартап — это временная организация, созданная для поиска повторяемой, масштабируемой и устойчивой бизнес-модели”.
Однако на масштабирование нужны деньги, которые не всегда есть в нужном количестве, и тут существует два развития событий:
“Стартап — это группа людей, которая пытается найти способ заработать деньги”.
или
“Стартап — это группа людей, которая одолжила деньги, чтобы найти способ заработать больше денег”.
Как правило, стартап перед началом разработки должен подтвердить свои базовые бизнес-гипотезы, снять с рынка основные требования пользователей, на которых будет основываться продукт. Для этого есть обширный инструментарий, например, проблемные интервью, карты эмпатии, прототипы и т. д.
Зачастую стартапы допускают большую ошибку, когда приступают к разработке продукта, не уделяя должного внимания проработке самих бизнес-процессов. Часто это бывает с командами, которые имеют общее видение продукта, но не представляют как конечный пользователь будет получать закладываемую в него ценность.
Для решения этой задачи можно использовать подход user stories, который активно используется в разработке.
User story (пользовательская история) — это небольшой текст в формате пожелания, который помогает выяснить, кто такой пользователь, чего он хочет и какова его цель. Чаще всего применяется при разработке приложений, софтов, ПО. Истории помогают разработчикам создать такой продукт, который удовлетворит пожелания большинства пользователей.
При организации бизнес-процессов необходимо накопить как можно больше историй, собрать концептуальный сценарий, основанный на паттернах поведения. И тогда ваш продукт станет релевантным для пользователей, у которых примерно одна и та же проблема. Собирая различные интерпретации, мы конкретизируем сценарий и собираем use case — идеальный сценарий, который максимально абстрактно решает проблему всех собранных user stories.
Agile User Stories
Пользовательские истории — это номинальное требование от пользователя с описанием его конечной цели. User story не технический документ, а неформальный емкий текст в тезисах (а еще лучше в карточках).
Формула Agile User Stories:
- как <роль/персонаж юзера>
- <что-то хочу получить>
- <с такой-то целью>
INVEST – критерии для хорошей пользовательской истории:
«I» Independent — независимая
«N» Negotiable — обсуждаемая
«V» Valuable — ценная для потребителя
«E» Estimable — оцениваемая
«S» Small — короткая
«Т» Testable — тестируемая
Примеры Agile User Stories:
“Как водитель автомобиля, я хочу заранее получать уведомление о том, что кончается топливо, чтобы автомобиль не заглох в самый неподходящий момент”.
“Как водитель автомобиля, я хочу, чтобы при низком уровне запаса топлива, при построения маршрута до ближайшей заправки, навигатор предупредил меня о видах топлива на этой заправке, чтобы я смог доехать до нужной мне заправки”.
Итого: user story — это короткое, «минималистичное» описание задачи, которое формулируется как описание заинтересованным пользователем продукта желаемого функционала от продукта.
Use case
Когда разрабатывают ПО, для него пишут спецификацию — большой документ, который описывает, как должна работать система или продукт. Use case — часть такого документа, которая описывает все взаимодействия системы с пользователем. Пишется use case от лица абстрактных пользовательских ролей. Пример простейшего use case: пользователь заполнил поля формы, а система должна сохранить введенные данные.
Другой пример use case:
Я, как пользователь-водитель (с включенной лампочкой низкого уровня топлива) смогу:
- посмотреть все ближайшие заправки на карте
- посмотреть все ближайшие заправки списком
- выбрать заправки нужного бренда
- посмотреть на выбранной заправке наличие нужного топлива
- построить до выбранной заправки маршрут
User flow (диаграмма пользовательского пути)
Это визуальное представление последовательности действий, которые пользователь выполняет для достижения своей цели. Обычно представлено в виде диаграммы, которая показывает весь путь, по которому движется пользователь при использовании продукта.
Пример user flow:
User flow подсвечивает сбой логики и разрывы пользовательского пути еще до того, как начнется фаза детальной работы над компонентами. И самое главное — он побуждает искать самый простой способ достижения цели и вовлекает пользователя в поиски альтернатив.
Прототипирование
Следующий этап в проектировании продукта — это прототипирование, которое используется для исследования прогресса и функциональности продукта до начала его фактической разработки. Прототип отвечает требованиям заказчика и исполнителя: зачем нужен конечный продукт, как будет выглядеть, как с ним будут взаимодействовать.
И прототип, и вайрфрейм, и мокап — это разные инструменты, используемые в процессе разработки веб-сайтов или приложений, имеющие разные цели и функционал. В чем же тогда их отличие?
- Вайрфрейм — это низко детализированное представление интерфейса в черно-белом виде и с упором на логику продукта, а на структуру и содержание (можно сделать на Figma, Sketch, Adobe XD, Axure RP, Balsamiq). Основная цель вайрфрейма — предоставить общую концепцию и структуру интерфейса, без углубления в детали визуального дизайна. Вайрфреймы помогают команде разработки и заказчикам визуализировать и обсудить размещение элементов интерфейса, их взаимодействие и пользовательский опыт. Они также служат основой для последующего дизайна и программирования.
- Прототип сайта представляет собой интерактивную модель или пример функциональности сайта, которая имитирует взаимодействие пользователя с интерфейсом. Он обычно создается с использованием специальных инструментов прототипирования, таких как Figma, Adobe XD, InVision и т. д. Прототип может содержать кликабельные элементы, анимации и логику переходов между страницами. Основная цель прототипа — проверить и протестировать концепцию и функциональность сайта, сосредоточившись на пользовательском опыте и потоке взаимодействия.
- Мокап (макет) — статичное изображение или визуальное представление дизайна сайта или приложения. Он обычно создается с использованием графических инструментов, таких как Photoshop, Sketch, Figma и др. Мокап содержит визуальные элементы интерфейса: шрифты, цвета, изображения, компоненты и композицию страницы. Мокапы могут быть использованы для демонстрации и обсуждения внешнего вида и стиля дизайна с командой разработки, дизайнерами и заинтересованными сторонами.
Основная разница между прототипом сайта и мокапом заключается в их функциональности и уровне детализации. Прототип сайта сосредоточен на интерактивности и взаимодействии пользователя с сайтом, в то время как мокап сконцентрирован на визуальной части. Прототип используется для тестирования функциональности и user flow, в то время как мокап используется для визуализации и обсуждения внешнего вида и компоновки элементов интерфейса.
No-code и low-code
No-code и low-code — способы создания прототипа или самого продукта без написания кода с нуля, которые очевидно экономят время и деньги по сравнению с традиционной разработкой.
No-code — это способ создания приложений с помощью платформенных решений, которые используют методы drag-and-drop («тащи-и-бросай»), то есть возможность захватить мышью элемент и перенести его, а также визуальное моделирование вместо написания кода.
Low-code — сервисы с no-code решением и возможностью дописать код вручную. Основу сайта собирают в конструкторе, но для выполнения отдельных задач используют полноценное программирование. Можно сделать личные кабинеты, добавить возможность оставлять заказы с выбором разных опций, организовать обработку данных, их передачу или автоматическую визуализацию в графиках.
Для кого подходит:
- стартаперы (инвестор не готов вкладываться в идею, которую нельзя потрогать)
- предприниматели и крупные компании (программисты стали стоить дорого, бизнес не всегда может себе их позволить)
- продакты и маркетологи, дизайнеры (простые люди не хотят писать код, они хотят решать задачи)
- разработчики (раньше ты писал приложения, а теперь ты их строишь)
Почему не нанять разработчика в штат?
Использование no-code сервисов имеет ряд преимуществ по сравнению с наймом разработчиков. Вот некоторые из них:
- Быстрота разработки. No-code сервисы предлагают готовые компоненты и инструменты, которые позволяют создавать приложения и веб-сайты без необходимости писать код с нуля. Это позволяет сэкономить время на разработке и ускорить процесс создания продукта.
- Низкая стоимость. No-code сервисы часто предлагают доступные планы или даже бесплатные версии для начинающих пользователей. Это может быть гораздо дешевле, чем найм опытных разработчиков, особенно если у вас нет большого бюджета.
- Легкость использования. No-code сервисы обычно имеют интуитивно понятный интерфейс и простые инструменты, которые позволяют даже непрофессионалам создавать приложения и веб-сайты. Вам не нужно быть экспертом в программировании, чтобы использовать эти сервисы.
- Гибкость и масштабируемость. No-code платформы часто предлагают готовые интеграции с различными сервисами и API, что позволяет вам создавать сложные приложения с расширенными функциональными возможностями. Кроме того, вы можете легко масштабировать свое приложение по мере роста вашего бизнеса.
- Сокращение зависимости от разработчиков. Используя no-code сервисы, вы можете сделать большую часть работы самостоятельно без необходимости полностью зависеть от разработчиков. Вы можете вносить изменения в свое приложение или веб-сайт самостоятельно, что экономит время и ресурсы.
- Быстрая отладка и итерации. No-code сервисы обычно предоставляют инструменты для быстрой отладки и тестирования приложений. Это позволяет вам оперативно исправлять ошибки и вносить изменения в реальном времени, улучшая процесс разработки.
Недостатки no-code:
- Ограничения сервиса. Если вам требуется сложное пользовательское решение или специфическая функциональность, то может потребоваться найм разработчиков для создания и настройки пользовательского решения. No-code сервисы могут быть ограничены в своих возможностях и не всегда позволяют реализовать сложные и уникальные требования.
- От некоторых решений придется отказаться. Использование no-code сервисов может ограничить ваш контроль над кодом и архитектурой приложения. Если у вас есть специфические требования по безопасности, производительности или масштабируемости, то найм разработчиков может быть предпочтительнее.
Вывод:
Выбор между использованием no-code сервисов и наймом разработчиков зависит от конкретных требований проекта, бюджета и технических знаний. No-code сервисы предоставляют быстрые и доступные инструменты для создания простых приложений и веб-сайтов, но могут быть ограничены в функциональности и гибкости. Если у вас сложный проект или уникальные требования, то найм разработчиков может быть более подходящим вариантом для вас.
Комплект стартапера для no-code решений:
- No-code платформы: Bubble, Adalo, Webflow, Glide, FlutterFlow и OutSystems. Полное понимание бизнес-процессов позволит сократить время изучения платформы и быстрее принять решение по использованию того или иного сервиса. Исследуйте их функциональности, возможности интеграции и цены, чтобы выбрать наиболее подходящую для вашего стартапа.
- Дизайн и UX/UI: Balsamiq, Figma, Canva, AdobeXD.
- Интеграции и API: Make (ранее Integromat), n8n, Zapier, IFTTT, Albato.
- Лендинги: Tilda, Webflow, Wordpress.
- Инструменты аналитики: Google Analytics, Mixpanel, Яндекс.Метрика. Здесь отслеживаем метрики и данные пользователей: посещаемость, конверсии и поведенческие показатели. Это поможет вам принимать решения и оптимизировать ваш продукт и маркетинговые усилия.
- В качестве инструмента для управления базами данных и организации информации можно использовать Notion и Airtable. Они оба предлагают гибкую структуру данных и мощные функции для создания и управления базами данных и удобное их представление.
- Конструкторы чат-ботов — это инструменты, которые позволяют создавать и настраивать чат-ботов без необходимости программирования. Они предоставляют графический интерфейс, в котором можно определить логику поведения чат-бота, настроить ответы на различные вопросы и интегрировать его с другими сервисами и платформами. Некоторые из популярных конструкторов чат-ботов: Chatfuel, ManyChat, Dialogflow, Botpress.
- Следить за появлением новых no-code сервисов можно на сайте: https://www.producthunt.com/