Назад

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

Время чтения: 4 минут

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

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

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

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

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

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

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

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

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

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

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

    Dribbblehttps://dribbble.com/purrwebui, Behancehttps://www.behance.net/PURRWEBPinteresthttps://www.pinterest.com.au/и  Muzli Searchhttps://search.muz.li/ помогают не «застрять» и визуально вдохновиться. С помощью этих ресурсов можно подглядеть варианты реализации иконок, анимации и брендинга. Достаточно ввести ключевое слово — все, что так или иначе описывает продукт — и появляется понимание относительно того, что можно включить в дизайн MVP.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Оригинальная версия статьиhttps://vc.ru/design/102448-dizayn-mvp-etapy-instrumenty-rezultaty опубликована на vc.ru]

    [от 02.06.2020]