Profireiniger Cleaning Company Website and CRM
I started out with these concept sketches for the website and backoffice web application for a cleaning company. The company urgently needs a brochure website that presents its services to potential customers and provides directions and a contact form. Once that has been launched the company wants to add news pages themselves, so the website will be extended with user management and a simple CMS for adding news items.
In the third phase, a full backoffice application will be added to the website for employees of the company to manage customers, to create create quotes as custom offers for future business and finally to invoice already provided services to customers.
Phase I: Brochure Website with contact form
In this phase, a flat HTML/CSS/JS website will be created with pages describing the services, the company and a video. The directions to the office will be an embedded Google Maps snippet and the contact form will use Elastic Mail for users to send requests to the company.
Phase II: User Management and News CMS
The news section will be added with an overview page that aggregates the news items and links to the full news items. A user management and a login will be implemented. Company employees can login to the editorial backend to create news items for publication and to edit the content on the default pages (home,about, services, etc.).
Phase III: Backoffice Quote Management and CRM
In the final phase, a backoffice section will be added. Here employees can create and manage quote offerings for interested parties and put together their custom offers based on the predefined services. They will also be able to create and manage customers (name, address, email address, phone number, etc.) as well as create and manage invoices for delivered services.
Website Sitemap and Wireframes (Phase I)
This sketch features pages describing the services, the company and a video. The directions to the office will be an embedded Google Maps snippet and the contact form will use Elastic Mail for users to send requests to the company.
Promotional Video
This is the German-language promotional video I made for the company
Impressions of the production website
I've crafted the digital presence for the cleaning company, aimed at elevating their online footprint and customer interaction. This project involved a deep dive into the essence of the brand, translating it into a user-friendly and visually appealing web experience. I invite you to explore the live website, and, for those interested in the technical intricacies and collaborative efforts behind the scenes, I welcome you to visit the project's GitHub repository.
Front Page
Services Detail Page
Promotional Pane and Video
Contact Form and Google Map
Login and User Management (Phase II)
A user management and a login will be implemented for company employees. It will include the necessary password reset functionality.
Content Editing (Phase II)
Once logged in, company employees can access the editorial backend to create news items for publication and to edit the content on the default pages (home, about, services, etc.).
News Section (Phase II)
The frontend needs to be extended to provide a news section and articles as well as a news archive.
Backoffice Features (Phase III)
Here employees can create and manage quote offerings for interested parties and put together their custom offers based on the predefined services. They will also be able to create and manage customers (name, address, email address, phone number, etc.) as well as create and manage invoices for delivered services.
Database Entity Relationship Diagram
The database will have seven tables. The main customer tables will be related to the invoices and the offerings. The services table will contain the individual cleaning services provided by the company and their price. These will be listed in the user interface so that they can be added to offers and invoices. The other tables will contain the content for the news articles and the default pages (e.g. home, about, services, etc.).
