Client Project
Janitors Direct LLC.
More than just a web development project, Janitors Direct is a company I built from the ground up. I focused heavily on branding and establishing a strong online presence. This was crucial, as 90% of our lead generation comes from digital marketing efforts, primarily through Google and LinkedIn ads.
About This Project
Branding
As a B2B service provider, branding is a crucial element that sets us apart from competitors. It was essential to develop a color palette that is easily recognizable and closely associated with the janitorial industry. Equally important is the company's name, logo, and typography, all of which contribute to building a strong and distinctive brand identity.
đź’ˇ Thought Process
-
Business Name - It has become increasingly difficult to find a strong company name that is also available as a .com domain, across social media platforms, and with the state. After careful consideration, I chose "Janitors Direct." This name-checked all criteria and reflects our decision to employ highly trained, vetted professionals directly, rather than relying on subcontractors. It embodies our commitment to quality and ensures that our team represents the company’s values and standards.
-
Color palette - When you think of janitorial services, common items like wet floor signs, mops, buckets, or janitorial carts often come to mind—all typically yellow. This inspired me to choose a darker shade of yellow as the primary color. For the secondary color, I opted for a lighter shade of black, and for the tertiary, I selected a very light shade of gray. Together, these colors create a clean, professional, and easily recognizable brand identity.
-
Company Logo - I created three logos, each with a clean and minimalist design. The first is a large logo that includes the business's value proposition. The second is a smaller logo featuring just the company name. Lastly, I designed an avatar logo, which is used for profile images and as a favicon across digital platforms.
-
Typography - I aimed for a clean, minimalist, and highly readable font to maintain a professional look. It was important that the font be available on Google Fonts to ensure compatibility across platforms. After careful consideration, I chose Asap, a contemporary sans-serif typeface designed for both screen and desktop use. Its subtle rounded corners give it a modern yet approachable feel, making it the perfect fit.
Logo Designs
Website Design
Before starting the design, I carefully planned the website’s use case and identified its key features. With lead generation and automation in mind, it was essential that the website clearly showcase our services, educate prospects on the benefits of working with us, and most importantly, include a form to capture key details about the potential client and their facilities. This ensured that the site would not only inform but also serve as an effective tool for generating leads and minimizing the time to enter information into our CRM manually.
UX & Low Fidelity
When designing the user experience and wireframing (grayscale mockup), I focussed heavily on the landing page. Traffic would arrive on this page from our ad campaigns or external sources. Once arriving on the landing page information and links needed to be readily available and easily accessible.
Landing page sections
- Hero - This section acts as the cover of a book, determining if the visitor will continue scrolling
- Mission statement
- Services, including the locations we service
- Industry expertise
- Getting started - A clear explanation of our onboarding process
- What sets us apart
- Featured resources/articles
- Footer - With links to site pages
Site pages
- Landing page
- Resources Page - A collection of educational articles related to the janitorial industry
- Resource Page - A single article view page
- 3 Service Pages - Each detailing one of our core services
- Quote from - For potential clients to easily request a quota
All of this was then first designed using a low-fidelity grayscale mockup. I added copyright headings within the sections and carefully positioning links, buttons, icons, and images in their respective areas.
High Fidelity
Since I already had developed the company branding and style guide, the high-fidelity design process became straightforward. It mainly involved applying the brand colors, adding copyrighted text, creating relevant illustrations, incorporating icons, etc. I made final tweaks to the design, adjusting things like padding, margins, and border-radius. Additionally, I opted to include a subtle drop shadow on the cards and a few other elements. Once I was satisfied with the design, I exported all the SVG assets and readied everything for development.
Website Development
This is the part I enjoy the most—bringing a design to life. I started by creating a project folder on my desktop called janitors_direct_website and opened it in my VS Code. With some techno music playing in the background, I geared up to write thousands of lines of code, ready to transform the design into a fully functional website.
Frontend
Depending on the project, I almost always prefer building out the front end first. I started by installing Next.js, my go-to framework. Once that was set up, I structured the project files and installed the necessary dependencies for this specific build. After completing the initial setup, I began following the design, coding section by section, and methodically building out the front end of the site.
Backend
Once the front end was ready for content, I shifted my focus to building the back end. I needed a Content Management System (CMS) to easily manage and add articles to the site's resources page. After some research, I chose Strapi CMS. It's an open-source, self-hosted solution that offers advanced API support, making it a great fit for this project.
Setting up Strapi was straightforward. I installed it via NPM, configured the database, and ran it locally. Strapi provides a clean user interface to set up collections and schemas. Once everything was in place, I connected the API key to the front end and finalized the code to fetch the content from the CMS.
Deployment
I chosen to deploy the front end on Netlify, which saved me the effort of coding an API for handling form submissions. With Netlify, all I needed to do was add a few HTML attributes to the form, and it automatically managed the submissions. For the backend, I went with Heroku. After both the front and back ends were up and running, I connected our domain, janitorsdirect.com, and tested it across multiple devices to ensure everything was responsive and performed well.
SEO & Analitics
During the development phase, I added metadata for Google search results and Open Graph tags to optimize social media sharing. After deployment, I configured Google Analytics, added the tracking ID to the site, and began receiving user data. I also set up Google Search Console, which helps monitor and improve how the site appears in Google search results.
Email Domain
I've been using Microsoft Office 365 for some time, and since I wanted to use Outlook, I needed to configure our email domains to work with it. The process is quite straightforward—everything is managed through the Microsoft 365 admin panel. Once you enter your domain, you'll receive a few DNS records to add to your hosting provider. One of the great benefits of having a Microsoft Office business account is access to Exchange, where you can create multiple email addresses, such as info@yourdomain.com, and easily assign roles or set up email accounts for your employees within the organization.
Marketing
After completing all the above projects, it was time to establish our social media presence and optimize our sales funnel. As a B2B service provider, I chose LinkedIn as our primary social media platform to engage with our target audience. I also set up a Google Business Profile to boost local visibility and created a Google AdSense account for running targeted search ads. This required a thorough keyword analysis to optimize our Google ad campaigns. To track conversions effectively, I also implemented Google Tag Manager to monitor events on our website, such as form submissions and button clicks. Once everything was set up, it was just a matter of defining our marketing budget and launching the campaigns.
Sales
To enhance our sales process, I created a comprehensive diagram, essentially a flowchart, that visually outlines each step. This flowchart ensures we maintain a structured and efficient approach, helping streamline our sales efforts for better results.
Marketing & Sales Flowchart
Software Setup
To complete our company's administrative workflow, I chose and configured the following services to ensure everything runs smoothly and efficiently.
- Quickbooks - For invoicing, payroll and bookkeeping
- Pipedrive - Our CRM of choice
- PandaDoc - Used to send our service agreements, allowing ease for digital signatures
- MilesIQ - Used for tracking vehicle miles
- Dialpad - AI-powered phone platform (voice calling, text messaging and video conferencing)
Print Design
Finally, no company feels complete without business cards. Following our branding guidelines, I used my design software to create both the front and back of our cards. The design is minimalistic, but I’m very satisfied with the outcome.
Conclusion
In conclusion, Janitors Direct is a company I founded from the ground up. It required significant effort, dedication, and persistence to bring the vision to life. However, the rewards have been well worth it. Today, the business not only operates smoothly but also provides consistent, recurring monthly income for both my wife and me. It's a project I take great pride in, knowing that the hard work continues to pay off and contribute to our long-term financial goals.