BeHoneyBee
Дитячий одяг, що продається двома способами одночасно: готовою колекцією і пошиттям за мірками дитини.
Інші проєкти для BeHoneyBee
Усе знято з живої версії сайту, такою, якою її бачить відвідувач.
Nunito
ЗаголовкиAa
- Be Honey BeeBold 700
- Be Honey BeeBlack 900
АБВГҐДЕЄЖЗИІЇЙ abcdefghijklm 0123456789
Inter
ТекстAa
- Be Honey BeeRegular 400
- Be Honey BeeMedium 500
- Be Honey BeeBold 700
АБВГҐДЕЄЖЗИІЇЙ abcdefghijklm 0123456789
Заокруглення
- 24 px
- 32 px
- 40 px
- 48 px
- пігулка
Кнопки: пігулка
Шкала тексту
- AaH1, 96 px
- AaH3, 24 px
- AaЛід, 20 px
- AaТекст, 16 px
Контраст
- 8,4 : 1текст на тлі, AAA
- 11,5 : 1напис на кнопці, AAA
Тіні
Тінь пофарбована в колір сайту
Контекст
BeHoneyBee шиє дитячий одяг у власному ательє. Кожна модель є в стандартних розмірах і як замовлення за мірками дитини. До магазину додається програма лояльності «Медові бали».
Проблема
Коробкова платформа такого замовлення не прийме. Одна позиція водночас складський розмір із ціною і замовлення з трьома мірками в сантиметрах. Зазвичай рятуються приміткою до замовлення, а це ручне передрукування кожної речі.
Обмеження
Попереднього сайту не було, магазин робиться з нуля. Сьогодні магазин працює як прототип на React, повністю в браузері. Пошуковик бачить у ньому порожню сторінку, тому бойовий магазин отримає рендеринг на сервері.
Рішення просто там, де вони живуть
Чому ми зробили саме так.
Поля звуться просто: ім'я, email, адреса. Так хоче й брендбук: про гроші й дані пишуть без гри слів.
Кожна позиція має назву, колір і ціну. Батьки бачать, що саме замовляють, ще до оплати.
«Медові бали» віднімаються від замовлення однією позначкою. Батьки бачать свій залишок і скільки він вартий.
Кошик зветься вуликом, а лічильник у шапці показує, скільки в ньому речей.
Поля звуться просто: ім'я, email, адреса. Так хоче й брендбук: про гроші й дані пишуть без гри слів.
Кожна позиція має назву, колір і ціну. Батьки бачать, що саме замовляють, ще до оплати.
«Медові бали» віднімаються від замовлення однією позначкою. Батьки бачать свій залишок і скільки він вартий.
Кошик зветься вуликом, а лічильник у шапці показує, скільки в ньому речей.
Що ми зробили, і чому
Таблиця розмірів у картці
Розміри за зростом у сантиметрах, під ними таблиця з орієнтовним віком. Під кнопкою кошика починається пошиття за мірками.
Рівні «Медових балів»
Прототип показує залишок, поріг наступного рівня й бонуси кожного рівня. Потім брендбук розширив програму до п'яти рівнів, від Dělnice до Včelí královna.
Статус замовлення по кроках
Підтверджено, в обробці, відправлено, доставлено. Після оплати прототип сам переходить до відстеження з номером замовлення. Під час пошиття на замовлення найчастіше питають: «де воно?»
Що за цим стоїть щодо SEO
Прототип у браузері, магазин на сервері
Зараз сервер віддає порожню сторінку, а вміст домальовує JavaScript. Пошуковикам цього мало, тому бойова вітрина рендерить сторінки на сервері.
Своя адреса в кожного екрана
Магазин, програма лояльності, оформлення й відстеження мають свій шлях в URL. Посиланням на будь-який екран можна поділитися.
Чотири мови, поки без своїх адрес
Перемикач змінює мову одразу, без перезавантаження. Адреса лишається та сама, тож мовні версії поки не мають своїх URL.
Шрифт не чекає на мережу
З'єднання з Google Fonts відкривається заздалегідь, і текст одразу видно запасним шрифтом. Фірмовий шрифт підміняє його, щойно завантажиться.
Що вийшло
Прототип був ескізом шляху покупки, він проклікується від головної до відстеження замовлення, чотирма мовами. Бойовий магазин зараз робиться за брендбуком BeHoneyBee: каталог, склад і оплата на Medusa.js, контент і колекції в Payload CMS. Цифри нижче ми заміряли самі на робочому прототипі.
Ближчий погляд
Натисни на кадр, і він відкриється на весь екран.
Той самий клієнт
Ще для BeHoneyBee
Дитяча мода, брендинг
Брендбук BeHoneyBee
Брендбук і дизайн-система для марки дитячого одягу: від цінностей і знака до магазину, Instagram і пакування.
Дитяча мода, соцмережі
Instagram-студія BeHoneyBee
Інструмент у телефоні: пост, Stories чи обкладинка Reels у стилі марки, з готовим підписом чеською.