Как мы разработали сайт, который переосмысливает концепцию «китайской» спецтехники и запчастей для JAC Trucks: ультимативный гайд по нарушению правил и стереотипов в диджитал-презентации бренда

Главное о кейсе

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

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

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

За 180 дней мы:
1. Провели ресерч рынка и продукта: от изучения тысяч комментариев на форумах и личных интервью с ЦА до аналитики топов рынка и разработки собственных стратегий.
2. Запилили UX с ювелирной точностью. Информационная архитектура, CJM и прототипы такие, будто сам Нильсен шептал на ухо нашему UX’ерам.
3. Приправили маркетингом. Просто работающий сайт? Meh… Эффективный продающий диджитал-инструмент? That's what I am talking about!
4. Крутой UI. Через год вы всё чаще будете слышать: «Хочу сайт, как у ̶A̶p̶p̶l̶e̶ JAC Trucks». Скриньте.
5. Функционал интернет-магазина. Всё на месте: фильтры, поиск, виджеты, категории, сортировки, карточки товаров и страницы с описаниями.
6. Корзина и оформление покупки – товар точно не будет пылиться в избранном.
7. Конфигуратор техники. Кастомное авто собрать проще, чем машинку из Lego.
8. Pixel Perfect верстка. Верстальщик потел, но дизайнер не слезал.
9. Запрограммировали всё это дело и устроили краш-тест.
10. Вся команда Ninen преисполнилась знаниями о спецтехнике. Реборда, редуктор, ниппель, пневмовал. Раунд!

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


____________________________________________________
ENG

Introducing JAC Trucks: a major Chinese innovator in the global specialized equipment market, from ambulances to hydraulic elevators. Ever heard this joke? A German, a Swede, and... So, with one website, we made nervous Mercedes and Volkswagen Germans, and the Swede Scania. Then shattered stereotypes about an Asian manufacturer of specialized equipment:
— Chinese ≠ cheap;
— specialized equipment ≠ a clunky machine in the mud.

In short, the task was to create an online store for specialized equipment and spare parts with a configurator from idea to release for:
1. lead generation;
2. brand presentation;
3. business automation.

"Oh, if only Tesla had come to us for a website..." – cringe. "A website for specialized equipment" – finally, a worthy opponent, our showdown will be legendary!

In 180 days, we:
1. Conducted market and product research: from studying thousands of forum comments and conducting personal interviews with the target audience to analyzing market leaders and developing our own strategies.
2. Crafted UX with meticulous precision. The information architecture, Customer Journey Mapping (CJM), and prototypes were so refined that it seemed Nielsen himself whispered to our UX designers.
3. Seasoned it with marketing. Just a functional website? Meh... An effective selling digital tool? That's what I am talking about!
4. Cool UI. A year from now, you'll hear more and more often, "I want a website like ̶A̶p̶p̶l̶e̶ JAC Trucks." Take a screenshot.
5. E-commerce functionality. Everything is in place: filters, search, widgets, categories, sorting, product cards, and description pages.
6. Shopping cart and checkout – the product won't gather dust in the favorites for sure.
7. Equipment configurator. Building a custom vehicle is easier than assembling a Lego toy.
8. Pixel-perfect layout. The frontend developer sweated, but the designer kept pressuring.
9. Programmed all of this and conducted crash tests.
10. The entire Ninen team immersed themselves in knowledge about specialized equipment. Flange, reducer, niggle, pneumatic shaft. Round!

Are you still here? Let's go and take a closer look!

Как проект изменил жизнь пользователей

Будем честны: прошло слишком мало времени, чтобы в цифрах оценить влияние проекта на пользователей. Но зато мы точно знаем, как изменилась жизнь команды 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: словил лютый кайф от активного участия в процессе: составление мудбордов, организация фотосессии для техники, тестирование багов. Приятный бонус: заказчик открыл собственные продукты с новой для себя стороны и наметил амбициозные планы на будущее. Так что ищите нас в номинации в следующем году.


____________________________________________________
ENG

Let's be honest: it's been too little time to assess the project's impact on users in numbers. But we do know exactly how the life of the Ninen team has changed since reading the brief.

Project Manager x1: found zen in managing colossal flows of information and tasks. Remember the old game with the wolf and eggs? So, this is our project in real life. "Coordinate the design with all customer departments" – on the right! "Write a technical specification for the programmers" – on the left! Level up... "Parallelize the work stages" – on the left! "Meet the release date" – on the right! And so 25 times.

