Как разработать UX дизайн для MVP в 2023

Что такое MVP?

MVP (эм ви пи) — это «минимально жизнеспособный продукт». Минимально означает ограниченность функций, то есть остаются только самые важные. Жизнеспособный подразумевает, что MVP работает и выполняет основные функции. То есть это ещё не конечный продукт, но и не тестовая версия. MVP должен закрывать главные потребности клиентов.

В глобальном смысле стартапа создание MVP — промежуточный этап между идеей и её реализацией. Зачем он нужен? Цель MVP — протестировать идею, проверить спрос и не сильно потратиться при этом.

Представим в качестве примера шикарно задизайненный продукт с 10 функциями. Если сделать шаг назад, то как мог бы выглядеть его MVP? Во-первых, у него было бы только 3 функции, но самые значимые. Во-вторых, дизайн был бы менее шикарный: безусловно, достойного качества, но минималистичный. Пользователи получат пользу и от такой версии и могут даже не понять, что использовали MVP. Да и какая разница, если потребности закрыты? MVP — это больше инструмент фаундера.

Цель MVP — проверить идею стартапа в условиях ограниченного бюджета

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

Как это обычно работает: после запуска MVP стартап собирает обратную связь от пользователей и решает, стоит ли создавать полноценный продукт. Чтобы донести, какую пользу несёт приложение, MVP должен работать качественно. Если это не так, то стартап провалится, не поведав миру о своей уникальной задумке. Конечно, ошибки лучше делать быстро и дешево, но в то же время MVP должен быть качественным.

Как выглядит MVP?

Чаще всего MVP существует в такой же форме, что и конечный продукт (приложение, сайт, предмет и так далее), но не всегда. Если цель стартапа — изобрести машину, то, очевидно, что и MVP тоже должен быть машиной, так как иначе передвижение — основная функция — не будет работать. В IT-сфере выбор форм больше. Давайте рассмотрим пример MVP.

Идея стартапа — создать приложение, которое помогает людям подбирать и покупать одежду, основываясь на их цветотипе и фигуре. У финального приложения должен быть автоматический алгоритм подбора. Но с MVP можно поступить легче и дешевле: пусть это тоже будет приложение, но без бэкенда. Два дизайнера могут подбирать одежду и прикреплять ссылки вручную. По сути, пользователям не важно, кто выбирал, если всё подошло и они довольны. Такой MVP будет стоить недорого и поможет проверить, есть ли спрос на онлайн-стилистов перед тем, как тратить время и деньги на искусственный интеллект.

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

Роль дизайна в разработке MVP

Человека легко отвлечь, а концентрация у него короткая, так что пользователи хотят моментально знать, что делать дальше. Если за пару секунд не получается найти следующий шаг в приложении, значит, его просто закроют. Собственно, именно дизайн помогает этого избежать. Он отвечает за логику и понятную структуру приложения.

Тут же и эстетика. Внешний вид приложения формирует первое впечатление — цвета, шрифты, кнопки, картинки и т.д. Все должно быть продуманно, чтобы не потерять пользователей из-за визуала.

Если MVP будет успешен, то приложение будет расти и развиваться. И созданный ранее дизайн должен быть масштабируемым. Особенность работы над UI и UX для MVP заключается как раз в том, чтобы сразу продумать возможность будущих изменений и подготовить для них место. Да, сейчас у MVP может быть 3 функции, но через год добавится еще 5. И всегда лучше предусмотреть это, чем потом заново разрабатывать дизайн.

Из чего состоит дизайн MVP?

MVP — это работающий продукт, который проходит через все стадии разработки. Этап дизайна начинается после того, как основные функции приложения утверждены, и заканчивается тогда, когда их начинают кодить. Дизайн — это двухступенчатый важный процесс, который включает в себя UX и UI.

Сначала UX

Одна сторона — это UX, то есть «пользовательский опыт». Дизайн приложения начинается с логики действий. UX отвечает за порядок шагов, которые должен предпринять пользователь, чтобы прийти к цели.

UX отвечает на вопрос «Как приложение работает?»

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

Потом UI

Не менее важен и UI — «пользовательский интерфейс». Сюда относят фирменный стиль, цвета, шрифты, иконки, анимацию и всё, что составляет видимую оболочку приложения.

UI отвечает на вопрос «Как приложение выглядит?»

UI — это внешний вид приложений, которой влияет на первое впечатление. Удобный и красивый дизайн запоминается, пользователям приятнее взаимодействовать с приложением.

