Дизайн
Purrweb

Дизайн 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 #дизайн #интерфейсы

0
40 комментариев
Написать комментарий...
Artem Latynof

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

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

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Ruslan Kokin

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

Ответить
Развернуть ветку
Georgy Borisov

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

Ответить
Развернуть ветку
Павел Скиннер

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

Ответить
Развернуть ветку
Ruslan Kokin

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

Ответить
Развернуть ветку
Павел Скиннер

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

Ответить
Развернуть ветку
Причинно-следственная связь

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

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

Ответить
Развернуть ветку
Ruslan Kokin

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

Ответить
Развернуть ветку
Mike Kosulin

TIL:

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

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

Ответить
Развернуть ветку
Marina Stepanova

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

Ответить
Развернуть ветку
Sergey Mikhalev
Ответить
Развернуть ветку
Виталий Асташкин

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

Ответить
Развернуть ветку
Yuriy Zolotov
Ответить
Развернуть ветку
Виталий Асташкин

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

Ответить
Развернуть ветку
Sergey Mikhalev

эгоцентризм

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Sergey Mikhalev

кто мы?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Виталий Асташкин

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

Ответить
Развернуть ветку
Sergey Mikhalev

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

Ответить
Развернуть ветку
Виталий Асташкин

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

Ответить
Развернуть ветку
Сергей Сергеев

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

Ответить
Развернуть ветку
Александр Шульгин

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

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

Ответить
Развернуть ветку
alex

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

Ответить
Развернуть ветку
Александр Трикашный

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

Ответить
Развернуть ветку
Alex Fedotov

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

Ответить
Развернуть ветку
Elena Poet

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

Ответить
Развернуть ветку
Omar Olivas

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.

Ответить
Развернуть ветку
Elena Poet

Thanks!

Ответить
Развернуть ветку
Alex Olear

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

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

Ответить
Развернуть ветку
ivan krapivin

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

Ответить
Развернуть ветку
Alex Olear

Стараюсь)

Ответить
Развернуть ветку
Станислав Кукаев

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

Ответить
Развернуть ветку
John Doe

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

Ответить
Развернуть ветку
Сергей Сергеев

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

Ответить
Развернуть ветку
Платон Щукин

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

Ответить
Развернуть ветку
Александр Морфин

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

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

Ответить
Развернуть ветку
Mikhail Bobko

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

Ответить
Развернуть ветку
Богдан Березанский

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

Ответить
Развернуть ветку
Читать все 40 комментариев
null