Оттенки золота и функционал органайзера: дизайн интерфейса для свадебного маркетплейса

О видении функционального маркетплейса, изменении фирменного стиля заказчика в ходе работы и дизайне «онлайн-ежедневника» для полного цикла подготовки к свадьбе 一 кейс Uprising, студии дизайна и разработки

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

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

У заказчика на момент обращения к нам был брендбук и MVP проекта 一 лендинг на Tilda.

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

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

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

Wedding box, будучи помощником в подготовке к одному из самых светлых, нежных и трогательных дней, сразу представился нам легким, светлым и воздушным. Однако существующий брендбук нас немного удивил 一 в нем использовались темные, мрачные и «землистые» оттенки, которые выпадали не только из нашего представления о будущем сайте, но и из современных трендов.

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

В качестве основного референса мы рассматривали Bridestory (1) в старой версии (недавно у них произошел ребрендинг). В работе над цветовыми решениями вдохновлялись некоторыми шаблонами сайтов 一 так же, как и наш проект, созданных преимущественно для женщин (на рисунках ниже). По итогу основными финальными оттенками стали золото, как один из традиционных свадебных оттенков, бежевый, белый и немного зелёного для свежести.

Также был использован широкий спектр источников вдохновения, которые, казалось бы, абсолютно не связаны со свадебной тематикой. Например, для создания инфографики очень пригодились наработки Максима Подольски — Leaf (2). Фундаментом для концептуальной схемы площадки и рассадки гостей послужила инфографика Politico про президентские выборы 2020 (3) в США. Пузырчатые формы, минимализм и подача мокапов были вдохновлены UI Motion kit (4). А Preply (5) в очередной раз стал примером качественного современного маркетплейса, в основе которого — выбор поставщиков услуг.

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

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

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

• персонализированность — мы добавили на карточку не название компании, а конкретного представителя с именем и аватаром (об этом расскажем подробнее);

• личное взаимодействие — на карточке отображается не список услуг, а обращение поставщика к молодожёнам;

• мнение предыдущих заказчиков — для этого мы разместили на карточке рейтинг поставщика, составленный на основании отзывов о прошлых кейсах.

Рубрикатор и фильтры

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

• категории (кольца, стилисты, хореографы, кейтеринг, декораторы, площадки и т.д.);

• фильтры внутри конкретной категории.

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

В панели фильтров также был добавлен ряд примечательных моментов:

• сайт автоматически определяет географическое положение пользователя, отображая не только город, но и IP;

• каждый параметр отображает реальное количество поставщиков (серыми цифрами);

• придерживались концепции минимализма, поэтому вместо тяжеловесных чекбоксов или буллитов — лёгкие галочки;

• добавили два параметра — «Только с отзывами» и «Только с акциями и скидками».

Про аватары

В дизайне «Wedding box» все аватары выглядят презентабельно: единый ракурс, освещение, тональность. Но это — дизайн. И мы задались вопросом: а возможно ли создать функционал, который бы контролировал качество загружаемых фотографий и давал подсказки? Да.

По нашему замыслу, предполагается, что сайт может определять качество загруженной портретной фотографии по трём критериям:

• ракурс;

• экспозиция (яркость и ISO);

• заполненность пространства (визуальный вес).

Также предполагается, что любую загруженную фотографию, удовлетворяющую критериям, сайт сможет автоматически вырезать по контуру, убирая фон. Такая технология уже существует: сервис Remove.bg (6), который предоставляет API.

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

Важнейшей задачей здесь было правильно подать большой массив информации — структурировано, логично и последовательно. Мы много времени уделили изучению референсов по подаче больших объемов материала и в итоговом результате во многом опирались на шаблон карточки организации в «Яндекс.Услуги» (7).

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

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

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

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

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

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

Уникальность проделанной работы над проектом заключается в детализированной проработке всего информационного массива. Мы руководствовались «принципом домино»: ошибка в одном параметре может запустить цепную реакцию и разрушить логику всей информационной структуры. Показательным примером строгого следования данному принципу являются макеты Карточек заявок в ЛК клиента и ЛК поставщика — и полная взаимосвязь между ними. Рассмотрим одну из сценарных ситуаций: события от 10 ноября 2020, вт:

• в 10:27 МСК (утром) поставщик принял заявку и готовит к отправке планируемый бюджет;
• в 10:35 МСК (утром) клиент видит предложение поставщика и готовится его одобрить;
• в 22:26 МСК (вечером) клиент одобряет бюджет, поставщик это видит и готовится к тому, что клиент сделает аванс-платёж.

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

Мы же продумали десятки таких событий.

• При проектировании интерфейса мы полагались не только на экспертизу UI/UX-дизайнера, но и параллельно провели обширный ресёрч;
• подготовили множество референсов и рекомендаций для заказчика, защитили своё видение дизайн-решения проекта;
• работа над проектом проходила в формате lean design. Мы понимали, что восприятие концепта и появление определенных пожеланий заказчика будет происходить по мере поступления визуализации;
• проработали возможные погрешности расхождений дизайна и его реализации — например, предложили использование специального сервиса для унификации всех аватаров пользователей;
• с особой тщательностью проработали структуру рубрикаторов и фильтров для наиболее удобного взаимодействия пользователя с сайтом;
• по собственной инициативе детально проработали весь информационный массив, продумав десятки возможных событий и их влияние на другие страницы создаваемого дизайна.

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