Кейс по разработке сайта компании ATG

О клиенте

ATG — это интернет-магазин, специализирующийся на продаже автомобильных запчастей. С 2007 года компания занимается оснащением СТО, автомастерских, дилерских центров по всей стране. Основное направление - элементы рулевого управления, высочайшего, немецкого качества. Помимо этого, в наличии всегда присутствуют восстановленные рейки и насосы, которые прошли полный рабочий заводской цикл на профессиональном уровне.

Цель:

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

Идея:

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

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

Photoshop
Figma

atg-components.ru

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

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

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

Задачи

Маркетинговые

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

Имиджевая

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

Информационная

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

Этапы работ

Техническое задание

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

Прототип сайта

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

Дизайн сайта

Разработка макета дизайна будущего сайта строилась на основе фирменных цветов компании и имеющегося контента. При создании макета мы придерживались выбранной концепции воздушности сайта и легкости восприятия информации. Утвержденный макет подготовили в трёх разрешениях, для ПК, планшетов и мобильных устройств.

Верстка сайта

Данный этап подразумевает создание внешней оболочки сайта на основе согласованных дизайна и спецификации ( документ, в котором описываются все эффекты, которые невозможно показать на макете). Верстку сайта уже можно «потрогать» и посмотреть как будет выглядеть будущий сайт.

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

На заключительном этапе мы интегрировали верстку в систему управления сайтом (CMS) и произвели интеграции по API с drom.ru и ozon.ru.

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

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

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

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

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

Прототип сайта

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

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

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

Адаптив

Реализация адаптивной верстки под различные разрешения экрана:

Мобильный телефон (320*568px)
Планшет (768*1024px)
Десктоп (1280*1431px)

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

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

Мультиязычность

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

Связи

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

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

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

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

АДАПТИВ

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

Мобильный телефон 320*568px
Планшет 768*1024px
Десктоп 1280*1431px

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

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