iPhone 13 Pro уже в продаже
Пространство возможностей
ООО «Портативная техника», юр.адрес: 190031, Санкт-Петербург, наб. реки Фонтанки, д.109, литер А, пом. 13Н, ОГРН № 1057811930296
{"id":6545,"title":"\u041a\u0430\u043a \u0438 \u0437\u0430\u0447\u0435\u043c \u043a\u0440\u0443\u043f\u043d\u044b\u0435 \u0431\u0440\u0435\u043d\u0434\u044b \u0441\u043d\u0438\u043c\u0430\u044e\u0442 \u0440\u043e\u043b\u0438\u043a\u0438 \u0434\u043b\u044f TikTok","url":"\/redirect?component=advertising&id=6545&url=https:\/\/vc.ru\/tiktok\/293387-brands-in-trends&placeBit=1&hash=07ebf9a0a17c2f85811d24fb804e09e72513fa4c7cc999d1730b233d3c9348bd","isPaidAndBannersEnabled":false}
Дизайн
Yefim Kolodkin

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

О видении функционального маркетплейса, изменении фирменного стиля заказчика в ходе работы и дизайне «онлайн-ежедневника» для полного цикла подготовки к свадьбе 一 кейс 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. Мы понимали, что восприятие концепта и появление определенных пожеланий заказчика будет происходить по мере поступления визуализации;
  • проработали возможные погрешности расхождений дизайна и его реализации — например, предложили использование специального сервиса для унификации всех аватаров пользователей;
  • с особой тщательностью проработали структуру рубрикаторов и фильтров для наиболее удобного взаимодействия пользователя с сайтом;
  • по собственной инициативе детально проработали весь информационный массив, продумав десятки возможных событий и их влияние на другие страницы создаваемого дизайна.

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

{ "author_name": "Yefim Kolodkin", "author_type": "self", "tags": [], "comments": 26, "likes": 14, "favorites": 63, "is_advertisement": false, "subsite_label": "design", "id": 261260, "is_wide": true, "is_ugc": true, "date": "Mon, 21 Jun 2021 13:51:27 +0300", "is_special": false }
0
26 комментариев
Популярные
По порядку
Написать комментарий...

Радостные боты радуются радости))

3

где же вы увидели ботов? вроде вполне себе обычные комментаторы :)
или тут совсем не принято чему-то радоваться и что-то хвалить? тогда будем ждать исключительно хейтерских комментариев 😂

0

Это все не ваши посты случайно?))))

2

Наши. И?) Нам не могут оставлять комментарии те, с кем мы работали и кто остался этим доволен? Или наши знакомые, которым нравится то, что у нас получается? Или просто люди, которые прочитали один наш кейс, подписались и следят за новыми? Какие претензии-то?) 
Мы только рады тому, что у нас есть такие верные и добрые читатели)

0

Продолжать?)

1

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

0

Ефим всего Вам доброго и хорошего настроения!)))

1

ботовод детектед) 

Юлия Квитко // На проекте с 26 мая 2021 // Коментарии 1 
"Аааах какой удобный сервис! Как много нервов он сэкономит будущим невестам)) Круто!"

Nataly Entarial // На проекте с 26 мая 2021 // Коментарии 1
"Красивый дизайн, очень нежно и стильно! *—*"

1

Интересные вы такие 😅 что вы подразумеваете под ботами-то? По-вашему это не могут быть просто люди, которые перешли на статью с наших соцсетей/расшариваний и тд, решили зарегаться и поддержать нас? У нас довольно много заинтересованных нами и нашей деятельностью людей :)

0

Статья сегодня. Две дамы 26го мая зарегались и 0 активностей, пока не вышла ваша статья.

Ну камон. Реально думаете что тут господа уровня пикабу? Да, тут такие господа, но тут так не принято) В коментах можно послать, набросить, забайтить, сала закинуть, можно уличить гражданина в том что кто-то рвется, запятых раздать... Но не боты. 

А дизайн норм. Понравился. 

1

Ваше право считать так, как хотите :)

Благодарим за хороший отзыв о дизайне - именно он и есть основная цель публикации кейса! Рады, что понравилось)

0

Там ещё сотрудник у них есть. Он приходит когда новость выкладывают, говорит что зашибись дизайн и уходит до следующей новости)

0

Извините, влезу понудить.

1. Нет ли ошибки в визуализации первого блока на главной странице? Использовано фото невесты, а не свадебного торжества или галереи/слайдера.

2. Возможно вы выложили не рабочие макеты? Т. к. группировка разделов по категориям вызывает массу вопросов... Как собиралось семантическое ядро и структура? Просто даже если посмотреть частоту запросов уместнее "Съемка свадьбы" вместо "Фиксация свадьбы". Где обувь, украшения для невесты помимо колец? Ведь даже навскидку просятся категории: Невесте/жениху(Одежда, Стилисты, Обувь, Украшения, Хореограф), Банкет(Торты, Кейтеринг, Рестораны, Декораторы и пр.), Съемка(Фотографы, Видеограф), Развлечения(Ведущий, DJ, Музыканты и пр.)

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

4. Также вопрос вызвала тема аватаров поставщиков. Поставщиками же не везде являются физ. лица с фотографиями. Рестораны, салоны и пр. в аватарки будут ставить свои логотипы. Дизайн предполагает менять цвет логотипов поставщиков вопреки их фир.стилю?

