Редизайн інтернет-магазину дитячих іграшок Magic Shop

Magic Shop — інтернет-магазин дитячих іграшок. Перед командою Doba Digital стояло завдання оновити дизайн сайту: спростити каталог, зробити картку товару зручнішою і скоротити шлях від вибору іграшки до оформлення замовлення. Ми виконали проєкт як окрему послугу дизайну — нову структуру каталогу, UX/UI ключових сторінок і адаптивну версію для мобільних пристроїв. Розробку та впровадження в код виконує технічний партнер клієнта.

About the project

Magic Shop — інтернет-магазин дитячих іграшок із широким асортиментом: від м’яких іграшок і конструкторів до розвивальних наборів. Окрім онлайн-магазину, у бренду є фізичні точки продажу, тому сайт має відображати той самий затишний, «магічний» характер бренду, що й офлайн-простір. Попередній сайт мав застарілий вигляд і ускладнював пошук товару: каталог погано фільтрувався, а шлях від картки товару до оформлення замовлення був довшим, ніж потрібно для категорії, де рішення про покупку часто ухвалюють швидко.
Doba.Digital відповідала виключно за дизайн — це окрема послуга для клієнтів, які вже мають розробника чи технічного партнера. Асортимент і фактаж про товари надав клієнт, ми відповідали за структуру, UX/UI і візуальну систему сайту, включно з адаптивною версією для мобільних пристроїв.

Goals and objectives

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

Процес дизайну сайту для Magic Shop

Редизайн Magic Shop ми побудували навколо однієї мети — прибрати зайві кроки між тим, як покупець побачив іграшку, і тим, як він її замовив. Оскільки Doba.Digital відповідала лише за дизайн, кожен етап завершувався передачею готових рішень технічному партнеру клієнта.

Analysis and structure

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

UX/UI-дизайн ключових сторінок

Розробили дизайн головної сторінки, каталогу з фільтрами, картки товару, кошика й оформлення замовлення. Візуальна мова — яскрава фіолетова палітра з великими фотографіями товарів і легкими ілюстративними елементами, що відповідає дитячій тематиці магазину, але не переобтяжує типову e-commerce навігацію. Кожна сторінка спроєктована так, щоб дія «додати в кошик» чи «оформити замовлення» завжди була на видному місці, а не губилась серед декоративних елементів.

Адаптивна версія

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

Передача макетів у розробку

Фінальним етапом стала передача готових макетів технічному партнеру клієнта разом зі специфікацією компонентів — без участі Doba.Digital у верстці й програмуванні. Компонентна структура (картки товару, фільтри, кнопки) дозволяє розробнику верстати каталог і додавати нові категорії без узгодження кожного окремого елемента наново.

Замовте дизайн сайту для вашого інтернет-магазину

Якщо каталог вашого магазину складно фільтрувати, а шлях до оформлення замовлення занадто довгий, команда Doba Digital допоможе. Замовити дизайн сайту для інтернет-магазину можна як окрему послугу: ми аналізуємо поведінку покупців, проєктуємо каталог, картку товару й оформлення замовлення та готуємо дизайн-систему, зручну для передачі будь-якому розробнику.

Замовити дизайн сайту

Замовте дизайн сайту для вашого інтернет-магазину 1

Замовте дизайн сайту для вашого інтернет-магазину 2

Що було реалізовано

Home page

Головна знайомить із брендом і одразу веде в каталог: великі банери з категоріями та акціями, добірки популярних товарів і новинок. Візуальний стиль — яскравий, ілюстративний, з фотографіями товарів на світлому тлі, що одразу зчитується як дитячий магазин.

Каталог

Сторінка каталогу побудована навколо фільтрів у бічній панелі — за категорією, віком, ціною — та сітки карток товару з фото, назвою, ціною і кнопкою «в кошик» просто з картки, без переходу на сторінку товару. Такий підхід скорочує шлях до кошика для покупців, які вже знають, що хочуть купити. Окремі блоки на сторінці виділяють топові товари й новинки, щоб магазин міг підсвічувати актуальний асортимент без зміни структури сторінки.

Product page

Картка товару поєднує галерею фото, ціну, короткий опис і блок відгуків клієнтів на тому самому екрані — без гортання довгого списку характеристик. Нижче розміщені рекомендації схожих товарів, щоб покупець міг продовжити вибір, не повертаючись у каталог. Кнопка «в кошик» залишається на видному місці незалежно від того, яку вкладку (опис чи відгуки) переглядає покупець.

