Dive Pool Systems
Ecommerce website design
Overview
Dive Pool Systems is a start-up that is looking to revolutionize the way that pools are maintained. They’ve created a self-powered device that easily converts your pool from chlorine to saltwater, and even allows you to adjust levels from anywhere using their custom app.
Our team was tasked with designing and building a website that will educate users on this brand new technology, show the many benefits, and ultimately provide a positive business to consumer experience.
I worked very closely with our marketing and copywriting teams throughout this process.
Tools
Sketch
Photoshop
FlowMapp
InVision
After Effects
Bodymovin (Export Animation as SVG)
The challenge
There’s plenty of other salt chlorinators on the market, but this is the first one that is self-powered, manageable from anywhere through an app, and this easy to install. Pool owners traditionally are used to systems that are much more complex to install and maintain. With the combination of this new technology and its higher price point, they want to do their research to make sure it really lives up to expectations.
Our team was tasked with designing and building a website that will educate users on this brand new technology, show the many benefits, and ultimately provide a positive business to consumer experience.
I worked very closely with our marketing and copywriting teams throughout this process.
Pain points this system solves
Easy for anyone to install without the help of an electrician
It tests the levels of the water automatically
Chlorine levels are adjustable from anywhere through an app
It powers itself, helping to lower your electric bill
What do we know about our audience?
They are already generally aware of the benefits of saltwater pools, and are looking to convert
They are likely price-shopping different devices based on they keywords that they are searching
The price may scare them away
They are generally DIYers looking to convert the pool on their own, rather than hiring a pool company
Wireframing
I worked directly with our copywriter in the wireframe phase to include sample headlines and CTA’s. Approaching the project this way allowed us to have a more in-depth content discussion when presenting to the Dive team. We were still fairly new to the product and trying our best to learn what was most important to their prospective customers and this helped us to productively lead the conversation about content.
Wireframing
I worked directly with our copywriter in the wireframe phase to include sample headlines and CTA’s. Approaching the project this way allowed us to have a more in-depth content discussion when presenting to the Dive team. We were still fairly new to the product and trying our best to learn what was most important to their prospective customers and this helped us to productively lead the conversation about content.
Design Concept
Focusing on the Tech
After selling directly to customers and fielding hundreds of questions, the Dive team was finding that most people who were making purchases seemed to be “techies” and were very interested in the app side of things.
For this reason, our creative director and I decided to take a drastically different approach to the look of this website compared to their competition – Visually focus on the product and the copy, rather than hero images of pools. This product was meant to disrupt the pool market, so it needed to stand out. Luckily, it also looks much more appealing than the competition as well.
Using the FAQ to help sell
Since we anticipated users having plenty of questions about this device, we put more emphasis on this page and used a more visual format than the traditional toggle format. By doing this, it not only answers some of the most anticipated questions, but also reinforces the many benefits of this salt chlorinating system.
Getting answers quickly using live chat
Filling out a contact form and making users wait to get answers was not enough. Being able to field questions directly on the spot and keeping their attention was crucially important in making sales. We assisted in setting up a live chat feature that was first answered by the founder to help build trust, but delegated to some of the engineering team to answer any of the more in-depth technical questions. This feature directly helped in many of their online sales.
Visual installation animations
Although the team created a quick install guide video, we also wanted to visually represent each step of the process. I created some simple animations using After Effects to show the process, and make it seem simple and accessible. They were exported as json and added to the site using Lottie so they would be much more lightweight than a video or GIF.
Reflection
I would have loved the opportunity to do a little more research and testing with this site. I think that our team did a fantastic job, especially on such a tight timeline, but if we were able to look a little closer at the screen recordings of the dropoffs or put out quick hotjar surveys to gain some feedback, it could have only gotten better. I would have also liked the opportunity to A/B test different price points with incentives like free shipping, discount codes, etc.
This was my first experience exporting animations from After Effects into json files. There was definitely some trial and error, but I will definitely be implementing this into future projects. Having animation files at are only 15kb is incredible.
devin.jeffery@gmail.com