Как мы разработали прототип первого в России маркетплейса для креативных людей

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

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

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

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

У заказчицы было общее понимание, как должна выглядеть и работать площадка. Но она не знала, как воплотить свои идеи в жизнь и найти для них правильное техническое решение.

Мы прикидывали разные варианты, что нужно: сайт, мобильное приложение или вообще PWA? А может, и то и другое? Мы обсудили задачу и решили, что полетим в дизайн и разработку мобильного приложения.

Но потом у заказчицы появились сомнения, из-за которых наше сотрудничество могло бы не состояться 😿

У заказчицы были референсы и некоторые наработки по визуальной составляющей и эстетике, которые ей хотелось отразить в дизайне платформы. Яркие цвета, немного хипповское настроение и порция психоделики в духе 60-х годов. А нам оставалось только придумать, как из картинок и описания сделать готовый продукт.

Материалы от заказчицы — логотип, яркая палитра и стиль бренда, который ей хотелось отразить в дизайне платформы:

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

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

И это абсолютно нормальные сомнения. Поэтому мы выступаем за гибкий подход: если понимаем, что задачу клиента можно решить другим способом, который позволит сэкономить деньги, предлагаем его. С Buy my brains был как раз такой случай: мы увидели, что есть более подходящий вариант, который полностью вписывается в бюджет клиентки. Ведь если нужно просто показать инвесторам концепцию, зачем сразу лететь в разработку мобильного приложения?

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

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

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

Чтобы продумать пользовательские флоу, мы смотрели на разные маркетплейсы и классифайды: искали лучшие решения и придумывали, как отстроиться. Основной референс — это сайт Pinterest — заказчице нравилось, как здесь реализована лента и личный кабинет, и она хотела сделать в Buy my brains что-то похожее

В Buy my brains две взаимозаменяемые роли — покупатель может быть продавцом и наоборот. Мы реализовали главную страницу, ленту и витрину продавца. На этапе прототипа сайта нельзя что-то купить или продать, но можно увидеть, как все будет работать после полноценного запуска маркетплейса.

Мы помогли определиться с флоу, которых будет достаточно для прототипа. Выбрали самые нетрудоемкие — чтобы сэкономить деньги.

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

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

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

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

Нам нужно было найти золотую середину между броским и «скучным» интерфейсом. Мы могли экспериментировать и играть со шрифтами и цветами. Главное — не проиграть)

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

Наши мудборды — выбирали смелые и яркие сочетания

Заказчица была открыта к нашим предложениям, но свои креативные идеи у нее тоже были. Так, она хотела, чтобы мы использовали взрывное сочетание оранжевого и фиолетового цветов, как на референсах, которые у неё были. А точнее — как на этой иллюстрации, которая — спойлер! — станет основой вообще для всего стиля платформы.

На основе этого наброска от заказчицы мы придумывали графические элементы для интерфейса платформы

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

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

Любимые цвета заказчицы здесь тоже есть, только мы решили отправить их по разным палитрам

И…наши варианты не попали в ожидания заказчицы. Ей хотелось, чтобы мы использовали что-то более яркое. Точнее, одно конкретное сочетание — оранжевого и фиолетового. Заказчица объяснила, что видит у себя в голове платформу именно в таких цветах. 

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

В дизайне главного экрана использовали референс — тот самый глаз с мозгом вместо зрачка. 

Предложили два варианта — психоделичный и психоделичный) Угадайте, какой из них понравился заказчице?

Клиентка выбрала первый вариант — это было именно то, что нужно! Такой яркий и немного броский дизайн способен зацепить аудиторию платформы, которую не так-то просто удивить дизайнерскими креативами. Еще заказчица предложила добавить немного анимации, чтобы нарисованные глаза открывались и закрывались…тут мы поняли, что пора дать полную свободу своему воображению.

И вот такой дизайн для главного экрана мы сделали:

Да, они живые и шевелятся! Мы реализовали идею заказчицы с анимацией: получилось необычно и по-хорошему безумно

Визуальные образы передают ключевую идею платформы: в основе всех достижений и прогресса лежит человеческий интеллект и мысль. Метафора проекта — интеллект, который открывает нам глаза на новые возможности.

В такой же стилистике сделали раздел «О платформе» — там рассказываем про философию проекта и ценности, знакомим юзеров с правилами площадки

Заказчица хотела, чтобы на странице о платформе, кроме текста и ярких визуалов, был короткий ролик, который объясняет суть Buy my brains и привлекает внимание. Стилистика должна быть примерно такая же, как на лендинге.

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

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

Референсы, которыми вдохновлялись наши дизайнеры, когда работали над видео:

Черно-белые эскизы кадров будущего ролика:

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

Сначала мы проработали сценарий на аниматике, и только потом приступили к созданию ролика в цвете и с визуальными эффектами

Следующий этап — отрисовать кадры в цвете. Тут мы не скупились на яркие краски.

Зацените, что получилось:

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

Кстати, о герое. Как вам этот человек-гусь? Персонажа придумала наш графический дизайнер, и заказчица осталась от него в полном восторге — он идеально вписывался в эстетику Buy my brains. Использовали его и для дизайна страницы о платформе.

Скажи человеку-гусю, что интересно для тебя?

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

Мы нашли золотую середину между творческой свободой и пожеланиями заказчицы, и вместе работали над необычной эстетикой платформы. А в вопросах UI/UX решений клиентка полностью доверяла нашей экспертизе.

В итоге у нас получился яркий и запоминающийся проект, который в плане стиля и эстетики полностью соответствовал представлениям заказчицы. Она хотела увидеть, как её идеи и гипотезы могут воплотиться в реальный продукт, готовый к выходу на рынок — и мы успешно справились с этой задачей. Более того, внесли свой вклад в создание первого в России маркетплейса для продажи творчества и идей ✨

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