Ultimate guide: как одним сайтом разорвать шаблоны в диджитал презентации бренда для JAC Trucks

Кейс-лонгрид о том, как мы разработали сайт, который переосмысливает концепцию "китайской" спецтехники и запчастей для JAC Trucks.

Знакомьтесь, JAC Trucks. Крупный китайский новатор на мировом рынке спецтехники: от машин скорой помощи до автогидроподъемников. Знаете такой анекдот? Заходят в бар немец, швед и… Так вот мы одним сайтом заставилили нервничать немцев Mercedes и Volkswagen, шведа Scania, а потом еще и разнесли стереотипы об азиатском производителе спецтехники:

Интернет-магазин спецтехники и запчастей с конфигуратором от идеи до релиза для:

«Эх, если бы к нам за сайтом пришла Tesla…» – кринж. «Сайт для спецтехники» – наконец-то достойный противник, наша схватка будет легендарной!

За 180 дней мы:

Вы ещё тут? Погнали смотреть подробнее!

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

Project Manager x 1: словил дзен в управлении гигантскими потоками информации и задач. Помните старую игру с волком и яйцами? Так вот это наш проджект in real life. «Согласовать дизайн со всеми отделами заказчика» – справа! «Написать техническое задание программистам» – слева! Усложняем уровень… «Запараллелить этапы работы» – слева! «Успеть к дате релиза» – справа! И так 25 раз. Короче, где наш PM менеджерил, там плакал ваш канбан с вотерфоллом.

Маркетологи х 2: освоили новую профессию «Гонщик-автослесарь» – гонят как дышат. Хочешь понять реальные боли целевой аудитории – стань ее частью. Несколько дней провели на форумах в поисках подлинных потребностей, возражений и страхов ЦА, вычислили особо недовольных юзеров по айпи и провели личные интервью.

В общем, произошло тотальное погружение в продукт и рынок. Преисполнились настолько, что теперь готовы продавать БелАЗы для комфортной езды в потоке плотного городского трафика. Кстати, если вам надо – мы правда такое можем.

Копирайтер х 1: своими руками словами разрушил стереотип «китайский = дешевый/некачественный». ЦА нам одно возражение – мы им на это пять по-настоящему ценных преимуществ.

UX-дизайнеры х 2: прокачали эмпатию и совместили непростую ЦА с инновационными фичами интерфейса. В итоге даже директор автобазы без проблем серфит каталог и тюнингует кастомную технику в конфигураторе.

UI-дизайнеры х 2: вывели дизайн сайтов продажи спецтехники на новый уровень. Что делать, если изучаешь концепты топовых конкурентов и не находишь ничего выдающегося? Да просто взять и переизобрести стандарты визуала для сайтов такой тематики. Так что вы там говорили про дизайн сайта для Tesla? Давайте лучше Starship!

Frontend х 1: не может отбиться от звонков индийских коллег с просьбами показать код для сложных анимаций. Верстальщик аккуратно перенес все креативные задумки в диджитал-формат. А дизайнеры так впечатлились его работой, что уже готовят ТЗ для «сайта с зеркальным фоном, чтобы пользователь заходил и видел свое отражение».

Backend х 1: переиграл и уничтожил нагруженную визуалом и анимацией натяжку. Подключение к CMS прошло успешно: интернет-магазин летает, конфигуратор техники с 144 вариантами кастомизации работает надежно, как швейцарские часы.

Оффтоп: программист поддерживает идею дизайнера со Starship, а если надо – готов закодить даже приборную панель космолета.

Команда Ninen: готова к вызовам любой сложности right now.

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

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

В левом углу ринга – препятствия на пути к званию топ-1: отсутствие лидов, шаблонная презентация бренда, бизнес «по-старинке» и стереотипы «китайский = дешевый», «спецтехника = стремная махина в грязи».

В правом углу ринга – команда Ninen.

1. Провели брифинг с заказчиком. Аки Дудь, раскрыли компанию через 60 вопросов о продукте, бизнесе, целевой аудитории: «Оказавшись перед Пользователем, что вы ему скажете?» Погрузились в продуктовые исследования и swot-анализ, чтобы разговаривать с командой JAC на одном языке.

2. Исследование целевой аудитории организовали прямо «в поле»: зависли на форумах, провели несколько десятков личных интервью – и всё это, чтобы определить сегменты ЦА, понять их ключевые потребности, возражения и страхи и определить tone of voice.

3. Провели углубленный ресерч рынка без смс, регистрации и выгорания. Проанализировали позиционирование, структуру, офферы, функционал, стилистику текстов на сайтах прямых и косвенных конкурентов в сфере продажи спецтехники и запчастей. На основе полученных данных продумали отстройку для JAC Trucks и заложили фундамент будущей стратегии.

