Case study AR Brochure-JCB
Client: JCB India
Timeline: 2021
Role: Product Designer (UI/UX) + Creative Producer (AR UX, motion, Unity UI support)
Platform: iOS / Android (Mobile + Tablet)
Overview
I designed an AR configurator that helped remote dealerships visualize 30PLUS excavator customizations in real space and without transporting the machine!
Challenge
JCB’s sales team needed to sell to remote dealerships across India. The 30PLUS mini excavator, which has multiple attachments and configurations.
Customers want to know:
Will this fit my site? Will this attachment work for my use-case? What will it look like in real life?
For JCB’s 30PLUS mini excavator, those questions usually meant one of two things:
-
transporting a machine for a demo (slow, expensive), or
-
relying on a brochure and imagination (unconvincing).
So we built a third option:
An AR brochure that turns a dealership visit into a real-world, walk-around demo. Instantly!
A 12-ton excavator. In your pocket. In your customer’s yard.
We defined “success” as measurable outcomes for sales velocity + dealer confidence:
-
Dealers can place a true-to-scale 3D excavator
in AR within 30 seconds -
Switching attachments feels effortless
-
UI remains usable outdoors + on low-end devices
-
Sales teams can run demos without technical assistance
When you’re selling heavy machinery, the hardest part isn’t listing features.
It’s helping someone feel sure.
They want to know:
Will this fit my site? Will this attachment work for my use-case? What will it look like in real life?
For JCB’s 30PLUS mini excavator, those questions usually meant one of two things:
-
transporting a machine for a demo (slow, expensive), or
-
relying on a brochure and imagination (unconvincing).
So we built a third option:
An AR brochure that turns a dealership visit into a real-world, walk-around demo — instantly.
We defined “success” as measurable outcomes for sales velocity + dealer confidence:
-
Dealers can place a true-to-scale 3D excavator
in AR within 30 seconds -
Switching attachments feels effortless
-
UI remains usable outdoors + on low-end devices
-
Sales teams can run demos without technical assistance
...the marketing team at JCB described 30PLUS as an ahead-of-time and compact excavation solution.
(One of the User Personas)
(App Flow- Draw.io)
The moment the problem became clear
In early conversations with the sales team, one thing repeated again and again:
“Customers get interested… but confidence drops when they can’t visualize the exact configuration.”
It wasn’t about making AR look cool.
It was about solving a sales reality: people don’t buy what they can’t picture.
The mission became simple:
help dealers place a true-to-scale excavator in front of a customer in under a minute — and switch configurations like they’re shopping, not engineering.
What we were designing for
This product wasn’t going to be used in a quiet office.
It would be used:
-
outdoors, under harsh sunlight
-
in loud dealership spaces
-
by sales staff who don’t have time for “AR learning curves”
-
on mixed devices with mixed performance
So the UX had to be:
fast, forgiving, and confidence-building.
My role
I owned the end-to-end UX and UI for the AR experience:
-
product flow and IA (scan → place → configure → capture/share)
-
AR onboarding and trust cues (scale, placement, stability)
-
UI kit aligned to JCB branding
-
microcopy and interactions designed for sales demos
-
motion + interaction behaviors communicated for Unity implementation
Team-wise, I worked closely with a PM, Unity developers, and 3D artists to balance real-time performance with visual fidelity.
What we were designing for
This product wasn’t going to be used in a quiet office.
It would be used:
-
outdoors, under harsh sunlight
-
in loud dealership spaces
-
by sales staff who don’t have time for “AR learning curves”
-
on mixed devices with mixed performance
So the UX had to be:
fast, forgiving, and confidence-building.
(App Flow- Draw.io)
(App Flow- Draw.io)
...regular feedback and collaboration with the JCB team helped refine the design system and ensure it aligned with their brand guidelines and aesthetic.
Visual Design-01
Once I had a solid wireframe and prototype, I started to focus on the visual design of the AR application.
My main focus was to create a futuristic visual design system that incorporates JCB's brand guidelines and aesthetics, which can be exciting and innovative.
05 Style Guide
Color Palette:
-
Incorporated bold, vibrant, and metallic colors that convey a sense of technological advancement.
-
Balanced futuristic colors with JCB's existing color palette to maintain brand recognition.
Typography:
-
A selected modern and sleek font that reflects a futuristic vibe while adhering to JCB's brand guidelines.
-
Experimented with unique type treatments, such as geometric or stylized letterforms, to enhance the futuristic aesthetic.
High-Fidelity Prototyping:
-
High-fidelity prototypes provided a more detailed and realistic representation of the final product.
-
They allowed for testing and refining the user interface, interactions, and visual elements.
-
High-fidelity prototypes facilitated a more accurate evaluation of the user experience and overall design effectiveness.
Visual Design-02
06 Final Assets
Imagery and Visual Elements:
-
Integrated futuristic imagery and graphics that resonate with JCB's industry and brand identity.
-
Incorporated elements like abstract shapes, futuristic patterns, or technology-related visuals to enhance the overall futuristic aesthetic.
-
Ensured that the imagery and visual elements complement JCB's brand guidelines and messaging.
Iconography:
-
Designed futuristic icons that align with JCB's brand values and represent key actions or concepts.
-
Utilized clean, minimalistic, and geometric shapes to create a sleek and futuristic icon set.
-
Ensure iconography remains consistent with JCB's existing visual language to maintain brand coherence.
UI Components and Layouts:
-
Designed UI components with a sleek and modern look, incorporating clean lines and minimalistic interfaces.
-
Experimented with innovative layouts, grid systems, and spacing techniques to create a futuristic and dynamic user experience.
-
Also ensured consistency in UI components and layouts across different digital products or platforms.
While aiming for a futuristic design, it was essential to strike a balance between innovation and maintaining JCB's brand identity. The design system should effectively represent JCB's values while projecting a forward-thinking and cutting-edge visual aesthetic.
(Particle effects and UI animation-Unity 3D)
(Custom UI Icons)
...iterative testing process ensured that the final design met their requirements and delivered a positive user experience.
(UI Components & layout-3D mode)
(UI Components & layout)
Testing and Iteration
Conducting live demo sessions with trusted JCB dealerships to test the final design was a crucial step in validating its usability and meeting user needs.
07 User Testing
User Feedback:
By involving trusted JCB dealerships, we gathered valuable feedback from real users. Their feedback helped us identify any usability issues or areas for improvement.
Real-World Testing:
Live demo sessions helped us uncover any usability challenges or areas where the design might fall short in meeting their specific needs.
Iterative Design:
The feedback gathered during the live demo sessions was used to iterate and refine the design further. This iterative approach helped us address any identified issues and make necessary adjustments to improve the overall user experience.
By conducting live demo sessions with trusted JCB dealerships, we followed a user-centered design approach that prioritizes the needs and expectations of the end users. This iterative testing process ensured that the final design met their requirements and delivered a positive user experience.
"The AR brochure experience exceeded expectations, exciting both dealers and customers. It was engaging, visually appealing, and represented the modern and futuristic aspects of our product. The interactive features allowed customization and made the process enjoyable. The innovation showcased our commitment to staying ahead. It enhanced understanding, drove informed decisions, and positively impacted our brand perception."
- JCB TEAM
Conclusion
By following these steps, we could create an AR brochure that empowers JCB dealerships to showcase customization options effectively, allowing customers to visualize different configurations and make informed purchasing decisions. The intuitive and user-friendly nature of the AR brochure enhances the overall sales process, providing a modern and immersive experience for both dealership staff and customers.