Marketers x2: If you want to understand the real pains of your target audience, become a part of it. Several days were spent on forums in search of genuine needs, objections, and fears of the target audience. They identified particularly dissatisfied users by IP and conducted personal interviews.
In general, there was a total immersion in the product and market. They became so immersed that now they are ready to sell BelAZ trucks for comfortable driving in the flow of dense city traffic. By the way, if you need it – we can really do that.

Copywriter x1: broke the stereotype "Chinese = cheap/low-quality" with her own ̶h̶a̶n̶d̶s̶ words. The target audience gave us one objection – we countered it with five genuinely valuable advantages. Money talks and ******** walks. Yes, we have turned the market for special equipment upside down!

UX designers x2: enhanced their empathy skills and combined a challenging target audience with innovative interface features. As a result, even the director of a motor depot easily surfs the catalog and customizes specific vehicles in the configurator.

UI designers x2: took the web design for selling heavy machinery to a whole new level. What do you do when you're studying the concepts of top competitors and can't find anything outstanding? Just go ahead and reinvent the visual standards for websites in this niche.
So, what were you saying about Tesla's website design? Let's go with Starship instead!

Frontend x1: is bombarded with calls from Indian colleagues requesting a showcase of code for complex animations. The coder seamlessly translated all creative concepts into the digital format. And the designers were so impressed with his work that they're already drafting a brief for a "website with a mirrored background, so users can log in and see their reflection."

Backend x1: outplayed and smashed the heavily loaded design and animation hassle. The connection to CMS went smooth: the online store is blazing fast, and the tech configurator with 144 customization options is running rock-solid like Swiss watches.
Offtopic: the coder vibes with the designer's Starship idea, and if needed, he's down to code even the control panel of a spaceship.

Ninen team: ready for challenges of any complexity right now.

JAC Trucks: got a killer thrill from actively diving into the process: whipping up moodboards, orchestrating a tech photoshoot, bug testing. A sweet bonus: the client discovered their own products from a fresh perspective and outlined ambitious plans for the future. So, look for us in the nomination next year.

Бизнес-задача и ее решение

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

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

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

Fight! Раунд 1. Стратегия на основе реальных данных против отсутствия лидов.
1. Провели брифинг с заказчиком. Аки Дудь, раскрыли компанию через 60 вопросов о продукте, бизнесе, целевой аудитории: «Оказавшись перед Пользователем, что вы ему скажете?» Погрузились в продуктовые исследования и swot-анализ, чтобы разговаривать с командой JAC на одном языке.
2. Исследование целевой аудитории организовали прямо «в поле»: зависли на форумах, провели несколько десятков личных интервью – и всё это, чтобы определить сегменты ЦА, понять их ключевые потребности, возражения и страхи и определить tone of voice.
3. Провели углубленный ресерч рынка без смс, регистрации и выгорания. Проанализировали позиционирование, структуру, офферы, функционал, стилистику текстов на сайтах прямых и косвенных конкурентов в сфере продажи спецтехники и запчастей. На основе полученных данных продумали отстройку для JAC Trucks и заложили фундамент будущей стратегии.
4. Подключили UX’ера и, начав мыслить как пользователи из каждого сегмента ЦА, проработали все вероятные сценарии поведения. Последовательно «разрезали» каждый бизнес-процесс, по которому будет проходить юзер, анализировали пользовательский опыт и все возможные точки касания. В результате сформировали модель позиционирования, определили критерии принятия решения, точки контакта.
5. Разработали прототип будущего сайта по заветам Миллера, Фиттса и Хика. Естественно, опираясь на стратегию и данные, полученные в результате предпроектного аналитического исследования.
6. Добавили в прот продающие тексты: без рекламного шума и клише, с конкретикой и реальной пользой.

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