Кошик та оформлення замовлення

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

Про нас, контакти та обмін і повернення

Сторінка «Про нас» розповідає історію бренду в тому самому теплому, «магічному» візуальному стилі — з ілюстраціями (хмари, повітряна кулька) та фотографіями фізичних магазинів мережі, що підкреслює: Magic Shop — це не лише онлайн-каталог, а й реальний простір для покупців. «Контакти» та «Обмін та повернення» оформлені у спільній візуальній системі з рештою сайту, щоб покупець міг знайти умови покупки так само легко, як і сам товар.

Results

На виході клієнт отримав не просто новий візуальний стиль, а скорочений шлях від каталогу до покупки: менше кроків між вибором іграшки й оформленням замовлення, зручні фільтри та кнопка «в кошик» прямо з картки каталогу. Головна проблема, з якою Magic Shop прийшов у Doba.Digital, — застарілий вигляд сайту і довгий шлях до замовлення в категорії, де рішення ухвалюють швидко, — вирішена ще на рівні дизайну.

Окрема цінність проєкту — адаптивна версія ключових сторінок: головної, каталогу, картки товару, кошика й оформлення замовлення. Для магазину дитячих товарів, де значна частина покупок відбувається зі смартфона, це прямо впливає на те, чи дійде відвідувач до оформлення замовлення, чи закриє вкладку на середині шляху. Єдина дизайн-система на всіх сторінках також означає, що додавання нових категорій товарів чи акційних банерів не вимагатиме окремого дизайну щоразу.

Оскільки Doba.Digital відповідала виключно за дизайн, впровадження в код виконує технічний партнер клієнта. Такий формат співпраці підходить інтернет-магазинам, у яких вже є власна технічна команда і потрібне лише якісне UX/UI-рішення — саме це ми пропонуємо як окрему послугу дизайн сайтів під ваші потреби, без прив'язки до власної розробки.

Home page

Головну сторінку ми побудували як вітрину бренду, що одразу занурює у світ магазину: великий банер із фотографією дітей за грою доповнює короткий підзаголовок про класні дерев'яні іграшки та кнопку переходу в каталог. Одразу під банером — рядок із короткими перевагами (доставка, якість, підтримка), які знімають типові сумніви покупця ще до того, як він побачить перший товар.

Далі йде добірка «Хіти продажів» — картки товару з фото, ціною і кнопкою «в кошик» просто на головній, без переходу в каталог. Нижче розміщений блок партнерських брендів: логотипи виробників іграшок одразу підтверджують, що магазин працює з відомими постачальниками, а не продає щось невідоме — важливий сигнал довіри саме для батьків, які купують дитячі товари. Далі йде яскравий промо-банер з анонсом акції чи нової колекції та кнопкою переходу.

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

Internal pages

Усі сторінки сайту — від каталогу й картки товару до кошика, оформлення замовлення, сторінки «Про нас» і умов обміну та повернення — використовують одну візуальну систему: шрифти, кольори, компоненти карток і кнопок.

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

Тож перехід між розділами відчувається цілісним, а не набором розрізнених шаблонів.

Mobile version

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

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

Особливу увагу приділили доступності ключових дій на маленькому екрані: кнопка «в кошик» завжди в зоні досяжності великого пальця, а форма оформлення замовлення розбита на короткі, зрозумілі блоки, зручні для заповнення з телефона.

Frequently asked questions

Так, це окрема послуга — дизайн сайтів під ваші потреби. Вона підходить компаніям, які вже мають розробника або технічного партнера і потребують лише UX/UI-рішення: структуру сторінок, макети та візуальну систему. Саме так ми працювали з Magic Shop — Doba.Digital відповідала за дизайн, а впровадження в код виконує технічний партнер клієнта.

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

Термін залежить від кількості сторінок і глибини змін. Для Magic Shop, де ми спроєктували повний цикл покупки — від каталогу до оформлення замовлення — разом з адаптивною версією ключових сторінок, робота над дизайном зайняла кілька тижнів: від аналізу поведінки покупців до фінальних макетів усіх сторінок і мобільної версії.

Якщо клієнт замовляє лише дизайн, за верстку і програмування відповідає його власна команда чи технічний партнер. У кейсі Magic Shop Doba.Digital підготувала макети всіх сторінок з чіткою структурою компонентів, а перенесенням у робочий сайт займається технічний партнер клієнта — це стандартна практика для точкової послуги дизайну.