Projects

Reno: інтернет-магазин розсувних дверей з конфігуратором

Інтерактивний інтернет-магазин для виробника дверей із можливістю конфігурації продукту в режимі реального часу, 3D-оглядом та продуманим шлязом покупки для B2C та B2B клієнтів.

Клієнт

Reno — польський виробник розсувних дверей та настінних систем «під ключ», представлений на ринку з 2014 року.

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

Дизайн виклик

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

Наш підхід

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

Обсяг робіт

Data collection & Research

Client briefing / Website and Competitive analysis / Customer feedback analytics

Identity Conception Update

New brand identity / UI direction / Graphics and animations

UI/UX Phase

UI Concept / UI Design / User Testing feedback / Template Improving

Developing Stage

Creating and launching the Website, Account and Configurator

Технології

Наша команда розробників обрала платформу для інтернет-магазинів Saleor із відкритим вихідним кодом, яка забезпечує надшвидкий, динамічний та персоналізований процес покупки.

Saleor Prismic CMS Storyblok Apollo-graphql Typescript React.js Styled-components UX Design UI design

Айдентика

На етапі підготовки до проектування ми провели конкурентне дослідження та викристалізували найрелевантніші ідеї для створення візуальної мови кольорів, форм, анімації та самої концепції. Після затвердження візуального ряду ми розробили нову концепцію брендингу та систему елементів інтерфейсу, щоб розширити її на увесь веб-сайт.

Лого

У невеликій частині логотипу ви можете побачити позначку, схожу на дверну застібку, яку ми запропонували як основний елемент бренду. Він символізує надійність і довіру. Цей елемент показує, що складні технічні речі можуть бути простими та зрозумілими. Основний елемент простий у використанні, впізнаваний і креативний.

Дизайн система

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

Основним напрямком роботи ми обрали Atomic Design System: масштабування шляхом поєднання простих елементів у складні та функціональні структури інтерфейсу.

Дизайн іконок

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

Веб-сайт

Наступним кроком була робота над сторінками веб-сайту, аналіз потоку користувачів і створення комфортного та плавного процесу покупки.

Сторінка продукту

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

Конфігуратор

Конфігуратор — одна з найважливіших функцій веб-сайту, яка дозволяє клієнтам досягти максимально реальних результатів. Користувачі можуть налаштовувати систему розсувних дверей у реальному часі, використовуючи три режими: Стилізація, 3D-огляд та режим Вимірювання.

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

Адаптиви

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

Для клієнтів

Натхнення

Цей розділ — візуальний інструмент залучення користуваів, що демонструє реальні роботи з використанням Reno.Аби клієнти могли оглянути деталі дверних систем та знайти щось до душі.

Соціальне визнання

Щоб допомогти клієнтам упевнитись у своєму виборі, Reno пропонує перевірити соціальне визнання, поділившись дизайном дверей через соціальні мережі. Також є розділ «Відгуки» зі зворотнім зв’язком клієнтів та фотографіями розсувних дверей.

Зразки кольорів

Reno пропонує клієнтам замовити зразки кольорів. Ця послуга дозволяє попередньо оцінити та вибрати оптимальне індивідуальне рішення.

Для архітектора

Сторінка партнера

Цей розділ веб-сайту присвячений ключовим перевагам та особливостям співпраці та дозволяє користувачам приєднатися до програми архітекторів лише за декілька кліків. Приєднавшись, користувачі зможуть знайти шоуруми та місцезнаходження партнерів, швидкі посилання на інструкції зі встановлення, 3D-моделі та замовлення зразків.

Набір для архітектора

Подібно до зразків кольорів для клієнтів, веб-сайт пропонує послугу Architect box (Набір для архітектора). Створюючи дизайн інтер’єру, будь-який майстер може замовити кілька реальних варіантів дизайну дверей для підбору ідеального рішення.

Обліковий запис

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

Кошик для покупок

Використовуючи найсучасніші рішення для Reno, ми імплементували трендовий лінійний потік оформлення замовлення: великий та інтуїтивно зрозумілий попередній перегляд кошика для покупок, зручне оформлення замовлення, розділене на три етапи, розділи додаткових продажів і промо-кодів і, нарешті, сторінка успішної покупки, що залучає.

Результат

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

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

З нетерпінням чекаємо на відгук Reno про зміни в статистиці користувачів і цільові KPI компанії після редизайну.

Наступний проєкт

NM Global Trade

Обговоримо проєкт?

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

Дякуємо!
Ми отримали ваш запит і спробуємо
відповісти через декілька годин

На головну

Бюджет проекту

Тип проектy