Кейс по разработке сайта компании Форд96

О клиенте

Ford96 — официальный партнёр FORD в России. Специализированный магазин форд96 занимается оптовой и розничной продажей оригинальных и неоригинальных, б/у контрактных автозапчастей, аксессуаров для автомобилей Ford, а также предлагает услуги автосервиса владельцам Форд.

Цель:

Основной задачей был редизайн сайта с рядом необходимых доработок. Ранее сайт был перенесен нами на платформу 1C Битрикс.

Инструменты:

Figma
Photoshop

форд96.рф

Целевая аудитория

Владельцы автомобилей марки Ford

Задачи

реализация адаптивной верстки

Сделаны адаптивные верстки сайта под различные разрешения экрана (мобильный телефон, планшет, широкоформатный экран).

Проработка корзины

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

проработка личного кабинета

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

реализация в личном кабинете истории обслуживания

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

интеграция модулей поиска запчастей по VIN

интеграция API каталогов с запчастями с сайта производителей

блок подбора запчастей

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

Улучшение юзабилити

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

модернизация страницы автосервис

Модернизация с целью удобного преставления информации по видам ремонта и маркам автомобиля. Добавлен блок с отзывами, галереей, навигация по маркам машин и типам работ.
Также созданы посадочные страницы для ремонта автомобилей KIA, Hyundai, Mazda

Этапы работ

сбор информации

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

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

Разработка дизайна

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

На основе утвержденного дизайна мы написали спецификацию для последующей верстки сайта.

Верстка

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

Верстка сайта кроссбраузерна и абсолютно адаптивна, из-за чего одинаково корректно отображается на всех устройствах.

Программирование

На заключительном этапе мы интегрировали сайт в систему управления контентом (CMS) Битрикс 1С и объединили верстку сайта с его функциональной частью.

Структура сайта

Как видно из структуры, на сайте обширный каталог запчастей, комплектов ТО по конкретным моделям автомобиля, услуг автосервиса (в том числе по моделям автомобилей).

ГЛАВНАЯ СТРАНИЦА

структура и концепция

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

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

редизайн сайта

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

Уникальность сайта

Главной нашей задачей стоял редизайн интернет-магазина запчастей с рядом необходимых доработок.

Подбор запчастей по модели автомобиля

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

Интеграция по API с поставщиками

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

Синхронизация истории заказов в личном кабинете

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

Поиск запчастей по VIN

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

Удобный подбор комплектов для ТО

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

ВНУТРЕННИЕ СТРАНИЦЫ

Также был разработан новый индивидуальный дизайн для 13 внутренних страниц и их вариаций:

Каталог

АДАПТИВ

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

Мобильный телефон 320*568px

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

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