{"id":13579,"url":"\/distributions\/13579\/click?bit=1&hash=fac1e262bacedc292bce698ad3ca818a77bd592caa4fdfa917a7de6d9e68f657","title":"\u0420\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0439 \u0431\u044e\u0434\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438, \u0430 \u0442\u043e\u043b\u043a\u0443 \u043d\u0435\u0442","buttonText":"\u041a\u0430\u043a \u0443 \u043c\u0435\u043d\u044f!","imageUuid":"7b040e27-87ca-5e31-ad48-6ae8b0b1ebed","isPaidAndBannersEnabled":false}
Дизайн
Purrweb

Как мы делаем дизайн-концепты для стартапов за 40 часов. Объясняем на примере свежего криптопроекта

Когда-то концепт за 16 часов казался нам в Purrweb отличной идеей: заказчик получает тест-драйв дизайна, а мы — шанс проявить себя. Теперь мы тратим на дизайн-концепт в 2,5 раза больше времени, но заказчики довольны. Концепты реже уходят в «стол», и мы доводим дизайн продукта до конца. Рассказываем про новый процесс и про то, как мы к нему пришли.

Особенности дизайна для стартапов

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

  • Мало данных. Зачастую у стартапера есть только идея. Речь даже не идет о фирменных цветах или брендбуке. А если продукт уникален, то нет и аналогов, на которые можно было бы сослаться.
  • Ограниченный бюджет. Для стартапов особенно важно экономить ресурсы. Чем меньше правок потребуется для согласования UI, тем лучше.
  • Time to market. Обычно перед стартапом стоит цель — выпустить продукт на рынок как можно быстрее. Поэтому важно минимизировать исправления, откладывающие момент запуска.

В итоге дизайнер оказывается в непростой ситуации:

Как мы создавали дизайн-концепты раньше

Для нас смысл дизайн-концепта всегда был в том, чтобы сэкономить время клиента и дать ему представление о работе с нами. Раньше мы закладывали на это всего 16 часов.

За это время дизайнеру нужно было успеть изучить отрасль заказчика, подобрать референсы, выбрать ключевой сценарий и воплотить в графике 2-3 экрана. Проработка логики всего приложения откладывалась на потом.

Задача дизайнера при старом подходе — быстро и эффектно визуализировать 2-3 экрана

Мы искренне верили, что от такого подхода обе стороны только выиграют. Для нас это возможность проявить себя и получить больше заказов. Для стартапа — относительно недорого протестировать наши навыки. А значит, мы минимизируем риски клиента, экономим его время и бюджет. Но скоро мы поняли, что у этого подхода есть недостатки:

  • Слабая презентация. 2 дня — это слишком мало для хорошей презентации. В итоге мы ограничивались демонстрацией нескольких ключевых экранов. Такой концепт требовал много пояснений, и все равно мог остаться не понятым.
Раньше наши концепты выглядели так
  • Сложные в исполнении концепты. За такое короткое время невозможно как следует проработать логику приложения. Поэтому есть риск получить крутой концепт, который плохо применим на практике.
  • Больше правок. Когда не учитываешь логику всего приложения, рискуешь предложить совсем не то, что нужно заказчику. В лучшем случае, у нас затягивался процесс согласования. В худшем — дизайн приходилось полностью переделывать.

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

Новый подход и за что мы его любим

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

Теперь от старта работ до презентации проходит не 16, а 40 часов. За это время дизайнер погружается в задачи клиента, прорабатывает логику приложения и готовит понятную презентацию.

Новый процесс создания концепта

Если сравнивать старый и новый подход, то вот, что изменилось:

Остановимся на каждом этапе дизайн-концепта. Для наглядности посмотрим, как мы создавали концепт криптокошелька.

1. Собираем референсы

На старте проекта менеджер передает дизайнерам информацию о проекте — цели и задачи приложения, user stories, данные о пользователях и референсы.

Мы просим у заказчика положительные и отрицательные референсы, чтобы понимать, на что ориентироваться и от чего отказаться. Референсами могут быть концепты с Dribbble или реальные приложения.

В этом проекте мы получили негативные и позитивные референсы по визуалу. Функциональным референсом стало приложение Metamask.

Положительные референсы от заказчика

Мы также скачали и изучили другие популярные крипто-приложения — Binance, Coinbase и Tonkeeper. Это помогло избежать ошибок конкурентов, учесть лучшие практики и популярные паттерны.

2. Разрабатываем майндмэп

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

Мы делаем майндмэпы в Miro. Там есть готовые шаблоны, и не нужно с нуля рисовать элементы вроде стрелок и прямоугольников.

Это только часть майндмэп для проекта. Целиком можно посмотреть в Miro.

Мы визуально обозначаем структурные элементы, связи, наполнение страниц и действия. Например, на майндмэпе кошелька мы добавили следующие обозначения:

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

3. Рисуем вайрфреймы

Далее дизайнеры начинают работу над вайрфреймами — черно-белыми «скелетами» экранов приложения. Задача этого этапа — определиться с расположением основных элементов на экранах.

