Мета
Редизайн інтернет магазину меблів Comfyco.
Завдання
- освіжити логотип
- редизайн існуючого інтернет магазину
- адаптивна верстка сторінок сайту
Послуги
Історія проекту
До нас звернувся клієнт із завданням по редизайну інтернет магазину меблів під американський ринок. Нам було приємно дізнатися, що свій вибір він зупинив на нас, оскільки в наших роботах ми пишемо чистий код.
Сам клієнт розбирається в програмуванні і саме з цього він шукав команду розробників досить довго, щоб віддати свій проект в надійні руки.
Клієнт надав технічне завдання на редизайн інтернет магазину, але перш ніж почати роботу, ми провели кілька конференцій, щоб зрозуміти яким він бачить свій новий інтернет магазин у деталях.
Головна сторінка
Після визначення основних аспектів, наша команда приступила до створення головної сторінки і розробила в рамках технічного завдання концепцію з декількома рішеннями.
При розробці дизайну, особлива увага була приділена зображенням, оскільки саме вони продають товар відвідувачам.
Складність полягала в тому, що зображення мають різні розміри і якість, оскільки в магазині представлені товари різних постачальників.
Виходячи з цього, було прийнято рішення використовувати квадратну форму для зображень товарів, щоб спростити їх масштабування і обрізання.
Меню
У процесі роботи було розроблено два меню:
- класичне в шапці сайту;
- фіксоване меню, доступне при прокручуванні сторінки.
Також у фіксованому блоці ми залишили ключові елементи навігації – пошук і кошик.
Сторінка категорії
На даній сторінці розроблено досить багато елементів, які дають можливість клієнту взаємодіяти з товарами на сторінці, а також вибрати саме той, який йому потрібен.
Сама ж категорія має наступний вигляд:
- промо-банер з назвою категорії;
- фільтр;
- плитка з товаром;
- опис категорії;
- блок з недавно переглянутих товарами.
Блоки карток товарів виглядають інакше, ніж на головній сторінці, оскільки на відміну від категорій він розрахований на залучення уваги, в той час як на сторінці категорії він більш інформативний і містить додаткові фото, які при наведенні змінюються, що надає сайту інтерактивності і зручності.
Сторінка товару
Одним з найскладніших елементів в даному проекті є сторінка товару, оскільки, потрапивши на певний товар, користувачів може відразу ж купить супутні товари.
Область для основного зображення товару було вирішено зробити квадратним для оптимального відображення зображень різного розміру і співвідношення сторін, а бокову панель закріпити на екрані, в разі, якщо це можливо.
Більшість товарів на зображенні утворюють набори, які гармоніюють між собою. Це не тільки дуже зручно для користувача, адже він може вибрати і ліжко і відповідний до неї приліжковий столик, але і допомагає підвищити середній чек.
Крім цього були розроблено додаткові блоки, які викликають довіру і спонукають користувача зробити покупку або почати взаємодію з сайтом, наприклад:
- відгуки про товар;
- можливість задати питання про товар.
Відповіді на питання доступні всім користувачам, що дозволяє не тільки підвищити довіру до конкретно цього продукту, але і розширити базу запитань від клієнтів, з яким можна працювати, тим самим покращуючи продукт.
Також, спеціально для цієї сторінки, ми розробили систему банерів, які сповіщають користувача про доступні на сайті знижки і дають інформацію про діючі купони.
Сторінка товару з комплектами
Страница корзины
Сторінка кошика розроблена таким чином, щоб користувач не витрачав багато часу на її заповнення, оскільки весь процес розбитий на невеликі кроки, які користувачеві візуально простіше сприймати.
Важливий момент. У кошику було прийнято рішення прибрати основне меню, щоб не відволікати користувача від процесу оформлення замовлення.
В кошику користувач вибирає зручний для нього спосіб доставки, додаткові послуги з доставки, а сам процес заповнення кошика відображається на таймлайне зверху, який також відображає поточну вартість замовлення на певних етапах.
Страница стоимости доставки
Оскільки даний інтернет магазин працює по всій території США, то вартість доставки може істотно відрізняться від штату до штату. Тому ми розробили окрему сторінку, яка дала б можливість користувачу вибрати свій штат і дізнатися точну вартість доставки, а так само її приблизні терміни.
Сторінка помилки 404
Мобільна версія
При розробці мобільної версії ми зіткнулися з наступними завданнями:
- реорганізація меню;
- зручний фільтр;
- пошук, який би повторював функціонал основної версії сайту;
- зручний футер;
- розробити кілька видів викладки товарів;
Головна сторінка
Ми намагалися максимально зберегти весь функціонал повної версії сайту, подбали про те щоб всі рекламні вікна збереглися. Були перероблені всі блоки головної сторінки по UX мобільного користувача, що дозволило скоротити довжину мобільної версії сторінки.
Ми змінили футер для того щоб користувачеві було зручно натискати на посилання, реалізувавши меню у вигляді набору кнопок. Ці дуже важливі зміни, оскільки на деякі сторінки можна перейти тільки з цієї частини сайту.
Фільтр
Іноді розробники нехтують фільтром на мобільній версії зовсім його приховуючи. У нашому випадку ми реалізували його в окремому спливаючому вікні з повним функціоналом.
Категорія
Для мобільного сторінки категорії ми розробили два варіанти відображення товарів:
- компактний – в даному випадку на екрані пристрою поміщається два товари, що дозволяє спростити процес ознайомлення з асортиментом;
- розширений – відображається по одному товару в рядку, і дозволяє більш детально розглянути зображення.
Обговорити проект