Plumbing for the 21st century.
This project was done while at Catch New York. Catch New York was John Guest's U.S. marketing agency prior to John Guest's acquisition. The team members who contributed to this project worked at Catch New York at the time of launch.
The art of plumbing doesn't garner enough credit from the masses. There are too many misconceptions about plumbers being messy, unprofessional, and too expensive. In short, plumbers get a bad rap. As with anything in life, making assumptions from a place of ignorance is dangerous, yet when it came to plumbing, the team shared those misconceptions. It was only until this project did the team genuinely appreciate and respect the plumbing profession.
This is the story about building a website for one of the largest plumbing part manufacturers in the world. This is also a story about the journey to gaining a new appreciation for the plumbing craft and realizing that plumbers and designers have more in common than the team would have ever thought.
A plumbing pioneer.
John Guest is the pioneer and world leader of the push-to-connect plumbing technology. A global household name used by Ferrari to the Fountains at Bellagio, John Guest products are put to use in some of the most extreme scenarios by the world's most recognizable brands. Yet, when it came to American plumbers, John Guest hit a roadblock. It was our job to help them get past that hurdle and launch a new plumbing line.
Business-critical.
The launch of the ProLock line in the United States was significant for John Guest. This was their first time working with an agency, the failure of their existing Speedfit line to capture the desired market share of professional American plumbers was significant. The new product line couldn't have the same shortcomings, and the first step to preventing that from happening was establishing trust.
Establishing trust.
James Guest, the grandson of the founder and Director of John Guest, flew out to NYC with Ted, the President of John Guest USA at the time, to kick-off the project. Our goals for this meeting were to understand the business that would help drive our strategy. As they explained the intricate details and stresses placed on their engineering and manufacturing, a newfound respect for the plumbing world emerged. Feeding off their passion, start the process.
From that moment on, client interaction happened weekly, with in-person meetings every two weeks to show the progress and results after each sprint.
Establishing transparency with the U.K. and U.S. John Guest teams made sure they kept them up to date on our progress and prevented us from going too far down an incorrect path too late into the process.
The plumber.
The team set a goal to make this website a category breakthrough, but at the end of the day, if it did not serve the need of our target market, the site failed. That was our top priority.
Our due diligence into plumbing started with researching the general push-to-connect market and their Speedfit line. To understand what plumbers care about in a brand and product, the team went back to focus groups conducted initially for branding purposes. Although focus groups have both advocates and critics, they did allow us to create initial hypotheses that became instrumental for future testing. After drawing insights from the focus groups, we shifted to studying Google Analytics, interviewing additional plumbers, supply store workers, the John Guest sales team, and the leadership team.
Artistry.
Plumbers take great pride in their work. The same way the final product weighs on a designer, the look of a finished job weighs on plumbers.
Peace of mind.
When leaving a job, plumbers don't want to get a phone call back saying the basement has flooded or the house burnt down. They are not only financially responsible, but their reputations are on the line. They need a product that they know won't let them nor their employees down.
Change.
Plumbers, like everyone, can be hesitant to change. The "new" category of push-to-connect products take the art away from soldering and sweating metal. There is a fear that this change may diminish the art and profession.
Tacility.
Word of mouth will only go so far. At the end of the day, plumbers want to hold the product in their hands and make their own judgments.
Temporary & DIY.
Professional plumbers view push-to-connect products as temporary fixes that won't hold up over time. It's also perceived to be for the DIYer, not an expert.
Aesthetic.
Speedfit products simply looked ugly and cheap.
Exposure.
Although a name known by U.S. plumbers, John Guest is a better-known brand name in Europe and other industries like water filtration.
Brand equity.
John Guest is not the first name that comes to mind for plumbing innovation and engineering.
Educational.
When on a job, plumbers want quick, educational information if/when they are in difficult situations. This typically means firing up Google and seeking out a quick diagram or how-to video.
Versatility.
Plumbers don't want to bring a fitting to a job that can't connect to the correct pipe type. ProLock fittings can connect Copper, CPVC, and PEX pipes. So, regardless of what pipe types are on-site, they know the fitting will fit the piping.
Speed.
A simpler/quicker solution isn't always better, regardless of whether it has the same security level.
Breaking down the information and prioritizing it for our content strategy and site architecture was critical for us and John Guest. It shed light on the path forward for us to tackle the psychological and functional benefits in an obvious and concise way while understanding the product and existing brand concerns.
Pen to paper.
The team started sketching out potential solutions once we had a solid understanding of our target market and the product. After several rounds of sketches and discovering the multiple challenges, the team came upon a solution that tackled these insights, highlighted the future of plumbing, and would be a quick resource for information when they're on the job.
Challenge 1.
The research uncovered that plumbers like to hold and feel products. So, the team brainstormed how to make a website tangible. The solution was to use a 3D model of a fitting using three.js and create a narrative around the 3D product. The developers had been looking at WebGL, and specifically three.js, for some time and thought that the technology had reached a point to utilize it for mainstream sites. This would allow the user to have 360° control of the fitting and break it apart to see its internal workings and technology.
Challenge 2.
The campaign for the ProLock launch started before a plumber could walk into a supply house and purchase a fitting. This made it difficult to have a strong call to action on the site for conversions. There were no store finder or e-commerce elements to the site, so how do you start a conversation with someone? John Guest is so confident that this product is the future of plumbing, that they were willing to give a fitting away absolutely free. A free sample page allowed us to get a product in the hands of a plumber, have a conversation starter, and have a clear metric to measure.
Fonzie, the lead designer, came up with an initial design system based on the wireframes, and Julianna and Justin, two of the developers, began working on the backend of the site. The team opted to build out a custom backend with Rails rather than using an OTC solution like WordPress.
Built for the future.
The site launched and set a new bar for plumbing websites. It solved the challenges John Guest faced, focused on plumbers' needs, and offered plumbers a first-hand experience into how the ProLock product range is built for professionals.
Key Decisions
Languages.
The initial target market for JGProLock.com was North America, but John Guest had intentions for an international rollout. Knowing this, the team created a multi-lingual website from the start. At launch, English, Spanish, and French (Canadian) were implemented but expected to be rolled out to Brazil, Germany, the U.K., and so on. The team built out the language editor in a way that was easy to use and didn't require a hard load when the language changed. Also, all text had been translated by a native speaker and not Google Translate to make sure it was localized for the respective market.
Search.
The team spent time thinking (at length) about how to make the search experience as error-proof as possible. While observing plumbers at the supply house, the team got a first-hand look at how plumbers order parts. They can go into a supply store and say, "I need a 1/2 inch C.P. tee." The search had to accommodate this industry-specific jargon, so keywords were used for each product and had our algorithm search by characters.
Products.
When the individual product page template was designed, the information architecture was wrong. The architecture placed greater importance on the descriptions of each fitting rather than the specs. The team learned about our mistake after testing, and hearing plumbers ask, "Where are the sizes for this fitting." This was a clear indication that the sizes needed to have higher priority on the page. But specific fittings had 11 sizes, while others only had one. The solution was to showcase the first four, and for those fittings that had five or more fittings, a "show more sizes" button that expanded was added to show the rest. The cutoff number was four because the majority of fittings had four or fewer sizes, and we've heard from plumbers that they would typically only use this product on smaller-sized pipes.
Reflections.
From day one, our goal was to not only Q.A. the site before launch but test it throughout the process. The team knew how critical it was to test within our target market, and that meant we couldn't just walk into a Starbucks and recruit test subjects. So, the team called on friends who were plumbers to remote test. They also visited local supply houses in Montclair, NJ, and set up shop for a morning to test our concepts. This proved to be invaluable. The amount learned from just that short testing period was monumental and allowed us to either continue with our hypotheses or create new ones.