Design and build an ecommerce website in 3 weeks
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
Lottie
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
Target customers
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
Educate and spark interest first, then sell
We wanted all of the links in the primary navigation to hint at the fact that this product is different.
Wireframing the site as a group
Our entire team set up shop in our conference room and worked out wireframes together. This allowed us to make sure the website was aligned with the marketing strategy and gave our developer a head start on the structure of the site.
For the page skimmers
This brand new product requires a lot of educating, but we needed eye-catching headlines to draw users in first. The subhead provided more context, allowing them to get the “CliffsNotes” version without needing to read the full paragraph.
Dive Pool wanted to stand out and appeal to the tech crowd
Their team spent a lot of time and money creating a more eye-catching product and really wanted to showcase it. Our creative director and I decided to focus heavily on the product and app with no “fluff”.
Our agency had already rebranded Dive Pool and created social ads, so I worked with their style guides to ensure consistency.
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.
The founder was there to answer questions and build trust
Based on how user’s were using the site, we set up contextual auto-prompts that allowed the founder to be more hands-on in offering sales and helping to convert skeptics into Dive Pool owners.
Ease of use
Visual installation animations
I wanted to make this installation process feel as simple and approachable as possible. I decided to create Ikea-esque animations in After Effects. They were exported as Lottie files so they would be extremely lightweight on the site - 15kb each!
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.