This is a website built for the owner of a growing cleaning business based in Buckinghamshire with operations extending to Berkshire, Hertfordshire and Bedfordshire.
- UX
- Existing Features
- Future Features
- Technology Used
- Testing
- Bugs
- Deployment
- Credits
- Content
- Acknowledgements
During the project ideation stage, I restricted my point of reference to close friends and family as I was keen to build a website which would fulfill a real need for someone close to me. Discussions left me with three viable options - redesign my church website, design and develop a dedicated website for publishing stories, or design and develop a dedicated website for a cleaning business, The Cleaning Hack.
All three options were considered in relation to existing technologies and potential alternatives. I chose the option to create a dedicated website for The Cleaning Hack. I decided this choice would be most advantageous overall as it would enhance the business owner's ability to market their services and broaden their reach, utimately contributing to their growth and success.
As a user I want to be able to find a reliable cleaner in my area to clean my house.
As a user I want to be able to contact the user via email or phone.
As a user I want to be able to request a quote online.
As a user I want to be able to book an appointment online.
As a user I want to be able to see the price before booking an appointment.
As a user I want to be able to see evidence of previous work.
As a user I want to be able to read or hear from other people that have used this company's services.
As a user I want to be able to see the business's operational hours.
As a user I want to be able to view social media accounts.
As the site owner, I want to showcase the value we provide and the quality of work we deliver to our clients.
As the site owner, I want to build trust and showcase our professionalism and reliability.
As the site owner, I want to generate leads and provide an easy way for prospects to book in and / or request quotes.
As the site owner I want to use this website to attract more prospects from in and around Buckinghamshire.
As the site owner, I want to attract potential talent to work for us.
As the site owner I want the user to see my business opening hours.
The website should have a navigation menu that is consistent across all pages and devices.
The website should have clear messaging to users explaining who we are and what we do.
The website should provide a succinct list of services we provide to the user.
The website should build trust with the user through evidence provided in the form of testimonials and photos of cleaning jobs completed.
The website should provide the user with a way to contact the business for quotes or consultations through a form.
The website should provide the user with details of areas we operate in.
Based on the information to be provided to the user, the website should include a minimum of six pages consisting of: Home, About, Services, Gallery, Testimonials and Contact.
Navigation with links to relevant pages.
Hero welcome message with call to action to take user to a booking page or a contact form.
Services page outlining types of work carried out and target audience.
Gallery page showcasing some jobs carried out.
Testimonials page showcasing reviews from existing clients.
Footer section with links to social media pages.
The about page should have the company logo, values, vision and mission statement.
The about page should explain any relevant information about the company in text format.
The services page should detail the different services provided by the company and what types of clients we service.
The gallery page should consist before and after photos in an organised and responsive format.
The testimonials page should reveal client satisfaction stories in an organised and responsive format.
The contact page should have a contact form for the user to get in touch or request quote.
The form should collect contact details for the user so that the company can follow-up with them.
The contact form should include input options for name, email and message, with yes or no selection for pets and parking restrictions.
The contact form should give user feedback on submission.
The contact form should give the user the option to clear the form if any details are incorrect.
The features and flow of this website are intended to showcase a minimalist design with a focus on accessible information regarding The Cleaning Hack's offerings and a format which is effective on all devices.
As the project took shape, the initial design as shown in the wireframes was adjusted and re-adjusted to prioritise key requirements for a functional project, and for delivery within the allocated time frame.
As the website was for an existing business I decided to stick with the existing colour scheme; different hues of blue.
The fonts chosen for this project were:
- Fira Sans Condensed
- San-serif
I wanted to match existing styles as much as possible, and prioritise accessibility needs without distractions.
-
This project includes a fully responsive navigation bar on all pages and consists of links to various pages all listed on the right side of the Company name.
-
On smaller devices, the navigation bar is a burger icon, providing easy transition between various pages without the need of the 'back' browser button.
-
The landing page includes a hero image with the Company slogan and two call to action buttons, 'Book Now' and 'Contact Us'.
-
The 'Book Now' button is a convenient way for existing clients to schedule / reschedule cleaning visits with The Cleaning Hack or amend an existing booking.
-
The 'Contact Us' button is especially useful for users who are less interested in perusing the contents of each page and just need a quote or have questions.
-
The 'About' page section includes the Company Values, Mission and Vision.
-
The page seeks to give prospects some insight into the business, and is an expression of The Cleaning Hack's passion for cleaning.
-
The 'Services Page' includes a list of cleaning services offered and areas covered. It also includes a cleaning guarantee so prospects feel secure when booking with the Company.
-
The 'Get Quote' button is a convenient way for prospects to obtain a cleaning estimate without the need to explore other sections of the website, if they do not wish to do so. This button directs prospects to the 'Contact' page.
-
The gallery page showcases previous jobs completed by the Company.
-
It contains carefully selected photos of difficult-to-clean areas and large appliances, highlighting the Company's technical expertise.
- The testimonials section includes real client reviews for jobs ranging from recurring domestic cleans to commercial cleans.
-
The contact section includes a form requesting prospects to provide their Full Name, Email Address and to select a County from the drop-down. Prospects are also asked to indicate using 'Yes' or 'No' if they have pets and, if there are any parking restrictions on their road.
-
There is a message box that encourages prospects to provide a brief description of their property, including details such as the number of bathrooms, bedrooms, and other living areas. There is also a 'Clear Form' option available to the prospect.
-
This project includes an interactive footer on all pages.
-
The footer is visible on all devices and includes clickable icons linking to The Cleaning Hack's social media pages.
Enhance the 'About' page through the inclusion of a section on the CEO. It would have a photo and brief introduction of the owner of The Cleaning Hack, with insights into how the Company got started.
Introduce animation to the 'Services' page, making it more interactive and engaging.
Introduce card animation so that when prospects hover over client reviews, a before and after photo showcasing the corresponding work is displayed.
Develop and integrate a backend for the contact form to capture a prospect's details, which would then feed into the business's lead generation / management system.
Add a WhatsApp option so prospects can send instant messages for a quicker response.
Develop and integrate a cleaning calculator for prospects with residential enquiries so they can obtain an estimate based on property size and room details.
The backbone of website design and function; used to provide structure to the website.
Used to style the layout of each web page.
Source of all the icons used in this project.
Used to define the fonts used in the project (with the exclusion of the company logo). Also used to compare and pair font-styles.
Used to generate a favicon using the existing logo.
Used to convert jpeg and png files to webp for faster webpage loading.
Project testing was done manually by myself, the business owner, and a handful of family and friends from the Slack community. This was necessary to determine the usability, stability and responsiveness of the website and to gauge user-friendliness.
| Test | Expectation | Outcome |
|---|---|---|
| Navigation links lead to their intended pages | Pass | Pass |
| Book Now button leads to external booking page | Pass | Pass |
| Contact Us button leads to contact form on contact page | Pass | Pass |
| Learn More button leads to about page | Pass | Pass |
| Social links on footer lead to their respective pages | Pass | Pass |
| Booking and social links open in a new tab | Pass | Pass |
| Get Quote button leads to contact form on contact page | Pass | Pass |
| Send Message and Clear Form buttons on contact form work | Pass | Pass |
| Users prevented from submitting empty form | Pass | Pass |
| Users prevented from submitting incorrect email format | Pass | Pass |
| Test | Expectation | Outcome |
|---|---|---|
| Home, about, services, gallery, testimonials and contact pages display correctly on mobiles and tablets (769px and lower) | Pass | Pass |
| Home, about, services, gallery, testimonials and contact pages display correctly on laptops and desktops (992px and higher - up to 1200px) | Pass | Pass |
Four users were asked to carry out the following when they arrived at the website (each test was scored out of 5 and the result recorded as the average score):
| Test | Result |
|---|---|
| Navigate to business LinkedIn page | 100% |
| Navigate to contact form from home page | 100% |
| Fill in contact form with relevant details | 100% |
| Clear form after details entered to reset form fields | 100% |
| Navigate to business Google page | 100% |
Four users were asked to visit the website on their mobile and / or tablet and to provide feedback on any issues such as inaccessible content or overlapping images and pages.
| Test | Result |
|---|---|
| Issues Reported | None |
Parking Restrictions - Radio Button Grouping
- Unable to set selection to one radio button
- Fixed this by setting the 'name' attribute for both buttons to the same name.
No unsolved bugs found.
To deploy the project I followed the below steps starting from the main project repository linked above.
- Clicked on
Settingson the navigation menu in the repository. - I then selected the
Pagesmenu on the side bar. - In the first dropdown menu labeled
SourceI selected the branch of the namemainfrom the dropdown. - In the next dropdown labeled
/rootI left as the default option. - Selected Save.
I then received a notification from GitHub that my project was in the process of being deployed and after about two minutes, and a couple of refreshes of the page it was ready and live.
Youtube Tutorial - Luke Peters
The Cleaning Hack logo as well as the text were sourced directly from the business owner.
Used for typography applied to this project.
Used to source images for this project.
Used to broaden my understanding of CSS flexbox properties.
Also used to research the application of CSS flexbox.
Used when researching how to use CSS flexbox for responsiveness.
Free online resources used to research different real-life applications of CSS flexbox.
Project created in line with course content, walkthrough project and within project 1 scope.
Used to check responsiveness of the website.
Owner and CEO of The Cleaning Hack, who set aside a considerable amount of time to support the ideation process and subsequently contributed towards the media and content found in this project.
My mentor, who helped point me in the right direction when stuck on certain concepts.