Skip to main content
Improvado
Международный агрегатор рекламных кампаний
60 млн $
капитализация
22 млн $
инвестиции в серии А
Создаем стартапы на блокчейне Cardano с использованием платформы Plutus, написанной на Haskell
Узнать больше

Как создать дизайн для MVP стартапа за 7 дней

rocket computer
Пожалуй, чаще всего я повторяю стартапам следующий совет: как можно быстрее выпускайте первую версию, а затем улучшайте её, опираясь на отклики пользователей. Говоря «выпускайте как можно быстрее», я имею в виду не то, что нужно выпускать программу, полную ошибок, а что нужно ограничиться минимальной функциональностью. Пользователи ненавидят ошибки, но они не против минимальной первой версии, если новые функциональности будут на подходе.
Пол Грэм
«Самые трудные уроки для стартапов», апрель 2006 г.

Мы решили написать эту статью, чтобы показать на реальном примере и опыте нашей команды, как можно быстро (за считанные дни) и эффективно разработать интерфейсы для MVP, используя открытые библиотеки и опытного UX|UI дизайнера.

В качестве примера мы взяли один из наших заказных проектов, с которым мы начали работу без какого-либо формального ТЗ и с минимумом вводной информации, а сроки по проекту обозначались как «Нам нужно это ещё вчера!». В нашем случае показательным было то, как специалисты помогли расставить приоритеты в работе, тем самым попав в потребности клиента и быстро доведя до результата — готовых дизайн-макетов MVP.

Описанные в статье подходы и практики может брать на вооружение каждая стартап команда, чтобы снижать скорость выпуска новых версий продукта и оптимизировать работу над дизайном. Обобщенные выводы можно прочитать в последнем разделе «Рекомендации стартап командам от дизайнера».

Контекст

Основатель early stage стартапа из Калифорнии обратился к нам с задачей разработки MVP платформы, снижающей расходы на облачную инфраструктуру. Функционал заключался в том, что пользователь мог быстро провести мониторинг работы своих серверов и получить рекомендации по улучшению показателей, а в дальнейшем заказать и оплатить более выгодные решения.

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

Задача MVP — понять, нужен ли подобный сервис на рынке, и закрывает ли он реальную проблему, а не выдуманную. Соответственно, на его реализацию в первом приближении нужно было потратить минимум бюджета и времени. Прямой автоматической монетизации в первой версии не предполагалось. Первых клиентов и первые платежи заказчик собирался обрабатывать вручную: когда клиент уже попользовался сервисом и готов оплатить подключение альтернатив.

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

Пример изображений/набросков, переданных нам от заказчика на старте проекта

Михаил Дашкевич
В данном случае отсутствие дизайна интерфейса стало главным стоппером на пути к началу разработки. Продукт предполагал работу со значительным количеством табличных данных, и интерфейсная часть должна была быть удобной и понятной для пользователя. Но на старте подробностей о проекте у нас было немного, и разработчикам было совсем не понятно что именно требуется реализовать в первой версии.
Михаил Дашкевич
Михаил Дашкевич
Tech Lead проекта

Работа над проектом

Заказчик хотел попасть из точки A только идея в голове и хаотичные макеты от руки, в точку Б — кликабельному MVP, который можно будет тестировать на реальных пользователях.

Юлия Черепанова
Моей задачей было переложить идею из мыслей клиента в конкретную последовательность действий и экранов для разработчиков. Но перед тем как сформировать оптимальный путь для пользователя в виде осязаемого интерфейса, важно было разобраться в ценности продукта и в том, как по задумке клиента пользователи ее должны получать.
Юлия Черепанова
Юлия Черепанова
Head of Design MetaLamp

Разбивка сложных задач на простые дала понять детали и трансформировать вводные данные в виде маркерных набросков и комментариев в понятный user flow — путь, который пользователь должен пройти, чтобы добиться своей цели.

Первые шаги в user flow нашего клиента

Данный user flow мы получили уже на 4 день работы над проектом. Первые 2 дня ушли на погружение дизайнера в контекст предметной области. Для этого пришлось погрузиться в особенности работы с облачной инфраструктурой, взяв консультации с нашими бекендерами и расспросив их о том что такое CPU, GPU, RAM, зачем техническим специалистам эти данные и пр.

Остальные 2 дня ушли на вопросы-уточнения для заказчика и формирование целостного пути пользователя.

После погружения в предметную область и общения с бекендерами я перешла к уточнениям для заказчика. Буквально к каждому непонятному моменту в набросках я выписывала вопрос и разбиралась, что имелось в виду

Например, в набросках был раздел «Recommendations», и для того, чтобы учесть этот блок в финальных макетах, нужно было разобраться, в каком виде будут рекомендации, как и кем они формируются и как это должно приблизить пользователя продукта к его цели и пр.

Юлия Черепанова
Head of Design MetaLamp

Следующим этапом появились первые экраны приложения, которые можно было обсуждать и вносить в них корректировки. Оставшиеся 3 дня тратились в основном на синхронизацию по промежуточным макетам в виде онлайн-встреч и демонстраций. Это дало возможность окончательно разобраться в устройстве проекта, уточнить детали, которые до сих пор всплывали при обсуждениях и всё больше раскрывали видение фаундера.


