Александр Шульгин, управляющий партнёр Purrweb, убеждён, что внятный дизайн важен на любом этапе разработки продукта.
Для валидации бизнес-гипотез нет смысла создавать нечто совершенное. Разработка MVP — это проверенный и адекватный способ проверить идею на прочность. Однако использование MVP концепции — не повод игнорировать дизайн. Уже на старте продукт должен быть понятным и визуально привлекательным.
В этой статье пошагово рассказываю об этапах создания дизайна MVP. Процесс емкий, поэтому и статья вышла увесистой.
1. Анализируем конкурентов
На самом деле этап изучения конкурентов предшествует дизайну MVP. Подсмотреть «как у других» важно — без этого очень легко допустить ошибки в позиционировании, создать неверные ожидания («Выкатимся так, а там попрет!»).
Что происходит на этапе анализа? Дизайнер останавливается на 3-5 топовых конкурентах и досконально изучает каждого. Смотрит на то, как сделан визуальный дизайн, оценивает функциональность и юзабилити.
Результат: Готовый анализ конкурентов. «Делать так же, как у них!» — это не главная задача анализа. Цель данного этапа — изучить решения, которые уже представлены на рынке и понять, что можно позаимствовать, а что лучше переосмыслить и сделать по-другому.
Найти конкурентов несложно. Прямых, косвенных — не так важно
Необходимое время: 1 день.
2. Ищем вдохновение
Dribbble, Behance, Pinterest и Muzli Search помогают не «застрять» и визуально вдохновиться. С помощью этих ресурсов можно подглядеть варианты реализации иконок, анимации и брендинга. Достаточно ввести ключевое слово — все, что так или иначе описывает продукт — и появляется понимание относительно того, что можно включить в дизайн MVP.
Допустим, вы работаете над созданием дизайна MVP для маркетплейса. Чтобы подсмотреть варианты реализации ключевых экранов, можно вбить «Маркетплейс» в строку поиска. Хэштег популярный, а значит вывалится целая гора разных шотов (шот — это кусочек незавершенного проекта). В качестве хэштега также подойдут главные фичи. Для дизайна MVP маркетплейса такими фичами могут стать «Календарь», «Профиль», «Бронирование».
Агрегаторы «красивостей» — будь-то dribbble или Pinterest — отлично работают для UI и слабо — для UX-брейншторма. Как правило, пользователи этих площадок делятся решениями с крутой визуализацией и откровенно хромающей UX-логикой. Можно ли где-то подглядеть решения UX-дизайна? Да! Но об этом чуть позже.
Результат: Дизайн-концепт. Главная задача — посмотреть, как будут выглядеть шрифты, цветовая палитра и кнопки в готовой версии продукта. Для этого мы визуализируем 1–2 экрана главного юзер-флоу. С помощью такого концепта участники проекта смогут согласовать UI/UX-архитектуру, быстрее спланируют будущие итерации.
Дизайн-концепт медицинского мобильного приложения. Посмотреть весь кейс
Выше представлены первые экраны приложения, которое помогает докторам проводить раннюю диагностику и назначать приемы. Чтобы максимально упростить навигацию, мы решили уйти в сторону минимализма.
Необходимое время: 1–2 дня.
3. Прототипируем
В процессе создания дизайна MVP этот — самый трудозатратный.
Перед созданием «настоящего» дизайна MVP необходимо продумать «скелет» будущего продукта (без цвета и красивостей) Какой будет архитектура и навигация внутри приложения. Даже не упарываясь в глубокую детализацию, прототипы помогут вам обозначить главные юзер-флоу, понять, как оптимизировать UX-часть.
Прототипы показывают как именно пользователи будут взаимодействовать с дизайном
Mobbin — отличное решение для поиска UX-паттернов мобильных приложений. Чтобы подглядеть реализацию топовых продуктов, дизайнер вводит имя продукта («Убер») или выбирает нужную категорию (развлечения). Среди похожих решений для веба хочется выделить Webframe.
UX ≠ «уникальный интерфейс». Никто не должен тратить время на «въехать в суть»
Для проработки юзер-флоу в дизайне MVP мы предпочитаем использовать Figma. Программа работает в браузере, а значит — ничего не нужно скачивать. Удобно делиться апдейтами и согласовывать дизайн.
Результат: Черно-белые (интерактивные) прототипы. C такими не стыдно идти к первым пользователям за обратной связью, проводить UX-интервью.
Прототипы веб-приложения для бьюти-индустрии. Посмотреть полный дизайн
Необходимое время: 2 недели.
4. Визуальный дизайн
Предположим, что прототипы уже согласованы с заказчиком. Время навести красоту! Для этого на базе дизайн-концепта (1–2 экрана, о которых мы ранее говорили) прорабатывается UI-часть для всего дизайна MVP.
Чтобы сделать дизайн MVP запоминающимся, дизайнеры добавляют цвета, шрифты, анимации, логотипы — все, что будет связано с брендом. Потому что какую крутую штуку бы ты ни придумал, без классной «обертки» достаточно сложно зацепить пользователей.
Финальный этап дизайна MVP. Продукт выглядит так, каким его увидит конечный пользователь
Результат: красивые кликабельные прототипы и UI-кит.
Цветные экраны веб-приложения для бьюти-индустрии. Весь кейс на Behance
UI-кит — это про иконки, кнопки, шрифты и цвета. Он значительно упрощает коммуникацию и поддержку всего дизайна MVP — для разработчиков (ускоряет процесс), заказчиков (помогает договориться о визуальных элементах) и дизайнеров (синхронизирует стили/элементы).
Если захотите поменять основные цвета в дизайне MVP, UI-кит сильно сэкономит трудозатраты
Необходимое время: 2 недели(по факту — до получения нужного результата)
После того, как все этапы пройдены, дизайн MVP выглядит на пять с жирным плюсом. Это значит, что результат работы можно смело показывать инвесторам, передавать в разработку. Об этом планирую рассказать в следующих статьях.
И, да, не забывайте о том, что суть создания MVP в том, чтобы выяснить, насколько актуальна та или иная бизнес-идея. Существует ли проблема, которую вы планируете решить? Насколько совпадают ожидания целевой аудитории с тем, что сделали вы? Какая прилетает обратная связь? Чем больше инсайтов соберете, тем выше шансы на успех!
[Оригинальная версия статьи опубликована на vc.ru]
[от 02.06.2020]