5. Проводился ли опрос мнений по цветовой гамме или варианты подготовлены и ждут сплит-тестов? Большие сомнения вызывает, что ЦА выбрала бы данную цветовую гамму. Простите, но это выглядит не оттенками золота и бежевого, а блёклым коричнево-оранжевым и желто-оранжевым. 

Ну как бэ это моё мнение больше по UI. При этом в заголовке заявлено про функционал органайзера, поэтому было ожидание увидеть не просто оформленные картинки, но и про UX, сценарии, структуру и пр.

Спасибо за статью))

3

Красивый дизайн, очень нежно и стильно! *—*

2

Благодарим за классный отзыв 🤗

1

Ребята лучшие! Видно сразу, что работы проделано очень много и качественно

1

Нам очень приятно это слышать! Мы стараемся :)

2

Аааах какой удобный сервис! Как много нервов он сэкономит будущим невестам)) Круто!

1

Мы тоже в восторге от результата! Надеемся, что у невест с ним останутся только положительные эмоции от подготовки к торжеству)

0

Проделана огромная работа, крутой проект. Единственное, мне не хватило контраста, кликабельные элементы не отличаются от некликабельных (оттенок золотого), можно было добавить того самого зеленого, чтобы разнообразить палитру.

0

Спасибо за комментарий! Просто у проекта такой фирстиль — в большей степени моно-тональный, минималистичный, мягко-бежево-свадебно-золотой. Мы рассматривали внедрение зелёного или травянистого, но тогда дизайн отдалённо начинал ассоциироваться с флористическими сайтами. Поэтому решили зелёный использовать очень мягко, пастельно, в качестве точечных аккомпаниментов, а UI/UX сохранить бежево-золотым. Ибо ну круто же смотрится — стильно, цельно, изысканно :)

0

Или хватит?)

0

Хороший, интересный проект получился. Однако, мне не хватило подробностей про исследования. ред.

0

Спасибо за добрый комментарий! Да, действительно, мы здесь сделали упор именно на итоговый результат дизайна. Постараемся раскрыть тему исследований в следующих статьях, потому что предварительный глубокий анализ - одна из отличительных черт нашей работы над проектами)

0

А что по WGAC-1 и WGAC-2? Для дриббла - ок, но в реальности?

0

Симпатично для сайта-портфолио, но боюсь в реальности это не сработает, все сливается в одну бежевую простыню, глазу не за что зацепиться + совершенно не продуман реальный контент, а что если имена ваших клиентов будут х3 от представленного в макетах, куда поплывет вся эта ваша красота?

0
Читать все 26 комментариев
Переход бизнеса на Apple: нет причин отказывать себе в удовольствии

Работать на устройствах Apple – это просто, удобно, приятно, современно. А еще, как продолжают считать некоторые – дорого и не для всех. Однако это не так: хотя «яблочные» устройства и работают в каждой международной корпорации из Fortune 500, сегодня они доступны практически любой SMB-компании, стартапу, и даже общеобразовательной школе. Причина кроется как в самих технологиях Apple, так и в выстроенных вокруг них сервисных программах.

Волки в овечьих шкурах: 4 скрытые угрозы современного рынка инвестиций

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

«На новую систему потратили не более 1 млн рублей»: баттл предпринимателей о том, какая модель управления бизнесом лучше

Владельцы «Перилаглавснаб», Gartel, Compleader и «Архитектуры благополучия» — о том, почему модные «бирюзовые организации» не для всех, как выдержать трёхкратный рост бизнеса и не работать по 14 часов в день.

Из жизни клуба
Как мы проводили командную ретроспективу в Minecraft

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

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

Сейчас в России предприниматели переходят из традиционного малого бизнеса в стартапы очень редко — меньше чем в 0,02% случаев. Это не больше 1 000 стартапов из около 6 млн предприятий малого бизнеса. Поговорим о том, что мешает предпринимателям и как действовать, если есть желание создать стартап.

За 100 лет до МММ: как рязанский банкир построил финансовую пирамиду в 19 веке и обманул вкладчиков на 12 млн рублей Статьи редакции

Когда в скопинском банке оказалось недостаточно денег, чтобы выплачивать проценты по вкладам, директор Иван Рыков «нарисовал» баланс и привлёк новых вкладчиков. На их деньги он отдавал проценты — так и зародилась первая в России финансовая пирамида, которая просуществовала 15 лет.

Здание Скопинского банка Архив Скопинского исторического общества
Голые короткие продажи: как манипулировать рынками и продавать акции, которых у тебя нет

В данной статье рассматривается устройство программы заимствования акций DTCC, благодаря лазейкам в которой можно осуществлять манипуляции ценами акций любой компании и даже всего рынка через naked short selling. И как возникают ситуации, что у одной акции может быть 2+ владельца.

Как заставить хэштеги работать?
Я задолбался искать нормальную девушку и создал Lovely Bot

Как Tinder, только знакомит на основе взаимных увлечений

Нужны ли в России сити-фермы

И появятся ли грядки на крышах пятиэтажек.

re-thinkingthefuture.com
Готовы выбрать победителя премии «Экспортер года eBay — 2021»?
null