4. Подключили UX’ера и, начав мыслить как пользователи из каждого сегмента ЦА, проработали все вероятные сценарии поведения. Последовательно «разрезали» каждый бизнес-процесс, по которому будет проходить юзер, анализировали пользовательский опыт и все возможные точки касания. В результате сформировали модель позиционирования, определили критерии принятия решения, точки контакта.

5. Разработали прототип будущего сайта по заветам Миллера, Фиттса и Хика. Естественно, опираясь на стратегию и данные, полученные в результате предпроектного аналитического исследования.

6. Добавили в прот продающие тексты: без рекламного шума и клише, с конкретикой и реальной пользой.

Подведем итоги первого раунда: продуманные прототипы 12 страниц сайта с логичным расположением блоков, элементов и продающими текстами, которые построены на основе реальных данных, аналитике и KPI. Каждый символ работает на конверсию, каждый оффер приводит лидов.

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

2. Сформировали систему дизайна – для кого-то покажется муторным, но для нас это база. Всё на основе реальных данных, помните? При разработке документа учли тематику, цели разработки, характеристики основного сегмента ЦА. В итоге определили правила и принципы визуальной стратегии JAC Trucks, получили крепкую основу для создания не просто эстетичного, но и функционального дизайна, который будет управлять вниманием пользователей и проводить их по воронке продаж.

3. Провели UI-анализ топов рынка: цветовая палитра, стилеобразующие элементы, цветографика, анимация.

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

5. Нарисовали аж 3 абсолютно разных варианта концепций первого экрана – 3 возможных образа бренда на рынке. Команда JAC настолько вдохновилась нашим подходом, что предложила провести профессиональную фотосессию для техники – настоящий «удар под дых» шаблонному дизайну.

6. Нарисовали 12 стильных и юзер-френдли страниц, где UX упрощен до сути, за которой приходят пользователи. Ну и как же без адаптации: мы позаботились о том, чтобы десктоп и адаптив были не просто красивыми, но и юзабельными на всех устройствах и браузерах.

7. Приступили к переносу макета в онлайн по принципу Pixel Perfect: выполнили аккуратную кроссбраузерную валидную вёрстку с адаптацией структуры под CMS. И всё это без плагинов, регистрации и смс. Сайт JAC Trucks как суперкар среди конкурентов на рынке – разгоняется за 2 секунды. С оптимизацией мы и правда постарались: проверили скорость загрузки на всех возможных устройствах, оптимизировали скрипты и изображения.

8. Провели комплексное QA QC тестирование на разных устройствах и разрешениях экранов в браузерах последних версий. Прошли полный путь пользователя, проверяя техническую и визуальную составляющие сайта: принцип Pixel Perfect, анимации и функциональность всех элементов.

Результаты второго раунда: нешаблонный дизайн 12 страниц сайта и всех второстепенных элементов (модальные окна, фавикон, виджеты, поп-апы, скрытые блоки), бережно перенесенный в онлайн. Адаптивная верстка страниц детально проработана и протестирована, а дизайн одинаково хорош и юзабелен на всех устройствах. Программистам приготовиться!

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

2. После комплексного теста мы выполнили интеграцию блоков верстки с 1С-Битрикс, создали новую систему под конкретные задачи проекта и подключили функциональные модули: карты, каталог, поиск по сайту. Наполнили сайт тестовым контентом и выполнили базовое тестирование.

3. После повторного QA QC тестирования User Flow на всех устройствах и нагрузочного теста сайта приступили к настройке сервера заказчика. Перенесли сайт, установили и настроили SSL-сертификат.

Итог третьего раунда: бизнес автоматизирован на все 100%. Конфигуратор, каталог и корзина работают как часы, ни одна заявка не теряется. И да, мы не из тех, кто «сделал и отдал». Ninen is ❤. Мы не бросили заказчика один-на-один с таким сложным и динамичным продуктом, а составили понятные инструкции по управлению сайтом. И даже записали обучающее видео для сотрудников!

На выходе получили полный «Finish him!» в виде переворота рынка спецтехники и запчастей! Уникальный продукт для своего сегмента по дизайну и функционалу.

Стильный и объемный «металлический» визуал, нешаблонное цветовое сочетание холодного серого фона с яркими цветовыми акцентами и умеренное негативное пространство – вот новый дорогой визуальный тренд для сайтов такой тематики.

Оттестированный User Flow, соответствующий законам и правилам UX, сложные функции, упрощенные до сути, сайт без багов, адаптированный под любое устройство и браузер – вот новые высокие стандарты к любому комплексному интернет-магазину спецтехники.

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