Comfyco

Интернет-магазин мебели в США, Нью-Джерси

Ссылка на проект

Цель

Редизайн интернет магазина мебели Comfyco.

Задачи

  • освежить логотип
  • редизайн существующего интернет магазина
  • адаптивная верстка страниц сайта
Paul G
comfyco.com

Большое спасибо ребятам и Никите лично. Не скажу, что мы добрались до конца нашего проекта без проблем, многие вещи приходилось напоминать по нескольку раз, иногда спорили, иногда не соглашались, но это абсолютно нормально. Мой проект интернет-магазина был большим, непростым; я точно знал, что хочу видеть на выходе, потому как глобально это была 3-я версия интернет-магазина; к тому же я человек где-то чересчур внимательный к деталям, поэтому было иногда непросто, но результатом доволен на 99% — потому как всегда есть несколько мелочей, которые можно сделать лучше 🙂 .

Могу сказать, что самая сильная сторона Rubika — это прекрасное общение, всегда отвечают, никто никогда не пропадает, не выпадает на недели (хотя на несколько дней вполне могут), всегда есть какая-то обратная связь и даже если ваша проблема не может быть решена прям сейчас — она будет решена обязательно. Нормальное адекватное общение в IT, а особенно в пост-советском IT — это огромная редкость (есть опыт), поэтому Rubika ценна прежде всего этим.

В итоге можно сказать ,что я, конечно же, доволен. К тому же во время этого проекта я лично много чему научился, несколько вещей мне ребята помогли сделать — которые не были обговорены изначально — как бы бесплатно за что им большое спасибо. Приду ли я сюда ещё раз, если понадобится? Думаю, да. Порекомендую ли я Rubika своим знакомым, которым нужен хороший, продуманный сайт — обязательно. Имейте чёткое представление, что вы хотите получить на выходе, напоминайте о тех вещах, которые на ваш взгляд должны быть сделаны определённым образом — и всё будет хорошо.

Никите же желаю побольше серьёзных клиентов, внимания к деталям (!), хороших работников и терпения. Проектирование сайтов, программирование, общение с клиентами (не все ведь такие няшки как я) — это очень непростой хлеб, и терпение + адекватное общение это, наверное, самое важное. Профессионалов своего дела (касается любого дела), хватает в любой сфере, но в итоге всегда всё сводится к тому, насколько тебе приятно иметь с этим профессионалом дело. При прочих равных ты всегда выберешь того, с кем тебе приятно общаться.

История проекта

К нам обратился клиент с задачей по редизайну интернет магазина мебели под американский рынок. Нам было приятно узнать, что свой выбор он остановил на нас, поскольку в наших работах мы пишем чистый код.

Сам клиент разбирается в программировании и именно по этому он искал команду разработчиков довольно долго, чтобы отдать свой проект в надежные руки.

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

Главная страница

После определения основных аспектов, наша команда приступила к созданию главной страницы и разработала в рамках технического задания концепцию с несколькими цветовыми решениями.

При разработке дизайна, особое внимание было уделено изображениям, поскольку именно они представляют товар посетителям.

Сложность заключалась в том, что изображения имеют разные размеры и качество, поскольку в магазине представлены товары разных поставщиков.

Исходя из этого, было принято решение использовать квадратную форму для изображений товаров, чтобы упростить их масштабирование и обрезку.

Главная страница интернет магазина ComfyCo

Меню

В процессе работы было разработано два меню:

  • классическое в шапке сайта;
  • фиксированное меню, доступное при прокрутке страницы.

Также в фиксированном блоке мы оставили ключевые элементы навигации — поиск и корзину.

Страница категории

На данной странице разработано довольно много элементов, которые дают возможность клиенту взаимодействовать с товарами на странице, а также выбрать именно тот, который ему нужен.

Сама же категория имеет следующий вид:

  1. промо-баннер с названием категории;
  2. фильтр;
  3. плитка с товаром;
  4. описание категории;
  5. блок с недавно просмотренными товарами.

Блоки карточек товаров выглядят иначе, чем на главной странице, поскольку в отличии от категорий он рассчитан на привлечение внимания, в то время как на странице категории он более информативен и содержит дополнительные фото, которые при наведении меняются, что придает сайту интерактивности и удобства.

 

Страница товара

Одним из самых сложных элементов в данном проекте является страница товара, поскольку, перейдя на определенный товар, пользователь может сразу же купить сопутствующие товары.

Область для основного изображения товара было решено сделать квадратным для оптимального отображения изображений разного размера и соотношения сторон, а боковую панель закрепить на экране, в случае, если это возможно.

Большинство товаров на изображении образуют наборы, которые гармонируют между собой. Это не только очень удобно для пользователя, ведь он может выбрать и кровать и подходящий к ней прикроватный столик, но и помогает повысить средний чек.

Помимо этого были разработаны дополнительные блоки, которые вызывают доверие и побуждают пользователя совершить покупку или начать взаимодействие с сайтом, например:

  • отзывы о товаре;
  • возможность задать вопрос о товаре.

Ответы на вопросы доступны всем пользователям, что позволяет не только повысить доверие к конкретно этому продукту, но и расширить базу вопросов от клиентов, с которыми можно работать, тем самым улучшая продукт.

Также, специально для этой страницы, мы разработали систему баннеров, которые оповещают пользователя о доступных на сайте скидках и дают информацию о действующих купонах.

Страница товара с комплектами

Страница товара интернет магазина ComfyCo

Страница корзины

Корзина разработана таким образом, чтобы пользователь не тратил много времени на ее заполнение, поскольку весь процесс разбит на небольшие шаги, которые пользователю визуально проще воспринимать.

Важный момент. В корзине было принято решение убрать основное меню, чтобы не отвлекать пользователя от процесса оформления заказа.

В корзине пользователь выбирает удобный для него способ доставки, дополнительные услуги по доставке, а сам процесс заполнения корзины отображается на таймлайне сверху, который также отображает текущую стоимость заказа на определенных этапах.

Страница стоимости доставки

Поскольку данный интернет магазин работает по всей территории США, то стоимость доставки может существенно отличатся от штата к штату. Поэтому мы разработали отдельную страницу, которая дала бы возможность пользователю выбрать свой штат и узнать точную стоимость доставки, а так же ее примерные сроки.

Страница ошибки 404

Страница 404 ошибки интернет магазина ComfyCo

Мобильная версия

При разработке мобильной версии мы столкнулись со следующими задачами:

  • реорганизация меню;
  • удобный фильтр;
  • поиск, который бы повторял функционал основной версии сайта;
  • удобный футер;
  • разработать несколько видов выкладки товаров;

Главная страница

Мы старались максимально сохранить весь функционал полной версии сайта, позаботились о том чтобы все рекламные окна сохранились. Были переработаны все блоки главной страницы по UX мобильного пользователя, что позволило сократить длину мобильной версии страницы.

Мы изменили футер для того чтобы пользователю было удобно нажимать на ссылки, реализовав меню в виде набора кнопок. Эти очень важные изменения, поскольку на некоторые страницы можно перейти только из этой части сайта.

Фильтр

Иногда разработчики пренебрегают фильтром на мобильной версии вовсе его скрывая. В нашем случае мы реализовали его в отдельном всплывающем окне с полным функционалом.

Категория

Для мобильной страницы категории мы разработали два варианта отображения товаров:

  • компактный — в данном случае на экране устройства помещается два товара, что позволяет упростить процесс ознакомления с ассортиментом;
  • расширенный — отображается по одному товару в строке, и позволяет более детально рассмотреть изображения.
Хочу похожий сайт

Обсудить проект