Дизайн інтернет-магазину квітів Sparkle

Задача

Розробити ніжний та конверсійний дизайн інтернет-магазину квітів Sparkle зі зручним каталогом букетів, фільтрацією, швидким замовленням в 1 клік і мобільною адаптацією.

Зроблено

Дизайн

Адаптиви

Концепція

На старті розробили 4 варіанти візуальної концепції першого екрана: від повноекранного фотобанера й журнальної типографіки з пелюстками до м'яких пастельних карток і легкого акварельного стилю. Замовник обрав ніжний світлий концепт із виразною рукописною акцентною гарнітурою, що найкраще підкреслює свіжість букетів.

Повноекранний фотобанер

Карткова сітка

Журнальна типографіка

Фінальний світлий концепт

Головна

Головна сторінка веде покупця від святкового банера та швидких категорій (букети, квіти в коробці, декор) до вітрини бестселерів та акційних пропозицій. Довіру до студії підсилюють переваги сервісу (фото букета перед відправкою, доставка від 1 години), рейтинг 4.6 із відгуками клієнтів, рекомендації блогерів та стрічка Instagram.

Каталог

Каталог побудований навколо чистої триколонкової вітрини з великими фотографіями композицій та бічної панелі фільтрів. Покупець може швидко відсортувати букети за рубрикою, бюджетом, акційним статусом та колірною гамою квітів.

Картка товару

У картці товару покупець бачить детальну галерею букета, точний склад квітів, вибір розміру (S, M, L, XL) та кнопки додавання в кошик або купівлі в 1 клік. Для підвищення середнього чека під основним блоком додано секцію «Разом дешевше» з вигідним комплектом, а також добірки схожих і переглянутих букетів.

Давайте працювати разом.

Готові втілити ваше бачення у життя? Давайте об'єднаємося для вашого наступного проєкту та разом створимо щось незабутнє.

// Type some code ->
console.log "oO08 iIlL1 g9qCGQ ~-+=>";
var paddingTop = 'px';
var sectionRadius = 'px';
// Interactive Theme Configuration
function updateButton(config) {
var radius = 'px';
btn.style.borderRadius = radius;
}
updateButton({ active: true });

Розробник

Color Styles

Pink

Purple

Orange

Green

Blue

Дизайнер

Доставка та оплата

Умови оплати та кур'єрської доставки оформлені у дві наочні картки без зайвого тексту. Окремо виділено можливість замовлення з-за кордону, часові слоти доставки та сервіс уточнення адреси безпосередньо в отримувача сюрпризу.

Про нас

Сторінка «Про нас» розповідає особисту історію засновниці студії Sparkle: як невелике хобі переросло у впізнаваний квітковий бутик у центрі міста з понад 20 000 задоволених клієнтів. Історію доповнюють живі фотографії та перелік стандартів якості догляду за квітами.

Блог

Редакційний блог студії з корисними статтями про догляд за зрізаними квітами та вибір букетів. У сітку публікацій нативно вбудовано промо-банер для переходу в каталог.

404

Кастомна сторінка помилки 404 оформлена з фірмовою квітковою композицією замість цифри «0» та помітною кнопкою повернення на головну сторінку магазину.

Pop-up вікна

Для підвищення конверсії спроєктували два модальні вікна: інтерактивний помічник підбору букета за святом, улюбленими квітами й бюджетом та швидку форму замовлення в 1 клік лише за ім'ям і номером телефону.

Підбір букета

Купівля в 1 клік

Мобільна версія

Усі 15 екранних станів інтернет-магазину ретельно адаптовані під смартфони, з яких надходить основна частина замовлень квітів. Зручні мобільні фільтри, компактна картка букета та швидкий кошик дозволяють оформити доставку за хвилину.