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