Інтернет-магазин для квіткової студії

1. 01

   Бриф

   Розпитую про бізнес, покупців і задачі сайту. Studio Deluxe продає букети, квіти в коробках і кошиках, повітряні кульки й подарунки, а возить по Познані й околицях.

   Хто що робить

   • Ти: розповідаєш про бізнес і покупців.
   • Я: розпитую, поки не буде картина.
   • На руках: записані відповіді і задачі сайту.

   Що за бізнес?

   Квіткова студія в Познані

   Що продаєте?

   Букети, квіти в коробках і кошиках, кульки, подарунки

   Куди возите?

   Познань і околиці, того ж дня

   Що має вміти сайт?

   Каталог, кошик, оплата онлайн, доставка

2. 02

   Технічне завдання

   Це список того, що саме роблю: розділи каталогу, картка товару, оплата, доставка, мови. Так далі ніхто не гадає, що мав на увазі.

   Хто що робить

   • Ти: читаєш і підтверджуєш.
   • Я: записую все, що вирішили.
   • На руках: список розділів, функцій, оплат і мов.

   Каталог

   розділи квітів і кульок, фільтри за ціною, кількістю квітів і розміром букета

   Картка букета

   фото, ціна, опис і блок «додай також»

   Оплата

   картка, BLIK, Przelewy24, Apple Pay, Google Pay

   Доставка

   того ж дня, якщо замовити до 19:00, або самовивіз

   Мови

   сім мов, перемикач у шапці

   Платформа

   WordPress, клієнт сам додає букети й міняє ціни

3. 03

   Структура

   Малюю карту сайту і шлях покупця від першого екрана до оплати. Видно, де людина обирає букет і скільки кроків до замовлення.

   Хто що робить

   • Ти: перевіряєш, чи шлях логічний для твоїх покупців.
   • Я: будую карту всіх розділів.
   • На руках: схема структури магазину.

   Як влаштований магазин

   Назви розділів лишились польськими, як на сайті, під кожною є переклад.

   Strona głównaголовна, звідси чотири розділи меню

   Kwiatyквіти: троянди, гортензії, мікси, коробки, кошики

   Balonyповітряні кульки за приводами

   Usługiпослуги: весільна флористика, квіткова підписка

   Informacjeпро студію, автомат із квітами, FAQ, контакти

   Шлях покупця

   1. Kategoriaрозділ каталогу з фільтрами
   2. Produktбукет, ціна і «додай також»
   3. Koszykкошик
   4. Zamówienieдоставка й оплата
   5. Moje kontoкабінет із замовленнями

   Окремі сторінки

   Dostawa i płatnośćдоставка й оплата

   Lista życzeńсписок бажань

   Regulamin sklepuправила магазину

   Polityka prywatnościполітика конфіденційності
4. 04

   Вайрфрейм

   Це чорно-біла схема кожної сторінки, без кольору й фото.

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

   Хто що робить

   • Ти: погоджуєш логіку й порядок блоків.
   • Я: малюю екран за екраном.
   • На руках: погоджена схема сторінок.

   Чорно-біла схема першого екрана

   Чесно: цю схему намальовано вже по готовому першому екрану, щоб показати принцип.

5. 05

   Дизайн

   Стиль лягає на погоджену схему. Магазин говорить мовою бренду студії: рівний гротеск у заголовках, м’який шрифт у текстах і фірмова фуксія на всіх кнопках покупки.

   Хто що робить

   • Ти: дивишся стиль, погоджуєш.
   • Я: малюю макети для комп’ютера й телефона.
   • На руках: готові макети двох версій.

   Ідея дизайну

   Montserrat

   Заголовки й кнопки

   Геометричний гротеск. Рівний і впевнений, добре читається великими літерами.

   Lato

   Тексти й ціни

   М’який і спокійний. Описи букетів і ціни читаються навіть дрібним розміром.

   • Фуксія#CF006F, кнопки й акценти
   • Пудра#FEE4EB, підказки й фон меню
   • Світло-сірий#F7F7F7, фон блоків
   • Графіт#242424, заголовки

   Kwiaty i balony z dostawą tego samego dnia

   Zamów bukiet i spraw radość bliskim bez wychodzenia z domu.

   Wybierz bukiet

   Перший екран магазину, зібраний зі шрифтів і кольорів бренду

   Так це виглядає на сторінках сайту
6. 06

   Верстка

   Лише тепер збираю магазин на WordPress за макетом, в Elementor Pro (конструктор, у якому зручно правити сайт без програміста). Каталог, кошик, оплата, доставка, мови й налаштування, щоб магазин знаходили в Google, уже всередині.

   Хто що робить

   • Ти: отримуєш посилання на робочу версію й дивишся, як усе виглядає.
   • Я: збираю каталог, картки букетів, кошик і оформлення замовлення, підключаю оплату й мови.
   • На руках: робочий магазин, який ти наповнюєш сама.
   • 7мов
   • 6способів оплати
   • 3адреси на карті
7. 07

   Тестування і запуск

   Перевіряю на комп’ютері й телефоні, проходжу шлях покупця від каталогу до оплати. Запуск тільки після цього.

   Хто що робить

   • Ти: дивишся результат і даєш добро на запуск.
   • Я: перевіряю кожну сторінку, кошик і оплату.
   • На руках: запущений магазин, який твоя команда далі веде сама.
   • На комп’ютері
   • На телефоні
   • Каталог, фільтри й картки букетів
   • Кошик, доставка й оплата
   • Запуск

Каталог, у якому легко обрати

Букети розкладені по розділах: троянди, гортензії, мікси, квіти в коробках і кошиках, кульки. Ціну видно одразу в картці.

• Розділи в меню і в бічній колонці
• Фільтри за ціною, кількістю квітів і розміром букета
• Сортування і вибір, скільки букетів показати

Подарунок до букета одразу

На сторінці букета є блок «Dodaj także» (додай також). Листівку з побажанням, кульки, плюшевого ведмедика чи фірмову сумку можна додати до замовлення, не шукаючи по каталогу.

• Листівка з твоїм побажанням
• Кульки й іграшки з цінами просто під букетом
• Опис, склад і доставка в розгортних блоках

Доставка того ж дня

Якщо замовити до 19:00. По Познані навіть за дві години, сім днів на тиждень.

Оплата онлайн

Картка, BLIK, Przelewy24, Apple Pay і Google Pay.

Самовивіз

Дві студії в Познані щодня з 9:00 до 20:00 і автомат із квітами, що працює цілодобово.

Сім мов

Польська, англійська, німецька, італійська, іспанська, українська, російська. Перемикач у шапці.

Кабінет і список бажань

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

Cookies за правилами ЄС

Вікно про файли cookies і окрема сторінка з політикою, як вимагає закон ЄС.

Три версіїТелефон, планшет і комп’ютер

Адаптований під усі пристрої

Мобільна версія зібрана окремо: букети у дві колонки, кнопка «у кошик» під кожним, кошик завжди під рукою. На планшеті своя сітка, середня між телефоном і комп’ютером.

• Меню під значком із трьох смужок, мова й кошик поруч
• Категорії й фільтри згорнуті, щоб не заважали букетам
• Кнопка «Dodaj do koszyka» на кожній картці
• Планшет: мова, кошик і меню в шапці, під фото заголовок і кнопка «Wybierz bukiet»

Головна Каталог

Так магазин виглядає на телефоні. Гортай екран і натисни «Wybierz bukiet», щоб відкрити каталог. Дві сторінки, кошик тут не працює.

Гортай убік →