Rachel Felber
James Hardie - Trade Show AR Experience
James Hardie is a global building materials company with a wide selection of exterior home siding, paneling and trims.
Subvrsive was tasked with creating an interactive experience located within one of the four physical model homes in their booth at the International Builders Show. Several rounds of technically feasible concepts were narrowed down until before deciding on the final design. Users could scan a QR code image target on a pedestal located within the trade show room with their phone. This activated a webAR experience where they could virtually customize the exterior of a 3D home.
Produced in partnership with Set Creative for James Hardie. Utilizing 8th Wall as the webAR platform.
Room Layout (Above): I designed a grid system on the room layout to ensure there was adequate space for movement and a wheelchair accessible area.
Room Flow (Above): Next, I created a map of the user flow on top of the room layout to help ensure a good experience as attendees walked through the experience.
Traditional Home Model within the Booth: A pre-planned layout of the booth design with four home models at the International Builders show.
Interactive Demo Space within the Traditional Home Model: A room within the traditional home model was reserved for an interactive demo.
Concept A
Your James Hardie is Art
Concept A is a gallery-like art exhibition that displays photography of finished James Hardie homes. Attendees use their phone to scan the QR code next to each photo to see a video of the before and after home transformation.
Concept D
Exterior Design Adventure 2
Concept D is an AR experience that activates off of a physical home model embedded into the wall. Attendees will scan the QR code above the model to activate the experience. They will then be able to virtually customize the exterior and see it apply to the physical models.
Concept C
Exterior Design Adventure 1
Concept C is an AR experience that activates off of the physical paneling and siding within the showroom. Attendees will scan the QR code located on the walls with their phone to virtually sample the exterior color and material options.
Concept B
Portal of Possibilities
Concept B is an AR experience that launches a virtual portal with a James Hardie home. Attendees scan a QR code to launch the portal on their phone. By stepping forward "into" the portal, they can walk around the home and virtually customize the exterior.
The attendee arrives at the “Your James Hardie Home is Art” installation. The room is filled with freestanding walls with framed photography displayed on each wall.
Each frame will contain a photo of a remodeled James Hardie Home. A plaque with material and color information will be located next to the photo, along with a QR code for various Web AR activations.
The attendee will scan the QR code next to the photo with their mobile device to see the the different AR activations. For example, one code may bring up an AR view of a house remodel coming together in 3D. Another will activate a video with a test burn to showcase fire resistant James Hardie materials.
The attendee arrives at the “Portal of Possibilities” room. Upon entering, they will see a triangular pedestal with welcome messaging, directions and a QR code to scan.
The attendee will read through the directions on the pedestal and scan the QR code with their mobile device to launch the “Portal of Possibilities” Web AR experience.
Upon launch, the attendee will see directions to step forward and position themselves by the circular floor decal in the center of the room before placing their portal.
After the attendee positions themselves by the circular floor decal, they will tap their device to place their portal in that location. Once the portal has been activated, they will see a 3D model of a James Hardie home appear within.
The attendee will then step forward to “enter” the virtual portal on their device.
After entering the virtual portal, the attendee will be able to walk up to and around the virtual 3D model home and view the James Harding siding up close on each side of the house. The attendees will also be able to virtually test out different siding materials and color options, as well as save screenshots to their device of the 3D home with their choices for later reference.
The attendee will enter the room and see a freestanding podium with welcoming messaging, a large QR code and instructions on how to start the immersive experience.
They will read through the instructions then scan the QR code on the banner with their device.
Two of the walls within the room will be outfitted with physical paneling and trim, resembling the exterior of a James Hardie Home. There will be 2 image targets placed on the windows and 3 placed along on the longest wall. Each wall will contain its own unique webAR experience. A line of tape will be placed on the floor several feet in front of the image targets.
The attendee will stand behind the taped line, scan the image target with their device and read through the instructions.
Once the image target is scanned, the attendee will see the the option to change the paneling, color and trim of the wall on their device. After a selection is made, it will appear virtually on their device as an opaque overlay over the existing section of the wall they are viewing. There will also be a label with the product selection names listed.
The attendee will then be able to take a screenshot to save an image of their selected choices. They can keep it for inspiration, share with friends, social media or bring it with them when they speak to a James Hardie representative!
The physical models will extend out from the wall slightly, showing only the front facade of the house, including varying, but limited depth. Also extending from the wall slightly will be a large image target placed directly above the model home. The attendee will then stand behind the taped line and scan the image target with their device. Once the image target is scanned, they will follow the instructions onscreen and hold their device in landscape mode to activate the experience.
The attendee will then see options to change the paneling, color and trim of the home on their device. After a selection is made, it will appear virtually as an opaque overlay over the physical model’s facade.
Note: The image target must always remain within the phone view for the model to “latch on” in the correct positioning.
The attendee will then be able to take a screenshot and save the image of their selected choices. They can keep it for inspiration, share with friends, social media or bring it with them when they speak to a James Hardie representative!
The attendee will enter the room and see a freestanding podium with welcoming messaging, a large QR code and instructions on how to start the immersive experience.
They will read through the instructions then scan the QR code on the banner with their device.
Along the longest wall will be three physical models of different architectural home styles embedded into the wall, resembling those found in the trade show booth. For example traditional, contemporary, and modern. A line of tape will be placed several feet in front of the models.
Concept E
Design Your 3D Dream Home
Concept E was approved for the final booth build. Attendees will scan a QR code on one of of several podiums located within the showroom with their phone in order to activate the AR experience. Once they have chosen a 3D home, it will appear virtually on the podium where they will be able to customize the exterior.
Once the attendee scans the image target they will see the option to pick from 3 types of architectural home styles before customizing a 3D model of that home.
Once a home style is selected, the user will see options to change the paneling, color and trim on the virtual 3D home. After a selection is made, it will appear on the 3D model. The attendee will also be able to rotate the virtual model using the onscreen rotate tool to see the selection appear on all sides.
The attendee will then be able to save an image of their experience with the material and color names listed. They can keep it for inspiration, or share with others.
The attendee will enter the room and see a freestanding podium with welcoming messaging, a large QR code and instructions on how to start the immersive experience.
They will read through the instructions then scan the QR code on the banner with their device.
Within the room, the attendee will see several square podiums with image targets located on top. They will then scan the image target on the podium with their device to enter the web AR experience.
Open the native camera app and scan the QR code with your phone.
Tap 'Allow' the the web app to access your phone camera.
A loading icon will appear.
Tap 'Get Started' to begin the onboarding section.
Tap 'Next' after reading the first onboarding instructions.
Tap 'Next' after reading the second onboarding instructions.
Next, line up the logo overlay with the logo on top of the pedestal.
The AR experience will launch. Tap 'Next' after reading to continue.
Tap 'Start Designing' to continue.
Tap through arrows to cycle through the different home styles.
Tap ' Select This Home' to choose a 3D home to start designing.
The 3D home will appear on the pedestal. The menu allows you yo change siding, paneling and trim.
Sign up to the James Hardie newsletter or ask to be contacted by a James Hardie representative.
Tap 'Save Image' in the top right corner to save your 3D home to your camera roll.
Select one of the siding paneling or trim options and apply it to the 3D home.
Your James Hardie is Art - Storyboarding
Portal of Possibilities - Storyboarding
Exterior Design Adventure 1 - Storyboarding
Exterior Design Adventure 2 - Storyboarding
Design Your 3D Dream Home - Storyboarding
Design Your 3D Dream Home - Room Layout and Flow
Design Your 3D Dream Home - Wireframes
Design Your 3D Dream Home - Interface Design
Design Your 3D Dream Home - Final Booth Experience
Role
UX Lead
Event
International Builder's Show
Tools
Figma, Miro
Research
Interactive Experience Booth Location
The following images show the large, pre-planned James Hardie booth, and the reserved space for the interactive experience.
Retrospective
In Conclusion...
-
It was a learning experience to collaborate with the booth designers on Set Creative on the technical specifications and limitations of the booth.
-
There were a lot of revisions to ensure that the QR code was the most readable and functional.
-
Understanding the capabilities of the webAR 8th wall platform required a lot of internal collaboration between our engineering and creative teams.
This was a really great opportunity to learn more about the webAR platform 8th wall and a challenge to make each concept not only creatively unique, but technically feasible.
© 2023 by Rachel Felber
Email: felber.rachel@gmail.com