SoCal Commercial Sweeping, Inc.

Desktop screen displaying a website for SoCal Commercial Sweeping, Inc., featuring contact information, a service vehicle image, and a message about serving the San Diego community since 2008. Includes a button to get a quote.

My Role

End-to-End Designer

My Goal

Design and build responsive site to establish online presence for client.

A Brief Overview

Webpage layout for SoCal Commercial Sweeping Inc. featuring company contact info at the top, a company tagline, a prominent quote button, an image of a sweeping truck, details about services since 2008, service offerings with icons including HOAs, shopping malls, business parks, and parking lots, and a map of San Diego County highlighting service areas.
Website design showcasing street sweeping services with sections on establishing trust, benefits of street sweeping, customer testimonials, and a contact form. Includes images of sweepers and personnel, along with quotes from satisfied customers and reputable sources about street sweeping advantages.

Check out the full case study below.

The Client

SoCal Commercial Sweeping Inc. is a small local San Diego business that previously had no web presence.  I was contracted to design and build a website that would allow them to appear in google searches, display important information to draw in new customers, and most importantly, allow customers to contact them for a quote either by email or phone.

Below are the only the information and branding materials I was given to base the website off of:

Flyer for SoCal Commercial Sweeping, Inc. Featuring a logo with a leaf and sweeper truck. Offers services for San Diego County. Contact phone: 619-205-2006, email: rafaelrivas58@gmail.com. Includes an image of a street sweeper truck.

The client wanted a product that would promote their brand and allow them to be easily contacted. They also wanted to be able to track their website traffic easily.

My Design Flow

Before diving into this project, I laid out my design flow using a combination of Agile and Design Think strategies. This helped me stay focused on both client and user, as well as assure that I would complete this project successfully within the time and resource restraints. You can see a visualization of my flow below.

Flowchart diagram illustrating a design process with steps: Requirements, Research, Empathize, Ideate, Design, Prototype, User Test, culminating in Launch.

I also created a project plan for myself in Figma using components and auto layout to keep my tasks organized throughout the project. You can see an example of this responsive project plan mid-completion below.

Kanban board showing tasks categorized into 'To Do', 'In Progress', 'Completed', and 'Paused' columns. Tasks include designing a logo, creating wireframes, conducting competitor research, and creating a Squarespace account.

Research and Branding

The customer base of non-municipal street sweepers are mostly Property Managers, who tend to have a tight time budget, and many maintenance organization responsibilities beyond hiring a service like my clients. Based on this information, the main user base will be looking for only the most important information with little time for unnecessary detail. I kept this in mind while I conducted a Competitive Analysis, from which I distilled the following insights:

Comparison chart with three columns labeled 'Gains,' 'Pains,' and 'Other Insights' on a yellow background. 'Gains' includes points about organizing info with icons, using negative space, and having maps of service areas. 'Pains' mentions dense text, outdated forms, and cognitive overload from too many calls to action. 'Other Insights' highlights the use of eco-friendly colors, media for legitimacy, details on services, and the importance of modern visuals for trust.

I found the unique characteristics SoCal Commercial Sweeping are that the company is a local business, they service mostly independent properties and property associations, and they provide emergency services. These are details I was sure to highlight in the final product.

Through discussions with the client, we came to the consensus that the website should look both professional and modern, while also representing the company as a trustworthy local service.

Image collage showing color palette swatches, street sweeper vehicle photos, icons representing different services, and font samples. Includes a graphic of a sweeper truck.

Solutions and Iterations

Based on my research, I needed a layout where the information would be easily digestible and uncluttered with obvious routes of contact from wherever on the webpage they make their decision to hire my client.

My goal was to prioritize the vital information, while giving an option at the bottom of the page with more detail for users who wanted to learn more.

I created a few Wireframes to represent layout options, and started to explore how to best present the information in an uncluttered and balanced way

Three wireframe layouts for a website, showcasing different design structures with placeholders for images, text, map, and sections titled "Services We Provide," "Where We Sweep," "Get in Touch," and "Certifications."

Wireframe Iterations

Using Squarespace, I built the landing page for SoCal Sweeping.

I suggested Squarespace to the clients because the platform is intuitive enough that they can customize it post-production if they need to update any information. The analytics features also gives the client insights into website traffic, which was important to them

User Testing and Product Launch

I had found a good balance and architecture to the website, and wanted to send it out to a few people for testing.  I made updates based on pain points articulated by the participants, and had a final walkthrough with the client.

I demoed the Analytics features so they would be able to track the success of the site moving forward, as well as how to update any text or photos in the future.