Casas Roofing
A roofing website that makes a family-run Chula Vista crew look as established as it really is, for homeowners, realtors and commercial owners across San Diego County.
Project overview
Casas Roof Inc. is a family-owned roofing company in Chula Vista, California, led by owner Carlos Casas. Before founding it in 2018, Carlos ran a large roof tear-off operation in San Diego for more than a decade, working with most of the region’s roofing companies. The company re-roofs shingle and concrete-tile homes, installs flat and TPO roofs, coats commercial roofs, inspects roofs for realtors and property managers, and re-roofs around existing solar panels. For seven years the business grew almost entirely on referrals and Yelp reviews.
That reputation wasn’t showing up online. In the brief, Carlos worried that homeowners might see a young company and assume it lacked experience, while the competitor ranking first on Google had a polished site. In 2025 WISE Digital Partners rebuilt the website to close that gap. I designed the whole site: the visual direction, the page layouts and the UI for every template, on desktop and mobile. Page copy and SEO came from WISE’s content team.
The brief
Summarised from the client’s Stakeholder Brief and Brand + Goals exercise (May 2025), both completed with WISE before the build.
“We treat every roof like it protects our own family.”
What the client needed
The company had never worked with a marketing agency, and its existing site had been put up in a hurry. Paid ads had brought spam and junk leads. The growth target was steady, high-quality re-roof leads, at least 80 a month, enough to keep two crews working full time. New roof installation was the service to prioritise.
Goals the client selected
How they want to be seen
Reliable, professional, confident, strong, ethical, fair, humble, considerate, no-nonsense, modern. Tone: expert and direct.
Design input
Brand persona: “the reliable protector”. Site they admired: Resilient Roofing, for the way it guides customers to an educated choice. Style to avoid: the owner in every photo or video. Terms to use: Title 24 compliant and Class A fire rated.
Constraints
The brand guidelines were supplied. The primary action was booking an appointment, ideally directly on the site through Housecall Pro. The site also needed a financing pre-approval link and the manufacturer brands the company installs, including Owens Corning, GAF and Gaco.
Creative direction
Branding status: existing brand. The Casas Roofing wordmark and the raccoon mascot in a green hard hat carry the identity, and the company’s truck, van and trailer are wrapped in bright green. The brand guidelines set the logo, colours and type. My part was the execution: turning those guidelines into a web system and applying it consistently across every page template.
Built on the job site
The brief asks for “the reliable protector” without putting the owner in every photo. So the mascot carries the personality and real job-site photography carries the proof: crews on roofs, fresh underlayment, tile and solar, the green truck in the driveway. Angled section edges echo the pitch of a roof, a sawtooth edge recalls a course of shingles, and green is kept for trust bands and calls to action.
The concept name was written for this case study to describe the direction.
Visual identity
Every photo on the site is the client’s own, taken on real Casas Roofing jobs
Tile tear-off: the green trailer carries the brand colour onto every job
Shingles going down over fresh underlayment, seen from above
Commercial TPO on Third Avenue, Chula Vista: local work, close to home
Tile around solar panels: the specialty work, shown as it is
The full-body mascot on field green
Mascot and custom icons
The full figure anchors the homepage, About page and contact band. The head works at small sizes, as the map pin and the testimonial accent.
Quality & Reliability
Code-Compliant & Energy-Efficient
Skilled, Trained & Trusted
Custom icons for the Why Choose Casas Roof band, drawn in the mascot’s style: grey paw, thick black outlines and yellow sparkle accents.
Colour
Values sampled from the final design files.
Type, graphics and imagery
- Type. Ovsyanka, a squared, wide display face, in capitals for headlines, with Nunito Sans for body text. The squared capitals feel sturdy and workmanlike. The rounded body keeps long service descriptions easy to read.
- Graphic elements. Angled section edges and parallelogram photo crops that echo roof pitch. A sawtooth edge under the green band, like the edge of a shingle course. A shingle texture behind the contact band. The mascot steps out of its frame instead of sitting inside a box.
- Imagery. Drone shots of re-roofs, crews at work, tile and solar roofs and the green truck, all supplied by the client. The homepage hero is a full-bleed job-site video, dimmed so the headline stays readable.
to last
At Casas Roof, we believe every project tells a story. From small repairs to full roof replacements, our work is built to last, combining quality materials, skilled craftsmanship, and attention to detail.
Sample copy from the final Our Work page.
References named by the client
Design exploration
These sketches were drawn after the project, working back from the final homepage, to show how its structure could have developed. They are a reconstruction, not working files from the 2025 project.
Hero layout alternatives
RECONSTRUCTED DESIGN EXPLORATION
A full-bleed background with a centred headline gives the homepage the most presence and leaves room for the rating line. This is the structure the final homepage uses, with a job-site video in place of a still photo. A split layout with an angled photo on a striped grey ground suits inner pages and became the hero for Our Work, Service Areas and About. A green band with a wide photo below it became the hero for the Residential category page.
Service presentation alternatives
RECONSTRUCTED DESIGN EXPLORATION
The site has nine services in three groups. A nine-tile grid treats them all the same. Horizontal cards with one dark featured card let New Roof Installation lead the residential group, which matches the brief’s priority. Tall photo cards suit the smaller commercial and specialty groups, so the homepage uses B for residential and C for the other two.
UI/UX design execution
WISE’s content team supplied the page copy. My work was to give the site a visual hierarchy, a navigation system and a set of reusable components that hold together across every page template.
Site structure as it appears in the live site’s navigation. Starred pages are the templates shown in this case study.
Booking panel
Online booking was one of the two goals the client chose. Every “Book Now” and “Schedule a Free Inspection” button opens the same panel, so a homeowner can book a free roof inspection without leaving the page. Two tabs cover the two kinds of visitor: people ready to pick a time, and people who would rather describe the problem first. The phone number stays pinned at the top for anyone who wants to call.
Book a Call. The 45-minute free inspection calendar is embedded under the same headline as the form.
Send a Message. A short form with a required service dropdown, so each enquiry arrives already sorted.
Homepage hierarchy
- 01Full-bleed video hero: “Built to last. Priced to compete.”, the 5-star, family-owned line and “Schedule a Free Inspection”
- 02Trusted Roofing Company in San Diego, with the mascot over an angled photo
- 03Why Choose Casas Roof, three points with custom icons on the green band
- 04Residential Roofing, four cards led by New Roof Installation
- 05Commercial Roofing, two photo cards
- 06Specialty Services, three photo cards
- 07Gallery, a full-bleed photo strip
- 08Client Testimonials, Google reviews on a dark band
- 09Raising the Bar for San Diego Roofing, the company story
- 10Where We Work, the service-area map with the mascot pin
- 11Blogs & Tips, three article cards
- 12Contact Us band with the mascot, then the footer
Component patterns
- Service cards. Horizontal cards for the four residential services, with the featured service in charcoal, and tall photo cards for commercial and specialty. The same cards return as Related Services on the service pages.
- Angled split sections. Text beside a parallelogram photo on a striped grey ground, used for the Our Work, Service Areas and About heroes and for the company story.
- Step list. A numbered seven-step process on the New Roof Installation page, from the first call to final steps, beside two outlined info cards.
- Proof blocks. Google review cards stacked on a dark angled band beside a family photo and the mascot. Owner quotes on the About page.
- Map with mascot pin. A light map with the mascot as the location pin, on the homepage, About, Residential and Service Areas pages.
- Contact band. A green shingle-textured band with the mascot holding a hammer, closing every page.
Residential services on the homepage. New Roof Installation, the client’s priority, is the dark featured card.
The three trust points come straight from the brief: in-house work, Title 24 compliance and trained crews, each with its own custom icon.
Final designs
Desktop pages from the final files. Scroll inside each frame to see the full page.
Page details
The seven-step process shows homeowners the whole job at a glance, from the first call to the final walkthrough.
Meet the Owner introduces Carlos through his own story and customer quotes, with the mascot in place of a portrait.
Responsive experience
These are the actual mobile designs at a 393px width, not desktop screens placed in a phone frame. Split sections stack with the text first, service cards become full-width stacks with the photo on top, and the gallery drops from three columns to two. No tablet layouts were supplied.
Design outcome
-
01
Visual language
Applied the brand guidelines across every page: section layouts, angled edges, shingle textures, mascot placement and real job photography, all working as one system.
-
02
Information architecture
Gave all nine services in three groups a place on the homepage, with new roof installation, the client’s priority, featured first.
-
03
Reusable templates
Designed homepage, category, service, About, Service Areas and gallery templates on one shared set of components.
-
04
Desktop + mobile
Delivered desktop and mobile layouts for each template.
Project credits
Designed as part of my work with WISE Digital Partners.
My contribution: UI/UX design, visual design and creative direction.
Page copy and SEO by the WISE Digital Partners content team. Client: Casas Roof Inc.
