Lucid Agency has called Tempe home for 10 years, and many of our employees are lifetime Phoenix residents. So naturally, we were thrilled to get the opportunity to work with Pebble Tec International®. If you’ve grown up around pools like we have, then you’ve grown up around Pebble Tec. Pebble Tec is the undisputed leader in luxury pool finishes and manufactures materials for some of the World’s Greatest Pools.
Pebble Tec is a well-known brand esteemed for its first-class product, but its former website was in need of a lift. The colors didn’t feel right and we wanted to leverage the brand’s stunning imagery. In 2015, Pebble Tec also embarked on a new product roll-out, which included an update to the product line branding in all printed collateral. We wanted to make them a website that was easy to maintain and could keep up with the rapid changes. So Lucid Agency set out to re-imagine a new website that would:
In the discovery phase, the Lucid team focused on improving the site’s value for site visitors. We identified that consumers were most interested in product-specific information. Consumers usually visited the Pebble Tec site to decide which pool finish and color would be the best fit for them. Therefore, the website should serve as a sales tool for consumers at the top of their decision-making funnel. After our discovery research, we felt confident that the individual product pages would be the “heart” of a successful website rebuild, so this is where we would focus our plan of attack.
Starting with the product pages and expanding from there, we wireframed each page. We knew the new product pages needed to provide real value to users, but with an average of 15 color swatches per product, we also knew there was limited on-page real estate to work with. The solution? A lightbox complete with gallery, depth chart, and brochure downloads for each color swatch. By using a lightbox with a gallery slideshow, we could showcase an infinite number of images per product without negatively affecting pageload or user experience. See the transformation from wireframe to prototype by dragging the arrow on the image below:
Wireframes allow us to visually create a site from the ground up, creating the most intuitive and user-friendly result possible. The top is what the wireframe looks like before becoming a prototype like the one on the bottom. (Drag the slider up and down to compare the images!)
Pebble Tec was excited by the possibility of giving site visitors in-depth and useful information about each product. However, they were anxious about handling content updates. They wanted us to create something that would be easy for them to update as new products became available. To this end, Lucid Agency built the entire website on the WordPress content management system. With scalable template-based development, our client can edit existing pages and “spin up” new pages with ease. Our lead developer also coded a custom “products” plugin with easy-to-edit custom fields, specific to Pebble Tec products. Custom categorizations by water color and finish ensure that the site will stay neat and organized as the site (and product line) evolves.
The custom-developed plugin to handle products on the Pebble Tec site. It is easy to add images, descriptions, and brochures for each color swatch.
Every website presents a unique learning opportunity. From the beginning, the Pebble Tec team knew that they wanted to provide some an interactive tool that would help consumers narrow their choices to find the best product match. We envisioned that it would probably be similar to a “build-your-car” tool, common on auto-manufacturer websites. In the discovery phase, we realized that contrary to our initial perception, consumers do not shop for pool finishes based on the texture or look of the pool finish itself, or even based on the color of the finish. Instead, consumers shop based on the desired color of the water in their pool. This discovery informed the basis of the user interaction. We would need to move the user through a wizard that began with “desired water color,” and then further narrowed choices from there. At Lucid Agency we understand the importance of user discovery. We make sure that our design decisions are based on a solid foundation of user testing so that we can feel confident that our recommendations will actually work for the end user. Often, an hour of research up front can save days of re-work down the line.
To execute the Water Color Selection Tool, Lucid Agency worked with one of Pebble Tec’s partners, Structure Studios. Structure Studios creates stunning 3D pool design software (think “The Sims” for pools and backyards). We know that projects turn out best when everyone’s talents are used to create maximum efficiency. We would never be able to create 3D visuals as robust and realistic as the Structure Studios team. Instead, Lucid Agency focused on designing the database structure according to the project requirements, and created another back-end plugin to allow for easy future updates. By combining our sleek back-end code with Structure Studios gorgeous visual output, we were able to deliver a stunning and useful tool at a fraction of the cost either vendor would have charged to complete the project individually, and to a much more scalable, useful, and beautiful end. At Lucid Agency, we work as a part of your team. We understand what we can contribute and where we fit in best.
The finished Water Color Tool is a marriage between our skills and Structure Studios’ efforts. Check it out for yourself at pebbletec.com.