Sodasan — інтернет-магазин органічної та екологічної побутової хімії з версткою з Figma
Здійснили преміальну розробку інтернет-магазину сертифікованої органічної побутової хімії німецького бренду Sodasan: бездоганна верстка авторського дизайн-макету з Figma під OpenCart, створення кастомних інтерактивних модулів підбору засобів за типами тканин і поверхонь, калькулятор безпечного дозування та швидкий екологічний чекаут.
Німецькі стандарти натуральності, безпеки та екологічної чистоти вашого дому
Бренд Sodasan — піонер у виробництві органічних пральних порошків, мийних концентратів та засобів для догляду за оселею в Європі. Продукція створюється виключно на рослинній сировині без фосфатів, синтетичних віддушок та мікропластику, маючи найвищі еко-сертифікати NCP (Nature Care Product) та Vegan Society. Для українського представництва бренду дизайнери розробили витончений, повітряний макет у Figma. Завданням OCStudio було перетворити макет на швидкий, інтерактивний інтернет-магазин на базі OpenCart зі створенням нових функціональних модулів.
3 фундаментальні виклики та інженерні рішення проекту
Ключовий технологічний функціонал інтернет-магазину
Pixel-Perfect верстка дизайн-макетів з Figma
100% відповідність затвердженому візуальному стилю, шрифтам, відступам та колірній гамі.
Кастомний модуль підбору для алергіків та дітей
Швидка селекція засобів без ароматизаторів (серія Sodasan Sensitive).
Інтерактивний калькулятор дозування концентрату
Наочний розрахунок економії та кількості прань в одній пляшці або пачці засобу.
Односторінковий швидкий чекаут Simple
Миттєвий вибір відділень та поштоматів Нової Пошти з автозаповненням профілю.
Оптимізація графіки та відгуку сторінок
Конвертація еко-ілюстрацій та банерів у WebP з досягненням 95+ балів PageSpeed.
Структуровані дані Schema.org та SEO-база
Розмітка органічних товарів даними Product, Offer та AggregateRating для пошукових систем.
500+
Найменувань сертифікованої органічної продукції в каталозі
< 0.65 с
Швидкість відгуку інтернет-магазину на мобільних пристроях
100%
Pixel-Perfect перенесення дизайн-концепції з Figma
0%
Синтетичних домішок, парабенів, фосфатів та мікропластику
Комплекс виконаних робіт під ключ
| Аналіз макетів Figma та підготовка компонентів | Декомпозиція UI-кіта, типографіки, адаптивних брейкпоінтів для десктопу, планшетів і смартфонів. |
| Pixel-Perfect верстка на базі OpenCart | Індивідуальна реалізація шапки, карточок товарів, кошика та меню категорій за дизайном. |
| Розробка модуля підбору гіпоалергенних засобів | Створення інтерактивного скрипта фільтрації за чутливістю шкіри та віком дитини. |
| Створення калькулятора еко-дозування | Інтерактивний віджет у картці товару, що показує реальну вартість одного прання. |
| Налаштування односторінкового чекауту Simple | Оптимізація форми під швидку покупку зі смартфона з онлайн-оплатою та поштоматами. |
| Комплексна оптимізація швидкодії WebP / PageSpeed | Досягнення максимальних швидкостей завантаження сторінок згідно зі стандартами Google. |
Вплив технічних рішень на конверсію та продажі
Адаптивний UI/UX: естетика, швидкість та зручність
«Для нашого бренду органічної побутової хімії Sodasan було принципово важливо, щоб новий сайт викликав відчуття чистоти, турботи та преміальної європейської якості. Ми ретельно малювали кожен екран у Figma і дуже хвилювалися, чи вдасться втілити всі модулі в живий OpenCart. Команда OCStudio виконала роботу бездоганно! Верстка ідеальна піксель-у-піксель, калькулятор дозування працює як годинник, а швидкість сайту вражає. Проект повністю готовий до релізу!»