Calfo Site Design
We would like to begin the design process for the new Calfo Heating & Air Conditioning Website:
Homepage Design
Header will have the Calfo style buttons
- Include service area aux link
- Service menu should be mega-menu (Cooling, Heating, Plumbing & IAQ)
- Let’s use the Total Home Performance mega menu as benchmark
- Intro on the left, then have two columns of services
Hero area — Similar to what is there currently
- Keep the copy
- Keep buttons
- Same style
Service section = service previews
GatherUp reviews widget
Include Service area section (can be similar to current website)
Contact Form
Distinctions (have their own bar)
Horizontal/smaller footer
Home page buttons / icons that animate on hover over: https://www.horizonservices.com/
For contact form, let’s include a car graphic from Calfo
- Include contact form toward the bottom of every page
Service Category Page Design
- Standard CTA under hero
- Body copy
- Service previews (same treatment from Calfo site)
- Include images
- Soft CTA at the bottom of the page (same as homepage)
- Carry over the sub-nav from the current site over to the new website.
Service Page Design
- Hero image
- Overlay (dark blue) with page title
- Mock-up a few examples for tabbed content from current Calfo site: https://calfohomeservices.com/cooling/central-ac-repair?section=troubleshooting
- Include on-site testimonials at the bottom of page
- If there’s a coupon related to a specific service, we should pull it on the related page
- Carry over the sub-nav from the current site over to the new website. (see screenshot below)
- Display icons in the footer (make it’s own content type)
- Standard CTA under hero
- Soft CTA at the bottom of the page (same as homepage)
Everything under the About menu will be in the Aux menu
- Rename Help Guides to Blog
- Keep blog categories as they appear on current Calfo site
- “See All Blog Category” page — keep numbered page navigation to load more blogs
- Move coupons in Aux nav
For images, there aren’t many original pictures that are horizontal. I know the client is a bit attached to the idea of internal images only, and no stock. Let’s use an overlay for banner images and then we’ll plan to add more original images in the body of each page.
