![](https://cdn.cases.media/image/wide/e8241b97-844b-4649-9e46-e9cf5d36ce06.png)
Сайт інтернет-магазину подарунків та предметів інтер'єру ZELENA
Компанія
ZELENA – трендсеттер і лідер на ринку України в галузі преміальних подарунків і ексклюзивних, стильних букетів. ZELENA працює з провідними брендами престижних подарунків та елементів декору, тому одна з найважливіших речей для них – бути завжди на висоті. За роки співробітництва з Mavericks вони пройшли кілька етапів редизайну у зв’язку з новими віяннями, щоб завжди залишатися в тренді.
![](https://cdn.cases.media/image/wide/341f5564-a56b-44a5-a6e5-b27d726db708.png)
Завдання
Це був один із найскладніших проєктів для нашої команди. Завданням було створення ефективного сайту для стимулювання продажів і підвищення коефіцієнта конверсії, залишаючись при цьому мінімалістичним, стильним і простим у використанні.
Загальна кількість сторінок, які необхідно було розробити і закодувати, досягла 28, не рахуючи повідомлень, спливаючих вікон і мобільної версії сайту. Нам було потрібно більше 600 годин на проектування, обдумування і розробку.
Процес
Стилістика сайту була створена в трьох основних кольорах – чорному, білому та сірому, – щоб зберігати мінімалізм. Ці кольори є базовими і виглядають стильно у поєднанні з будь-якими іншими, не відволікаючи від карток товарів. Чіткі лінії і прямі кути надають вишуканості, а овальні кнопки пом’якшують дизайн. Шрифти були обрані на основі брендбуку компанії і доповнили візуальну складову сайту.
Головна сторінка
Перша точка контакту з брендом – вирішальна сторінка для продажів – мала бути ефектною. Для цього ми додали слайдер переходу між зображеннями, де кожне зображення тече, як вода, через логотип компанії.
![](https://cdn.cases.media/image/original/9b77bbc8-5572-48fd-941b-5633eb6441d5.gif)
Адаптивний веб-дизайн
Ще однією метою було створення бездоганного user flow для мобільних користувачів, оскільки більше 70% трафіку і доходів надходить з мобільних і планшетних пристроїв. Саме тому мобільна версія була розроблена таким чином, щоб більше бути схожою на додаток, ніж на класичний веб-сайт. Такий підхід допоміг нам знизити показник відмов і підвищити конверсію.
![](https://cdn.cases.media/image/wide/dfd24913-8e87-4acc-8609-7363185c559f.jpg)
Навігація, блоки, картки товарів, сторінки товарів – майже кожен елемент має свою мобільну версію, повністю адаптовану для зручності користувачів мобільних пристроїв.
![](https://cdn.cases.media/image/original/fc9239d6-35f8-44b4-ae3b-b65fdc3cdaa8.gif)
Спеціальні функції
Ми хотіли створити сайт, який відмінно працює для своєї головної мети – продажу, – але при цьому має свій характер і особливості. Саме тому ми застосували деякі дизайнерські прийоми:
- Тінь заголовка продукту з адаптивним кольором, який відповідає домінуючому кольору продукту. Коли ви наводите курсор на будь-який продукт, з'являється тінь і змушує продукт виникнути. Колір тіні визначається js-скриптом на основі головного кольору зображення товару.
![](https://cdn.cases.media/image/original/67a912b7-4f52-48b5-84a6-43d295f81de7.gif)
- Фон для заголовка, створений на основі іконки логотипу, – легке нагадування про особистий бренд і візуальну ідентичність.
- Слайдери зображень – новий прийом, коли зображення плавно змінюють одне одного через логотип компанії, що знову ж ідеально пов'язує його з брендом.
Результати
Новий дизайн був втілений у стилі flat style, а елементи айдентики використовувалися в самому інтерфейсі. Ми значно доопрацювали кошик, сторінку продукту та сторінку категорії продуктів. Головні результати – ріст коефіцієнта транзакцій на 30% і повна відповідність брендбуку компанії та останнім трендам дизайну e-commerce проектів.
![](https://cdn.cases.media/image/wide/0758eda9-c1ef-4fd5-bfab-6d454d64c5b2.jpg)