Fight! Раунд 2. Крутая визуальная концепция против шаблонной презентации бренда.
1. UI-дизайнеры, проанализировав результаты прошлого раунда, бросились генерить дизайн-решения. Мы не фанаты «пальцем в небо» – каждый элемент разработан по законам поведенческой психологии юзеров и апеллирует к данным.
2. Сформировали систему дизайна – для кого-то покажется муторным, но для нас это база. Всё на основе реальных данных, помните? При разработке документа учли тематику, цели разработки, характеристики основного сегмента ЦА. В итоге определили правила и принципы визуальной стратегии JAC Trucks, получили крепкую основу для создания не просто эстетичного, но и функционального дизайна, который будет управлять вниманием пользователей и проводить их по воронке продаж.
3. Провели UI-анализ топов рынка: цветовая палитра, стилеобразующие элементы, цветографика, анимация.
4. Часто к вам обращаются заказчики с четким пониманием того, что хотят видеть? Мы кайфанули от просмотра рефов и подготовили свои мудборды с аналогами визуальных решений для отстройки от топов рынка по стилю и концептуальной идее.
5. Нарисовали аж 3 абсолютно разных варианта концепций первого экрана – 3 возможных образа бренда на рынке. Команда JAC настолько вдохновилась нашим подходом, что предложила провести профессиональную фотосессию для техники – настоящий «удар под дых» шаблонному дизайну.
6. Команда JAC вдохновлялась нами – мы заряжались от них. Настоящая синергия как она есть! Нарисовали 12 стильных и юзер-френдли страниц, где UX упрощен до сути, за которой приходят пользователи. Ну и как же без адаптации: мы позаботились о том, чтобы десктоп и адаптив были не просто красивыми, но и юзабельными на всех устройствах и браузерах.
7. Приступили к переносу макета в онлайн по принципу Pixel Perfect: выполнили аккуратную кроссбраузерную валидную вёрстку с адаптацией структуры под CMS. И всё это без плагинов, регистрации и смс. Сайт JAC Trucks как суперкар среди конкурентов на рынке – разгоняется за 2 секунды. С оптимизацией мы и правда постарались: проверили скорость загрузки на всех возможных устройствах, оптимизировали скрипты и изображения.
8. Провели комплексное QA QC тестирование на разных устройствах и разрешениях экранов в браузерах последних версий. Прошли полный путь пользователя, проверяя техническую и визуальную составляющие сайта: принцип Pixel Perfect, анимации и функциональность всех элементов.

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


Fight! Раунд 3. Грамотный бэкенд и отшлифованный UX против бизнеса «по-старинке».
1. Если вы думали, что наш backend’ер подключился только к концу проекта, то вы ошибались. Этот герой с первых шагов супервайзерил разработку архитектуры и компонентов проекта. Таким образом, мы получили продукт, где конфигуратор, каталог с полным набором функций, корзина и админка с самого начала разрабатывались в полном синхроне.
2. После комплексного теста мы выполнили интеграцию блоков верстки с 1С-Битрикс, создали новую систему под конкретные задачи проекта и подключили функциональные модули: карты, каталог, поиск по сайту. Наполнили сайт тестовым контентом и выполнили базовое тестирование.
3. После повторного QA QC тестирования User Flow на всех устройствах и нагрузочного теста сайта приступили к настройке сервера заказчика. Перенесли сайт, установили и настроили SSL-сертификат.

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

Интересный факт: когда кто-то читает кейс и представляет идеальный последовательный процесс разработки, в мире грустит один PM. Think about it.


Final round – boss! Команда Ninen против стереотипов «китайский = дешевый» и «спецтехника = стремная махина в грязи».

На выходе получили полный «Finish him!» в виде переворота рынка спецтехники и запчастей! Уникальный продукт для своего сегмента по дизайну и функционалу.
Стильный и объемный «металлический» визуал, нешаблонное цветовое сочетание холодного серого фона с яркими цветовыми акцентами и умеренное негативное пространство – вот новый дорогой визуальный тренд для сайтов такой тематики.
Оттестированный User Flow, соответствующий законам и правилам UX, сложные функции, упрощенные до сути, сайт без багов, адаптированный под любое устройство и браузер – вот новые высокие стандарты к любому комплексному интернет-магазину спецтехники.

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


____________________________________________________
ENG

Business objective: set up an online store for specialized equipment and parts with a configurator from ideation to release for lead generation, brand presentation, and business automation.

In the left corner of the ring there are obstacles on the path to the top spot. Lack of leads, a cliché brand presentation, "old-school" business, and stereotypes like "Chinese = cheap," "specialized machinery = a grimy monster."

In the right corner of the ring there is the Ninen team.

Fight! Round 1. Real Data-Driven Strategy vs Lead Drought.
1. We kicked off with a client briefing, pulling a Larry King move, dissecting the company with 60 deep-diving questions about the product, business, and target audience. Diving into product research and SWOT analysis, we spoke the JAC team language, aligning our tactics.
2. Audience research was a field mission: hanging on forums, dozens of face-to-face interviews. Unveiling user segments, understanding their needs, objections, and fears, we nailed the tone of voice.
3. Hardcore market research without the hassle: we analyzed competitors' positioning, structure, offers, and site content in the heavy machinery sales sphere. Crafted a unique approach for JAC Trucks based on the data, laying the foundation for the future strategy.
4. Bringing in a UX wizard, we thought like users from every segment, mapping out all potential behaviors. Scrutinized each business process, analyzing user experience and all possible touchpoints. Result: a solid positioning model, decision criteria, and contact points.
5. Following Miller’s, Fitts’s, and Hick's laws, we crafted a website prototype grounded in strategy and pre-project analytics.
6. Finally, we added compelling texts to the prototype: devoid of advertising noise and clichés, focusing on specificity and real value.

