As Clorox prepared to launch Clorox Pure Spray, they partnered with Walmart to create a custom branded landing page with two primary goals: drive awareness of the new product and educate customers on the technology behind it.
Part 1
Design Process
Part 1a - Process
Wireframe
The design process began with wireframes, where we explored creative ways to move beyond traditional static modules and transform them into interactive experiences aligned with our core goals.
Part 1b - Process
Final Design
The visual direction aligned with their national campaign to ensure brand consistency. We kept both visuals and copy clear and straightforward to make the message easy to grasp. In collaboration with the development and sales teams, we introduced interactive experiences, several of which were first-of-their-kind builds on Walmart’s online platform. The experience was fully responsive across desktop, tablet, and mobile.
Part 2
Page Highlights
Part 2a - Intro
Motion / Banner
To create immediate impact, we designed a subtle looping animation of the spray dispersing as allergens floated in the background. Slim banner was placed above the fold to quickly communicate the product’s core benefits.
Part 2b - Interactive Module
Before/After
This before/after interactive module was designed to educate users on the product’s visible impact, while also explaining the science behind how it works.
Part 2c - Interactive Module
Spray Game
We gamified the learning experience by building an interactive module that allowed users to choose a spray type and neutralize allergens themselves.
Part 2d - Interactive Module
Google Map Integration
We built an interactive module that visualized allergen density across the U.S. Using the Google Maps API, we customized the experience to align seamlessly with the brand’s visual identity.
© 2025 Isaac Hong
As Clorox prepared to launch Clorox Pure Spray, they partnered with Walmart to create a custom branded landing page with two primary goals: drive awareness of the new product and educate customers on the technology behind it.
Part 1
Design Process
Part 1a - Process
Wireframe
The design process began with wireframes, where we explored creative ways to move beyond traditional static modules and transform them into interactive experiences aligned with our core goals.
Part 1b - Process
Final Design
The visual direction aligned with their national campaign to ensure brand consistency. We kept both visuals and copy clear and straightforward to make the message easy to grasp. In collaboration with the development and sales teams, we introduced interactive experiences, several of which were first-of-their-kind builds on Walmart’s online platform. The experience was fully responsive across desktop, tablet, and mobile.
Part 2
Page Highlights
Part 2a - Intro
Motion/Banner
To create immediate impact, we designed a subtle looping animation of the spray dispersing as allergens floated in the background. Slim banner was placed above the fold to quickly communicate the product’s core benefits.
Part 2b - Interactive Module
Before/After
This before/after interactive module was designed to educate users on the product’s visible impact, while also explaining the science behind how it works.
Part 2c - Interactive Module
Spray Game
We gamified the learning experience by building an interactive module that allowed users to choose a spray type and neutralize allergens themselves.
Part 2d- Interactive Module
Google Map Integration
We built an interactive module that visualized allergen density across the U.S. Using the Google Maps API, we customized the experience to align seamlessly with the brand’s visual identity.
© 2025 Isaac Hong
As Clorox prepared to launch Clorox Pure Spray, they partnered with Walmart to create a custom branded landing page with two primary goals: drive awareness of the new product and educate customers on the technology behind it.
Part 1
Design Process
Part 1a
Wireframe
The design process began with wireframes, where we explored creative ways to move beyond traditional static modules and transform them into interactive experiences aligned with our core goals.
Part 1b
Final Design
The visual direction aligned with their national campaign to ensure brand consistency. We kept both visuals and copy clear and straightforward to make the message easy to grasp. In collaboration with the development and sales teams, we introduced interactive experiences, several of which were first-of-their-kind builds on Walmart’s online platform. The experience was fully responsive across desktop, tablet, and mobile.
Part 2
Page Highlights
Part 2a - Intro
Motion/Banner
To create immediate impact, we designed a subtle looping animation of the spray dispersing as allergens floated in the background. Slim banner was placed above the fold to quickly communicate the product’s core benefits.
Part 2b - Interactive Module
Before/After
This before/after interactive module was designed to educate users on the product’s visible impact, while also explaining the science behind how it works.
Part 2c - Interactive Module
Spray Game
We gamified the learning experience by building an interactive module that allowed users to choose a spray type and neutralize allergens themselves.
Part 2d - Interactive Module
Google Map Integration
We built an interactive module that visualized allergen density across the U.S. Using the Google Maps API, we customized the experience to align seamlessly with the brand’s visual identity.
© 2025 Isaac Hong