Назад
Дизайн MVP: этапы, инструменты, результаты

Дизайн MVP: этапы, инструменты, результаты

Александр Шульгин, управляющий партнёр Purrweb, убеждён, что внятный дизайн важен на любом этапе разработки продукта.

Для валидации бизнес-гипотез нет смысла создавать нечто совершенное. Разработка MVP — это проверенный и адекватный способ проверить идею на прочность. Однако использование MVP концепции — не повод игнорировать дизайн. Уже на старте продукт должен быть понятным и визуально привлекательным.

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

1. Анализируем конкурентов

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

Что происходит на этапе анализа? Дизайнер останавливается на 3-5 топовых конкурентах и досконально изучает каждого. Смотрит на то, как сделан визуальный дизайн, оценивает функциональность и юзабилити.

Результат: Готовый анализ конкурентов. «Делать так же, как у них!» — это не главная задача анализа. Цель данного этапа — изучить решения, которые уже представлены на рынке и понять, что можно позаимствовать, а что лучше переосмыслить и сделать по-другому.

Дизайн MVP: анализ конкурентовНайти конкурентов несложно. Прямых, косвенных — не так важно​

Необходимое время: 1 день.

2. Ищем вдохновение

DribbbleBehancePinterest и Muzli Search помогают не «застрять» и визуально вдохновиться. С помощью этих ресурсов можно подглядеть варианты реализации иконок, анимации и брендинга. Достаточно ввести ключевое слово — все, что так или иначе описывает продукт — и появляется понимание относительно того, что можно включить в дизайн MVP.

Допустим, вы работаете над созданием дизайна MVP для маркетплейса. Чтобы подсмотреть варианты реализации ключевых экранов, можно вбить «Маркетплейс» в строку поиска. Хэштег популярный, а значит вывалится целая гора разных шотов (шот — это кусочек незавершенного проекта). В качестве хэштега также подойдут главные фичи. Для дизайна MVP маркетплейса такими фичами могут стать «Календарь», «Профиль», «Бронирование».

READ MORE  Маркетинг для MVP: что делать, если MVP готов?

Агрегаторы «красивостей» — будь-то dribbble или Pinterest — отлично работают для UI и слабо — для UX-брейншторма. Как правило, пользователи этих площадок делятся решениями с крутой визуализацией и откровенно хромающей UX-логикой. Можно ли где-то подглядеть решения UX-дизайна? Да! Но об этом чуть позже.

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

Дизайн MVP: создание дизайн-концептаДизайн-концепт медицинского мобильного приложения. Посмотреть весь кейс

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

Необходимое время: 1–2 дня.

3. Прототипируем

В процессе создания дизайна MVP этот — самый трудозатратный.

Перед созданием «настоящего» дизайна MVP необходимо продумать «скелет» будущего продукта (без цвета и красивостей) Какой будет архитектура и навигация внутри приложения. Даже не упарываясь в глубокую детализацию, прототипы помогут вам обозначить главные юзер-флоу, понять, как оптимизировать UX-часть.

Прототипы показывают как именно пользователи будут взаимодействовать с дизайном

Mobbin — отличное решение для поиска UX-паттернов мобильных приложений. Чтобы подглядеть реализацию топовых продуктов, дизайнер вводит имя продукта («Убер») или выбирает нужную категорию (развлечения). Среди похожих решений для веба хочется выделить Webframe.

UX ≠ «уникальный интерфейс». Никто не должен тратить время на «въехать в суть»

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

Результат: Черно-белые (интерактивные) прототипы. C такими не стыдно идти к первым пользователям за обратной связью, проводить UX-интервью.

READ MORE  Особенности разработки мобильного приложения для службы доставки: кейс B2B-сервиса Cargo

Дизайн MVP: черно-белые прототипыПрототипы веб-приложения для бьюти-индустрии. Посмотреть полный дизайн

Необходимое время: 2 недели.

4. Визуальный дизайн

Предположим, что прототипы уже согласованы с заказчиком. Время навести красоту! Для этого на базе дизайн-концепта (1–2 экрана, о которых мы ранее говорили) прорабатывается UI-часть для всего дизайна MVP.

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

Финальный этап дизайна MVP. Продукт выглядит так, каким его увидит конечный пользователь

Результат: красивые кликабельные прототипы и UI-кит.

Дизайн MVP: кликабельные прототипы​Цветные экраны веб-приложения для бьюти-индустрии. Весь кейс на Behance

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

Дизайн MVP: UI-китЕсли захотите поменять основные цвета в дизайне MVP, UI-кит сильно сэкономит трудозатраты​

Необходимое время: 2 недели(по факту — до получения нужного результата)

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

И, да, не забывайте о том, что суть создания MVP в том, чтобы выяснить, насколько актуальна та или иная бизнес-идея. Существует ли проблема, которую вы планируете решить? Насколько совпадают ожидания целевой аудитории с тем, что сделали вы? Какая прилетает обратная связь? Чем больше инсайтов соберете, тем выше шансы на успех!

[Оригинальная версия статьи опубликована на vc.ru]

[от 02.06.2020]