Home-Contact

Pascoes Plumbing

Tasks: Brand Presence Website + CMS

Tools: Adobe XD, inVision, Gatsby, React, Prismic



This project was for a local plumbing company starting up right here in Hamilton. Unfortunately the owner has decided to shut down shop with issues arriving around covid, however I went ahead and completed the website for my own learning. The full site is live at https://pascoes.danielballoch.com/ and complete with CMS Integration, meaning site content such as contact information or any other site copy can be easily updated without a developer or any stress.

Challenge: Create a trustworthy online presence for Pascoe’s Plumbing & Gas, where prospective clients can view a short video introduction, see services available, view past work, get an idea of the company, see contact details or request a quote.

Solution: 3-4 cycles of reseach/prototype, proposal and feedback to hone in on what Pascoes Plumbing is about, site requirments, brand details and a fitting design we were both happy with.

The whole process was documented in google docs so I could learn from the experience and easily gather feedback, we ended with pages: Home, About, Services, Contact/Quote and Features: contact details, quote form, work coverage area etc. Designs were proposed and iterated along the way through docs and inVision.

view the site prototype: here - invision link or see the process in detail below

Discovery

This was a good chance for me to test out my plans & processes in terms of gathering requirments, presenting my ideas, gather feedback and getting on the same page as my client.

One challenge here was when the customer wanted a full-screen video to autoplay on arrival at the homepage - while technically I could do this I advised against it due to a number of reasons from UX case studies I've seen, theme, attention and content creation concerns. Thankfully this was taken well!

I did a lot of research to gather a good idea of the business & compitition so I could make suggestions and have minimal thinking and alterations on the part of my client.

Design

The full site was prototyped and designed on Adobe XD. Starting with a simple aim, site story, features and hierarchy, then boxes/text and all the way to a fully specified design with fonts, colors, images, layout etc all defined & designed - once again gathering feedback and input along the way.

Devlopment

In the development stage I opted to use Gatsby which is one of the better static site generators out there and based on the react ecosystem. I've been a big proponent of Gatsby since I first started looking into static site generators and the philosophy around JAMstack a few years ago. With it's fast speeds, documentation and open source plugin library it fit well. I also researched and trailed a few headless Content Mangament Systems (CMS) options to make content changes easier, eventually landing on prismic.io

With prismic set up little changes such as headings, body copy, images, contact details etc can be updated in minutes - want to change your contact phone number? have a new team photo? now service a larger area? these can be quickly and easily updated without having to reach out to me or another developer to delve into code.. Which means you don't keep customers waiting and save money in the process.

The stand-out-feature that made me pick prismic was 'slices'. Slices enable me to give you more options with what you can edit and create then a typical CMS.

Want to write a blog post about a recent project? add a new employee to your about page? a recent client testimonial to the home page ? That can all be done easily through the CMS.

For that new testimonial simple open up prismic, go to the about document, scroll down to the testimonials section, click 'Add a new element in testimonials', fill out the form and hit publish then your done. Breathtaking review added to the site in minutes.

And it get's even better, with slices I can create custom designs which you can then select and layout however you like to create a new page or page section. So with that blog post select create new, click the 'blog post' type, fill out the basic information needed and then start adding in and filling out slices (text sections, images, quotes, image gallerys etc) from the predefined slices section in whatever order you please.

Now you've got a full blown post (from components which were professionally designed and fit together) showing some of the quality work you've done to share with your customers and get them excited about their own future project!

This was a awesome experience where I got to do my first full project with a client and learnt a lot. If you have any questions, feedback, critique or would like to work with me I'd love to hear from you! Contact information and social media below.

Back to the homepage

Contact: daniel@thoughtfulhq.com

LinkedIn-Dribble-Instagram-Github