Накратко
- Контекст: за Sitecore, като служител на компанията (Demo Solutions).
- Моята роля: един от дизайнерите в екипа – пазаруващи пътеки, IA и UI за OrderCloud демо магазина.
- Резултат: пуснат на живо като Sitecore демо.
Play!Shop е headless магазин върху Sitecore OrderCloud, пуснат на живо. Показва как модерно и гъвкаво пазаруване се сглобява отгоре: чист интерфейс, компоненти, които се мащабират, и ясни потоци, направени за headless архитектура.
Визуалната посока идва от събитието Play! Summit на Sitecore: смели цветове, силни контрасти и чисти оформления. Интерактивните елементи и ясната йерархия дават енергично усещане, което стои естествено до спортни и lifestyle марки. През целия проект държах интуитивна навигация, силно представяне на продукта и mobile-first принципи, за да е преживяването еднакво на всички екрани.
Вход и регистрация
Екраните за вход дават сигурен достъп до личните функции: история на поръчките, запазени адреси и начини на плащане. Направени са с малко триене и държат идентичността на марката на всички разделителни способности.
Регистрацията отваря акаунт за по-бързо плащане, персонализация и по-дълга връзка с купувача. Влизането в акаунта не прекъсва пазаруването.
Откриване и продуктови листинги
Листингите със съдържание и препоръки изваждат подходящи статии и предложения за продукти. Така откриването и подредбата на офертите вървят редом с търговските предложения.
Продуктова страница и количка
Бързият преглед показва ключовото за продукта, без да се напуска листингът или категорията. Решението идва по-бързо, а разглеждането не спира.
Страницата с детайли събира нужната информация, изображенията и призивите за действие. Това е основното място за решение, преди артикулът да влезе в количката.
Мини количката в навигацията дава преглед и промяна на избраното, без да се напуска текущият екран. По-малко триене и по-бързо решение за покупка.
Категории и търсене
Страницата на категорията подрежда продуктите в списъци, които се преглеждат и филтрират бързо. Поддържа правила за подредба и структура на каталога, която издържа на растеж.
Падащият преглед при търсене дава веднага предложения още докато се пише. Продуктът се намира по-бързо.
Профил, адреси и плащане
Профилът е мястото за лични данни и настройки на акаунта. Оттам минават персонализацията и повторните покупки.
Адресната книга пази адреси за доставка, за да е плащането по-кратко. Има място за няколко адреса и за един по подразбиране. Нов адрес се добавя, когато потрябва, без да се къса потокът към плащане.
Пълна количка
Пълната количка събира артикулите и количествата на едно място. Тя е последната проверка преди плащане.
История на поръчките
Историята на поръчките показва миналите покупки. Носи прозрачност и доверие и отваря повторна поръчка или въпрос към поддръжката. Детайлът на една поръчка показва артикулите и статуса след покупката.
Преди плащане и начини на плащане
Екранът преди плащане потвърждава намерението и следващата стъпка, за да не спира пътят точно преди плащането.
Списъкът с начини на плащане показва запазените опции за бърз избор и за следващи поръчки. Запазен начин се обновява, когато данните се сменят. Нов се добавя, когато предпочитанието е друго.
Поръчка и потвърждение
Гостът минава без акаунт и с по-ниска бариера към покупката. Влезлият потребител ползва запазените данни: скорост, яснота и увереност.
Прегледът на поръчката е последното потвърждение преди изпращане. Държи прозрачността и сваля грешките при покупка. Екранът след успешна поръчка потвърждава, че тя е приета, и затваря пътя ясно и спокойно.
Всеки компонент е устроен за връзка с данни в реално време от Sitecore OrderCloud. Страниците са правени от нулата, не от готови шаблони, за да има пълна свобода в дизайна и в техническото решение. Така екипът държи дизайна, производителността и мащаба.
Play!Shop показва как собствен интерфейс носи персонализирана headless търговия, без да стъпва на монолитна платформа. Същият подход важи и за B2C витрина, и за marketplace. За екипи, които търсят как да покажат headless търговия визуално, Play!Shop е ясен и готов за продукция пример.
Ако търсиш такъв интерфейс за магазин, започни проект.
