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

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

В закладки
Аудио

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

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

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

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

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

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

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

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

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

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

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

В качестве хэштега также подойдут главные фичи. Для маркетплейса такими фичами могут стать «Календарь», «Профиль», «Бронирование».

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

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

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

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

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

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

Этот этап дизайна самый трудозатратный.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#ux #ui #стартапы #mvp #дизайн #интерфейсы

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Александр Шульгин", "author_type": "self", "tags": ["\u0441\u0442\u0430\u0440\u0442\u0430\u043f\u044b","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","ux","ui","mvp"], "comments": 40, "likes": 61, "favorites": 416, "is_advertisement": false, "subsite_label": "design", "id": 102448, "is_wide": true, "is_ugc": true, "date": "Wed, 22 Jan 2020 13:23:46 +0300", "is_special": false }
Создать объявление на vc.ru
Финансы
Главные венчурные (и не только) итоги 2019 года
2019 год принёс немало неожиданностей. Глобальный финансовый кризис так и не наступил. И теперь уже почти половина…
0
{ "id": 102448, "author_id": 398242, "diff_limit": 1000, "urls": {"diff":"\/comments\/102448\/get","add":"\/comments\/102448\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/102448"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
40 комментариев
Популярные
По порядку
Написать комментарий...
16

А при чем тут вообще mvp? 

По классике mvp - это готовый продукт, с 1-2 киллер-фичами, которые привлекают пользователей и продают..

А тут дизайн и концепт, а про суть mvp ни слова.

Ответить
2

"А при чем тут вообще mvp?" ...последнее время на vc много статей о mvp , но от mvp там только или рога или копыта. Видимо просто стало модно добавлять это слово.

Ответить
14

Тоесть вот так все просто? Посмотрели на конкурентов, вдохновились фантазиями на бихе и сразу прототип? А как насчёт бизнес-задач, ЦА, их потребностей? Или цель поста - написать инструкцию по созданию очередного симпатичного высера?

Ответить
4

А как насчёт приключений?

Ответить
0

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

Ответить
4

Ну, конечно. Ведь так всегда и бывает. Вся основная работа уже оказывается есть и остаётся только в прототипы и дизайн играть.

Ответить
0

Основная не основная – но согласитесь, что нормальный дизайнер без этих материалов даже за скетчи не возьмется. Исходим из презумпции невиновности и считаем, что дизайнер у нас нормальный :)

Ответить
1

У них на сайте указано 2 дня на создание концепта. Вот со старта 2 дня и концепт готов. Или я тугой или как успеть за 2 дня?

"Result 
Design Concept 
1-2 visualized app screens from the core user flow
2 days"

Ответить
0

А “core user flow” по принципу: я дизайнер, я так вижу видимо.

Ответить
5

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

За это прям спасибо)

Ответить
5

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

Ответить
0

В чём проблема?

Ответить
0

И что из этого следует?

Ответить
3

эгоцентризм

Ответить
2

Но вы то совсем не такие

Ответить
0

кто мы?

Ответить
4

Я один здесь

Ответить
0

Как это влияет на материал статьи?

Ответить
0

Вам за вопросы платят чтоли?

Ответить
0

Нет, я просто искренне пытаюсь понять чем же упоминание себя в третьем лице портит статью в данном контексте

Ответить
1

А в какой момент влажные фантазии дизайнеров согласовываются с разработчиками?

Ответить
2

В любой ведь 😉 У нас вся команда находятся в одном офисе без баррикад. И все помнят, что это MVP и какие у него цели.

И да, влажные фантазии обговариваются на разных этапах. Если диз сомневается в простоте реализации. Или разраб в процессе предлагает сделать проще без потерь. Это если коротко.

Ответить
0

ой, ща начнется

Ответить
2

Александр, спасибо за статью. Расскажите, как вы выясняете жизнеспособность (minimum VIABLE product) ваших интерфейсных решений?

Ответить
2

Как-то раз запускали мы с товарищем свой проект. Решили начать с мпв. Я изучил ца, их боли, выбрал гипотезу, провел фичеринг. В голове выстроился флоу и ключевые экраны. Открыл фигму. Дело осталось за малым – нарисовать и закодить. Тут я вспомнил о чудесном ресурсе – темфорест. Набрал тематику проекта в поиск... Помню только то, что в фигму я так и не вернулся, купил шаблон, накатил атом, подправил цвета и блоки под себя. Радостно кликая мышкой и вытирая пот со лба, тестировал логику ключевых сценариев уже через несколько часов. К вечеру следующего дня морда мпв была готова. Отдал товарищу на интеграцию с беком. Так мы потратили 30 долларов и сэкономили 3 недели работы.

Ответить
1

Я так понял это просто реклама сайта Purrweb, раз везде он упоминается( и не корректно открывается на телефоне).

А так написано все тоже самое, если в Гугле вбить "как придумывать дизайн сайтов".

Ответить
0

 От вас ничего не утаишь!

Ответить
0

Стараюсь)

Ответить
0

Подскажите, пожалуйста, источник где вы взяли картинку с идущими фигурами? И кто они? 

Ответить
2

I am Mexican and these are from Mexico, I am not sure if is Aztec or Zapotec art. Sorry I do not have my Cyrillic keyboard with me.

Ответить
0

Thanks!

Ответить
–1

Объясните пожалуйста обывателю, все эти красоты от дизайнеров это просто картинки или сверстанные под нужную платформу макеты на соответствующих языках разметки?

Ответить
0

средства прототипирования позволяют имитировать функционал

Ответить
0

Тема заголовка не раскрыта

Ответить
0

Спасибо за описание процесса от и до.

За Mobbin так двойное!

Ответить
0

Статью не читал, но картинка с ацтеками мне понравилась. Особенно третья фигура в содранной человеческой коже. Символично

Ответить
0

Что за фигню я только что прочел? Где увесистая статья? Эту статью электро-чайник писал?

Ответить
0

Ну статья и статья

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }