iPhone 13 Pro уже в продаже
Пространство возможностей
ООО «Портативная техника», юр.адрес: 190031, Санкт-Петербург, наб. реки Фонтанки, д.109, литер А, пом. 13Н, ОГРН № 1057811930296
{"id":6525,"title":"\u041a\u0430\u043a \u0441\u0435\u0431\u044f \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043d\u0432\u0435\u0441\u0442\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u043f\u043e\u0440\u0442\u0444\u0435\u043b\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 vc.ru","url":"\/redirect?component=advertising&id=6525&url=https:\/\/vc.ru\/promo\/292716-yandeks-vyhodit-iz-spyachki-alibaba-portit-nastroenie&placeBit=1&hash=7519bee6efc23ae5d635bf3098f678add4979d572b9f05b21135900c9688d27b","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 комментариев
Батарея, камера, но не экран: обзор iPhone 13 и iPhone 13 mini Статьи редакции
Главные новости недели: блокировка Honor в США, премьеры Netflix, Microsoft Surface и Мандалорец

Говорим о главных гиковских новостях прошедшей неделе в подкасте телеграм-канала ForGeeks. Рассказываю, почему США хочет запретить Р, вернёт ли Samsung серию Galaxy Note, когда выйдут Apple AirPods 3 и новые MacBook, что нам ждать от Netflix в ближайшее время, какую эволюцию в гейминге делает Valve и других новостях технологий.

«Ситимобил» снял 5547 рублей за поездку в 36 км по городу

Всем доброго времени суток. Перед написанием этой статьи нашёл аналогичные, оказывается, что я далеко не первый. Жаль, раньше не видел. Понимаю, что моя вина в ситуации тоже есть, но тут скорее о том, как «Ситимобил» относится к своим клиентам.

Прошел финал программы скаутинга в киберспорте Winstrike

Итоги программы Winstrike Scouting powered by UltraGear

Облажались с аудиторией и производством в Китае, но вышли на 55 млн рублей за 2020 год: история ошибок компании Atmeex

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

В отдельном помещении мы тестируем устройства на брак
Aviasales запустил «Короче» — карты с обзорами городов и контактами местных гидов и фотографов Статьи редакции

В сервисе уже есть 49 российских и зарубежных городов.

«Короче» добавили в приложениях и на сайте Aviasales. Если в городе есть сервис, он появится рядом с выдачей билетов Aviasales
Whoosh, Urent и «Яндекс Go» нашли злоумышленников, которые повредили 800 электросамокатов в Москве Статьи редакции

Они отделались выплатой компенсации.

Китай запретил любые операции с криптовалютами

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

Завод «Автотор» начнёт собирать электромобили иностранных марок — первыми партнёрами могут стать Hyundai и Kia Статьи редакции

Это первый завод в России, который решил запустить локализованное производство электрокаров.

Изменение фэшн-рынка: чего ждать осенью 2021 года

Что нужно знать веб-мастерам, работающим с модным сегментом

Сделай сам: котик манеки-неко, который сделает бэкап в облако

Сопровождаем сохранение резервных копий протяжным «мяу».

null