Skip to main content
5 человек
в команде
5 месяцев
в работе
Спроектировали и разработали совместно с IOHK децентрализованное приложение на платформе Plutus. Созданный DApp — это один из первых NFT-маркетплейсов на Cardano
Узнать больше

Как создать дизайн для 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, уточнив множество деталей и только потом перейдя к отрисовке интерфейса, мы создали действительно минимальную версию для достижения цели пользователем, а заказчику сэкономили время и средства на переработку ненужных компонентов и экранов в будущем.

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

article-logo
TON_Mintless_Jettons
горячее
L2_Bitcoin
новое
polymarket_article

Что такое Polymarket и как работает рынок предсказаний?

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

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

Статьи

web3
business
package_solutions
выбор редакции
tapalki
выбор редакции
uma_protocol
выбор редакции
AdsGram
выбор редакции

Способ монетизировать игры в Telegram

Алексей Федин

Исполнительный директор Magnetto.pro

Статьи

web3
mobile
TON
hamster_tma
выбор редакции

Как хомяк, но для трафика: привлекаем аудиторию тапалкой

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

бизнес-аналитик MetaLamp

Статьи

web3
dApps
mobile
dao

Что такое DAO?

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

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

Статьи

education
web3
ethereum_gas
scroll

Как работает блокчейн Scroll: технический обзор

Алексей Куценко

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

Статьи

ethereum
web3
dApps
L2
nft_stacking
выбор редакции

Понимание стейкинга NFT: механизмы и преимущества

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

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

Статьи

ethereum
web3
dApps
legendary_play
выбор редакции
payments
sharding
выбор редакции
ton
выбор редакции
bottle_wine
выбор редакции
launchpad
twa
выбор редакции
buildings
выбор редакции
anonymus

Zero-Knowledge Proofs: важный тренд в блокчейне на 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
выбор редакции
red space
выбор редакции
speed up development
myths
выбор редакции
launching
выбор редакции

Кого нанимать для успешного запуска MVP

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

Head of Sales Department

Статьи

business
startup
MVP
galaxy
magazine
spaceman
выбор редакции
coffee
investors
nft

Как мы создали первый NFT-маркетплейс на Cardano

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

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

Статьи

cardano
web3
nft
stair
выбор редакции
bridge
rocket
abstraction

Как мы нанимаем инженеров Plutus через собственную программу обучения

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

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

Статьи

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