Мы берем функции приложения, действия пользователя и необходимый контент — и даем им визуальное воплощение.

Так майндмэп эволюционировал в вайрфреймы

Работая над вайрфреймами, мы обращаемся к референсам. На главном экране кошелька мы отобразили функции, которые встречаются в других кошельках чаще всего: баланс, список токенов, быстрый доступ к их отправке и получению.

Даже позитивные референсы оцениваем критически. Например, наш функциональный референс Metamask оказался совсем не идеален:

  • Заменили бургерное меню на таб-бар, с которым пользователю удобнее взаимодействовать.
Если использовать таб-бар, не придется тянуться или подключать вторую руку, чтобы сменить раздел
  • В Metamask кнопка импорта токена расположена под списком всех токенов. Мы закрепили эту кнопку над списком, чтобы она всегда была в доступе.

Слева — до кнопки приходится скроллить вниз. Справа — такой проблемы нет

Всего наши дизайнеры подготовили порядка 40 вайрфреймов.

Несколько вайрфреймов. Посмотреть все можно тут.

4. Создаем дизайн-концепт

Для разработки концепта мы выбрали экраны, которые насыщены контентом и раскрывают визуальный стиль:

  • дашборд;
  • экран токена;
  • экран NFT-токена.
Итоговый дизайн нередко отличается от вайрфрейма, и это нормально

5. Готовим презентацию концепта

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

Презентация — «вишенка на торте» всего процесса. Ее цель — объяснить заказчику идеи, которые легли в основу дизайн-концепта. Например, почему выбрали этот вариант меню или почему кнопка круглая. Тексты для презентации пишет дизайнер, но менеджер может помочь, особенно если презентация на английском. Потом презентацию используют для демонстрации инвесторам или в ходе фокус-групп с потенциальными пользователями.

Помимо экранов приложения в презентацию концепта можно добавить:

  • мудборды и референсы;
  • цветовую палитру;
  • шрифтовые решения;
  • элементы графики (например, наборы иконок или иллюстрации).
Такая презентация нагляднее и понятнее, чем несколько экранов в Figma

Презентация концепта прошла успешно, и мы с первого раза утвердили дизайн. На его основе отрисовали остальные экраны и собрали UI-kit — набор ключевых элементов: кнопок, иконок и форм.

В сумме на дизайн всего приложения ушло 76 часов. Мы закончили остальные 100 экранов за 36 часов. Все потому, что не тратили лишнее время на согласования и правки.

Иногда помимо дизайн-концепта мы готовим видеоролики с анимацией интерфейса: так проще объяснить работу некоторых важных функций приложения. К тому же динамика в презентации всегда выглядит эффектнее.

Пример анимации для презентации 

Экспресс-концепты по 16 часов позволяли быстрее показать заказчику результат. Кроме того, это неплохой инструмент продаж, когда нет большого портфолио. Но со временем недостатки подхода перевесили плюсы.

Новый процесс стал занимать больше времени: например, в случае с криптокошельком это половина всех часов, затраченных на дизайн. Зато если раньше концепты нередко уходили в «стол», то сейчас мы чаще делаем дизайн полностью. Потом идет этап разработки, который в среднем составляет 1200 часов для MVP. Клиенты чаще довольны результатом и остаются с нами надолго — это главный показатель того, что наш подход работает.

Ставьте лайки и подписывайтесь. У нас на канале ещё много интересного!
Например, недавно мы рассказывали, как делали приложение для рестораторов, чтобы спасти их от лишней головной боли.
А ещё про разработку инновационного приложения для «зелёного» бизнеса.
Мы в Purrweb любим делиться опытом. Пишите в комментариях, о чём рассказать в следующий раз.

0
10 комментариев
Написать комментарий...
Инна Яковченко

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

Ответить
Развернуть ветку
Ярослава Балаева

Вращение в обложке... Всегда хотела, чтобы меня вырвало на клавиатуру. Спасибо команде Purrweb!

Ответить
Развернуть ветку
Серафима Квасницкая

Ну, логично. Если не делать наспех, получается лучше (кто бы мог подумать!)
Да и быстрее, по моему опыту — всё равно больше всего возни с хотелками и правками

Ответить
Развернуть ветку
Яша Ахмедчук

а как вы делаете такие анимации для презентации?) в readymag или figma?

Ответить
Развернуть ветку
Purrweb
Автор

Анимации и всю презентацию мы делаем в Readymag

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

А можно ссылку на презентацию в Readymag? Хочу взять как референс по структуре — делаю которую презентацию тестового.

Ответить
Развернуть ветку
Purrweb
Автор

Да, конечно:) Держите: https://readymag.com/u2301480414/3314545/

Ответить
Развернуть ветку
Анастасия Юхтриц

Почему Абель? При чём здесь Библия?

Ответить
Развернуть ветку
Purrweb
Автор

Ого, зоркий глаз 👀
Это рабочее название проекта

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

Это да, readymag топчик. Удобный, быстрый, красивый и понятный.

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