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 выполнила работу безупречно! Верстка идеальна пиксель-в-пиксель, калькулятор дозирования работает как часы, а скорость сайта поражает. Проект полностью готов к релизу!»