Создание UI/UX дизайна для MVP: 7 шагов

Мы создаем приложения на протяжении уже 8 лет и запустили около 300 MVP. Наш процесс проработан до мелочей и предельно понятен. Конечно, мы не можем сказать, что все компании работают точно так же, это исключительно наш опыт.

На практике мы выяснили, что дизайн MVP отличается от дизайна полноценного приложения. Из-за того, что MVP — это всегда неопределенность, ограниченный бюджет и сжатые сроки. Поэтому мы разработали эффективный дизайн-процесс.

Шаг 1. Сбор референсов

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

⏱️ 1-2 часа

Шаг 2. Разработка майндмэпа

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

Главная задача на этом этапе — описать все элементы, действия и связи между ними. Схема должна быть четкой и однозначной, ведь это фундамент приложения. Затем наш проектный менеджер согласовывает майндмэп с клиентом.

⏱️ 6-8 часов

Шаг 3. Создание вайрфреймов

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

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

⏱️ 16 часов. Этот этап тоже согласуем с заказчиком.

Шаг 4. Отрисовка пользовательского интерфейса

Пора раскрасить вайрфреймы и разработать уникальный внешний облик приложения. Мы выбираем 2-3 главных экрана и отрисовываем основные элементы. Финальный интерфейс может отличаться от вайрфреймов, это нормально.

⏱️ 10 часов

Шаг 5. Подготовка презентации

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

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

⏱️ 6 часов

Шаг 6. Проработка всех сценариев

Когда дизайн-концепт согласован и утвержден, мы продумываем возможные действия пользователя и рисуем под них экраны. Основных экранов недостаточно для дизайна MVP. Например, что показать, если не прошел платеж или прервалось интернет-соединение?

⏱️ 14 часов

Шаг 7. Подготовка UI-кита

UI-кит — это набор всех элементов, позволяющих приложению выглядеть визуально согласованным и гармоничным. Если впоследствии приложению предстоит масштабироваться, команде дизайнеров будет легко подготовить новые экраны благодаря готовым элементам.

⏱️ 12 часов

Итого, весь процесс создания дизайна для MVP ~ 70-80 часов.

Необходимая команда для создания дизайна для MVP

Как мы уже успели убедиться, дизайн MVP — это основательный процесс. Один специалист тут не справится, нужна команда. Каков ее состав?

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

1. Проектный менеджер. Мы стремимся к максимально прозрачному и эффективному взаимодействию с клиентом. Поэтому основатель стартапа общается только с нашим менеджером, чтобы избежать мискоммуникации. Проектный менеджер всегда на связи и готов обсудить промежуточные результаты.
2. Бизнес-аналитик. Следующий уровень коммуникации не требует участия основателя стартапа. Проектный менеджер обращается к бизнес-аналитику, чтобы тот адаптировал технические требования и помог в постановке технического задания.
3. Два UI/UX дизайнера. Первый дизайнер начинает отрисовывать согласованные экраны, второй проверяет и финалит.

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

Сколько стоит дизайн MVP?

В среднем цена на дизайн MVP по нашим проектам колеблется в районе 330 000-350 000 рублей. Она может доходить и до 650 000-950 000 тысяч рублей в зависимости от сложности. Сколько функций и анимаций в дизайне? Как тяжело их реализовать? Эти факторы определяют цену. Ниже объясним на примере приложения для ресторана, как оценивается стоимость.

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

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

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

Итак, приблизительный расчет приведен ниже.

Есть идея приложения? Вы всегда можете обратиться к нам, и мы рассчитаем стоимость проекта.

Резюмируем

• Цель MVP — протестировать идею стартапа, сэкономив деньги.
• Дизайн MVP состоит из UX и UI и играет значительную роль в разработке.
• UX отвечает за то, как приложение работает. Это структура пользовательских действий, которые должны быстро и понятно приводить к цели.
• UI отвечает за то, как приложение выглядит, — стиль, цвета, шрифты и т.д. Он формирует первое впечатление.
• Процесс дизайна MVP: референсы — майндмэп — вайрфреймы — интерфейс — презентация — все сценарии — полный UI-кит.
• Для создания дизайна MVP нужна квалифицированная команда — проектный менеджер, бизнес-аналитик и 2 дизайнера UI/UX.
• Цена дизайна MVP зависит от сложности и количества функций и анимаций.