Let's sum up the first round: well-thought-out prototypes of 12 website pages with a logical arrangement of blocks, elements, and persuasive texts. These are built based on real data, analytics, and KPI. Every symbol contributes to conversion, and every offer generates leads.

Fight! Round 2. A cool visual concept against a template brand presentation.
1. UI designers, analyzing the results of the previous round, rushed to generate design solutions. We are not fans of "shot in the dark" – each element is crafted according to the laws of user behavioral psychology and appeals to data.
2. We formed a design system – for some, it may seem tedious, but for us, it's the foundation. Everything is based on real data, remember? When developing the document, we considered the theme, development goals, and characteristics of the main target audience segment. Finally, we defined the rules and principles of the visual strategy for JAC Trucks, laying a strong foundation for creating not just an aesthetic but also a functional design that will guide users' attention and lead them through the sales funnel.
3. We conducted a UI analysis of market leaders: color palette, style-forming elements, color graphics, and animation.
4. Do clients often come to you with a clear understanding of what they want to see? We enjoyed looking at references and prepared our mood boards with visual solution analogs to distance ourselves from market leaders in style and conceptual ideas.
5. We drew a whopping 3 completely different concepts for the first screen aka 3 possible brand images in the market. The JAC team was so inspired by our approach that they suggested a professional photoshoot for their equipment – a real "breath of fresh air" to template design.
6. The JAC team was inspired by us – we gained energy from them. True synergy as it is! We drew 12 stylish and user-friendly pages, where UX is simplified to its essence and attracts users. And of course, we made sure that desktop and adaptive were not just beautiful but usable on all devices and browsers.
7. We started transferring the design to online according to the pixel-perfect principle: we performed a neat cross-browser valid layout with structure adaptation for CMS. And all this without plugins, registration, and SMS. The JAC Trucks website, like a supercar among competitors in the market, accelerates in 2 seconds. We really worked hard optimizing the site: checked the loading speed on all possible devices, optimized scripts, and images.
8. We conducted comprehensive QA/QC testing on different devices and screen resolutions in the latest browser versions. We went through the user's full path, checking the technical and visual components of the site: the pixel-perfect principle, animations, and the functionality of all elements.

Results of the second round: a non-template design for 12 website pages and all secondary elements (favicon, widgets, pop-ups, hidden blocks), carefully transferred online. The adaptive layout of pages is meticulously developed and tested, and the design is equally good and user-friendly on all devices. Programmers, get ready!


Fight! Round 3. Competent backend and polished UX against old-school business.
1. You were mistaken, if you thought our backend developer joined at the end of the project only. This hero supervised the development of the architecture and project components from the very beginning. As a result, we obtained a product where the configurator, catalog with a full set of features, shopping cart, and admin panel were developed in full sync from the start.
2. After comprehensive testing, we integrated layout blocks with 1C-Bitrix, created a new system tailored to the specific project tasks, and connected functional modules: maps, catalog, site search. We filled the site with test content and performed basic testing.
3. Following a repeat QA/QC test of User Flow on all devices and a load test of the site, we proceeded to configure the customer's server. We transferred the site, installed, and configured the SSL certificate.

Result of the third round: the business is fully automated. The configurator, catalog, and shopping cart work flawlessly, and no customer’s order is lost. And yes, we are not among those who "made it and handed it over." Ninen is ❤️. We helped the customer to cope with such a complex and dynamic product and provided clear instructions on managing the website. We even recorded a training video for the employees!

Interesting fact: when someone reads a case and envisions the perfect, sequential development process, one project manager in the world becomes sad. Think about it.

Final round – boss! Team Ninen takes on the stereotypes "Chinese = cheap" and "special equipment = a rough machine in the mud."

At the end, we delivered a full "Finish him!" in the form of a revolution in the market of special equipment and spare parts! A unique product for its segment in terms of design and functionality.
The stylish and bold "metallic" visual, unconventional color combination of a cold gray background with bright color accents, and moderate negative space – that's the new upscale visual trend for websites in this niche.
Tested User Flow, compliant with the laws and rules of UX, complex features streamlined to the core, a bug-free site, adapted for any device and browser – these are the new high standards for any comprehensive online store specializing in special equipment.

From now on, once and for all, Chinese = innovative and reliable, while special equipment = a stylish modern tool for solving the most challenging tasks.

Скриншоты