Ускорить выпуск первой версии продукта для демонстрации пользователям помогло то, что мы пошли не по стандартному флоу работы, где дизайнер отдаёт уже стилизованные макеты, выверенные по пикселям. В нашем случае результатом работы дизайнера стали черно-белые прототипы, которые покрывали функционально все сценарии для демо и были согласованы клиентом на предмет того, что все его идеи воплощаются в продукт так, как нужно. В качестве стилистического решения мы предложили использовать готовую библиотеку компонентов Ant Design т.к. разработчики уже имели опыт работы с ней и она функционально покрывала все необходимые элементы, которые были заложены дизайнером. Таким образом, мы нашли компромисс между желаемым результатом и смогли радикально снизить и стоимость, и временные затраты в работе.

Итоги работы

Было: 5 маркерных рисунков от заказчика, в которых было невозможно разобраться разработчикам, чтобы выпустить продукт.


Стало: макеты продукта и понятный user flow, по которому разработчики смогли воплотить работающий продукт, имея готовую библиотеку компонентов.

Один из финальных экранов проекта

Результат работы в цифрах:

  • 7 рабочих дней или порядка 40 часов работы дизайнера от получения задачи до финальных макетов.
  • 3 zoom-встречи с заказчиком и 2 очных встречи с разработчиками для погружения в предметную область.

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

Кроме того, получился классный дашборд. Действительно много информации вместили на одну страницу. Конкретно для разработчиков это был целый процесс обучения по стилизации таблиц. Нам рассказали много UX хаков в духе: числа выравниваются по правому краю, текст по левому и пр. Часто разработчики не задумываются об этом, а совместная работа над таким проектом помогла разобраться во многих нюансах.

Михаил Дашкевич
Tech Lead проекта

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

Кроме того, мы решили проблему отсутствия удобных материалов для демонстрации потенциальным пользователям во время кастдева:

Мне как раз нужно было увидеть готовые макеты, чтобы понять, как удобнее отражать все эти данные на странице. И в принципе сейчас я вижу необходимость показать интерфейс хоть в каком-то виде, чтобы получить комментарии от пользователей. Без макетов я упирался в своём кастдеве в то, что мне приходится объяснять клиентам то, как работает бекенд, на словах и маркерных набросках  — я уже задолбался, этот подход исчерпал себя.
Заказчик проекта

Рекомендации от дизайнера стартап командам

  • Ответы на вопрос «Кто и зачем пользуется сервисом?» должен транслировать основатель, но на вопрос «Как?» лучше отвечать дизайнеру. Это сэкономит время и ресурс команде, в которой нет опытного UX/UI специалиста.
  • Использование открытых библиотек не всегда оправданно, но это может радикально удешевлять и упрощать работу над MVP, цель которого быстро протестировать пользу для клиентов.
  • Структурная работа и вовлечение в детали лучше бездумной «отрисовки pixel-perfect макетов». Пройдя путь от вопроса «Кто и зачем?», проработав user flow, уточнив множество деталей и только потом перейдя к отрисовке интерфейса, мы создали действительно минимальную версию для достижения цели пользователем, а заказчику сэкономили время и средства на переработку ненужных компонентов и экранов в будущем.

Подписывайтесь на нашу еженедельную рассылку, чтобы получать подобные публикации прямиком на свою почту. В рассылку мы не вставляем рекламу, только материалы Журнала :)

sharding
новое
ton
bottle_wine
выбор редакции
Зачем вину блокчейн: как токенизируют премиальный алкоголь

Елизавета Черная

Редактор Бренд-медиа

Статьи

web3
nft
business
launchpad
twa
Тренды блокчейна и криптоиндустрии 2024: Telegram Mini Apps (TMA)

Елизавета Черная

Редактор Бренд-медиа

Статьи

web3
buildings
anonymus
выбор редакции
Zero-knowledge proof: один из трендов 2024 в блокчейне

Евгений Биктимиров

Венчурный аналитик

Статьи

ethereum
web3
dApps
cpay
выбор редакции
AA zksync
zero knowledge proofs
выбор редакции
stock market chart
выбор редакции
planets
fundraising
выбор редакции
cto
wallet
tokens
выбор редакции
rocket computer
выбор редакции
Как создать дизайн для MVP стартапа за 7 дней

Юлия Черепанова

Head of Design Office

Статьи

startup
MVP
design
nft
AI
crypto wallets
выбор редакции
Account Abstraction: что это такое и зачем нужно криптомиру

Павел Найданов

Solidity разработчик

Статьи

ethereum
web3
business
red space
выбор редакции
speed up development
myths
выбор редакции
Мифы о разработке блокчейн продуктов

Николай Бордуненко

Project manager at MetaLamp

Статьи

web3
dApps
startup
launching
выбор редакции
Кого нужно нанимать в команду для запуска MVP?

Алексей Сухарев

Head of Sales Department

Статьи

business
startup
MVP
galaxy
magazine
spaceman
выбор редакции
coffee
investors
nft
Первый NFT marketplace на Cardano

Станислав Жданович

Haskell разработчик

Статьи

cardano
web3
nft
stair
выбор редакции
bridge
rocket
abstraction
Как мы нанимаем Plutus инженеров через собственную программу обучения

Светлана Дульцева

Супервизор программы обучения

Статьи

education
cardano
web3
mountains
blockchain
salary
salary increase
app
developer with books
keyboard
abstract