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 Used

  • Sketch
  • Photoshop
  • FlowMapp
  • InVision
  • After Effects
  • Bodymovin (Export Animation as SVG)

The Challenge

An Innovative New Product That Needs to Prove Itself

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

Information Architecture

We knew that the price point could potentially scare some people away if they didn’t fully understand the product and its benefits. This meant that we needed to focus on educating first, and then selling. These users have likely done their research, seen their competitors, and knew the price ranges. Because of this, we made a conscious effort to only display the price towards the bottom of the pages and in the product slide-out sidebar.

Simple Navigation

We took the main topics that we believed would answer user’s questions and catch their attention and we put them right into the navigation. Rather than giving users a history of the company, we knew the website needed to have 0 fluff and be as easy to navigate as possible.

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.

Grabbing the User’s Attention With Sub-headers

Each headline is paired with a supporting sub-head for the page skimmers. We had a lot of educating to do, but we couldn’t assume everybody would read every word. Using this approach allows people to see the main points we are trying to make even if they just glance quickly at each section.

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.

Use 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.

Some More Projects

Vitality

Southtowns Dental

The Giving Project