This was a relatively simple website project, in terms of coding and development, but it’s a good example of a collaborative effort between a client and developer.
My client was James Peters, an artist in Florida who has invented and patented the ShowerPot. He describes it as “A functional piece of art that effortlessly and artfully rescues some of the water we waste.” The idea is that you put it under your shower tap while you’re waiting for the water to heat up, and instead of all that water going down the drain, you can save it and use it for other purposes, like gardening or washing dishes.
His goal now is not to sell it direct to consumers, but to pitch the idea to local governments. His vision is that ShowerPots could be sent to residents along with recycling bins, or something similar that would work for the city. The purpose of the website is to showcase the product and idea while giving these local government agencies some statistics and background information.
So the main goals for the website were:
To start with, I was basically only given:
Like I mentioned above, this wasn’t a complicated build because it didn’t involve a whole lot of custom coding. In a nutshell, the technical items I took care of were:
Since this client is not a technically-minded person, I wanted the website to be easy for him to update if he wanted to make some changes on his own. I also knew that I’d need create some different page layouts. I could create those with Advanced Custom Fields and custom page templates, but multipurpose themes like Divi provide a modular way to create and organize your content, which would be quicker and easier in this particular case. Divi seemed like overkill for a small website like this, so I figured I’d try Presence, which is a similar theme from WPZoom.
(After using both of those themes for website builds, I’d recommend Divi over Presence.)
Being an artist, this client wanted to be involved in the design of the website. But since he’s not a technical person, he needed guidance in understanding the standard structure of a website, how to deal with the give-and-take for responsive issues, and how to best organize content.
The logo he gave me had specific light-blue and green colors, so I created a color scheme based on those. We wanted the website to feel like it was related to water, but also be open and friendly. I helped organize all of the content and photos that he wanted to display into logical pages and sections. He basically just gave me a ton of photos, some specific content, and a general idea for what he wanted on each page, and I organized it all into something that made sense for the viewer.
This was a very collaborative process. I distilled everything into pages and layouts, and then we went over them together to make changes and improvements. We worked together over some long Skype sessions.
Below are screenshots of each page. You can click any of them to see a larger version.
The site’s homepage, which has a slideshow, call to action bar, links to the main pages on the site, and testimonials.
About ShowerPot, explaining the basics of what it is, what it’s for, and why it’s beneficial.
The ShowerPot Foundation also supports these important causes with versions of the product in those causes’ colors to raise awareness.
This page gives some information and statistics about global water usage and how important it is to conserve.
A standard contact page.
A standard frequently asked questions page.
More information about James Peters, the creator of ShowerPot.
This page is intended for local government, such as a city majors, who may want to start deploying ShowerPot in their region.
As you can see, it’s a simple website with a variety of page layouts. The website showcases the product in different settings, provides information about the purpose and benefits of it, and educates with statistics and other information about water usage and conservation. All of the pages are responsive and are intended to be engaging even while presenting a lot of information.
There isn’t anything really fancy here, and that wasn’t the intention. Like I mentioned above, it’s a good example of a collaborative project between myself and the client. To see some examples of more technical WordPress development work, check out my case studies for Surety1.com or JohnEnglander.net.