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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Про аватары

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

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

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

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

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

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

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

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

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

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

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

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

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

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