Booking Made Easy

Role & scope
UX Designer & Website Designer
Client
Brody Pennell Heating & Air Conditioning
Year
2025
Live site (opens in a new tab)

Overview

Brody Pennell has kept Los Angeles comfortable since 1945. The website needed to show that trust in seconds and make booking a service effortless.

The goal

Design a website that helps Brody Pennell grow and makes getting help easy for the homeowners who need it.

For the business

Turn more visits into calls and service requests, and show the trust the company has earned over 80 years.

For homeowners

Find the right help quickly, feel confident choosing Brody Pennell, and book without friction.

Process

How the site came together

I handled the UX and the website design. Each step fed the next, so every screen traces back to something a homeowner needed.

  1. 01

    Research

    I started by learning how the business works: the services it offers, how new jobs come in and where its pain points are. Then I looked at the customer side, what homeowners need, what they want and what they look for when they search for heating and air conditioning help.

    Research & Competitor analysis

    Other LA HVAC sites share the same problems

    Before designing, I reviewed three HVAC companies competing for the same Los Angeles homeowners. All three offer solid service, but their websites make the next step harder than it should be.

    • westsidehvac.com
      Westside Heating and Air Conditioning homepage134
      Westside Heating & AirHero with no button, long paragraphs, reviews far down the page.
    • comfortz.com
      Comfort Control Corp homepage235
      Comfort Control Corp.Two phone numbers up top, history-heavy copy, a five-field form.
    • enertekac.com
      Enertek Air Conditioning and Heating homepage34
      Enertek Air ConditioningClean hero, then small-print service text and no reviews near the top.

    Desktop homepages, captured September 2026

    1. 1No clear action in the heroWestside opens with services and brand logos but no button, so visitors have to scroll to find out how to book.
    2. 2Mixed contact optionsComfort Control shows a call number and a separate text number side by side, which makes people stop and choose.
    3. 3Walls of textAll three lean on long paragraphs about history and service areas, which pushes services and proof further down.
    4. 4Reviews hard to findWestside’s reviews sit most of the way down the homepage, and Enertek shows none near the top.
    5. 5Forms that ask a lotComfort Control’s request form has five inputs, including whether you’re a new customer, before anyone can hit submit.

    The numbered markers on the three screenshots show where each problem appears. Numbers 1 to 5 match the list above.

    These five patterns became the checklist for Brody Pennell. Every section of the new site had to avoid at least one of them.

  2. 02

    Structure

    With the competitor analysis, customer pain points and research into the HVAC industry in hand, I mapped out the site’s structure. That gave me a clear picture of what needed to be built before any design work began.

    Information architecture

    Built around the homeowner’s questions

    The competitor sites made people dig for answers. I mapped the questions a homeowner asks on the way to booking, then gave each one a clear answer in the order they ask it. The numbers show which competitor problem each stage avoids.

    User journey

    Sitemap

    The sitemap follows the same logic. Services come first in the navigation, trust content lives on About Us, and every page leads to one Request Service form.

    Wireframes

    Low-fidelity wireframes for desktop and mobile

    Before picking colours, I sketched every page in the sitemap as a low-fidelity wireframe: the homepage, one service template shared by every air conditioning, heating and air quality page, About Us, Resources and Contact. Plain boxes and lines kept the focus on content order, where the Request Service form sits and how quickly someone can act.

    Homebrodypennell.com

    Low-fidelity desktop wireframe of the homepage: header, hero with ratings and quick actions, awards, intro beside the Request Service form, reviews, services, experience, areas served, blog, call to action and footer

    Service pageAir Conditioning › AC Repair

    Low-fidelity desktop wireframe of the service page template

    About UsAwards, licenses, testimonials

    Low-fidelity desktop wireframe of the About Us page

    ResourcesFAQ, DIY tips, videos, blog

    Low-fidelity desktop wireframe of the Resources page

    ContactRequest Service form

    Low-fidelity desktop wireframe of the Contact page

    Desktop · Home, service template, About Us, Resources, Contact

    Low-fidelity mobile wireframes for Home, the service page template, About Us and Contact, each with a pinned Call and Request Service bar
    Mobile · Home, service template, About Us, Contact
  3. 03

    Visual design

    I started with a moodboard built from what the company already has: the logo, navy uniforms and vans, real technicians and warm Los Angeles light. The orange and red come straight from the logo’s arc, and navy gives the white wordmark a home in the header, so the website looks like the same company people see pull into their driveway.

    • Arc orange#FB8200 · buttons
    • Heat red#ED1700 · accents
    • Navy#172B40 · header
    • Cream#EDE3D1 · sections
    • White#FFFFFF · cards
    Brody Pennell moodboard: logo on navy, the Brody Pennell team in front of their headquarters, their BBB, Best of the Southland and NATE awards, a Los Angeles home at sunset, navy workwear, an AC condenser against cream stucco, real technicians, bold uppercase type and a note on the brand feeling
    Moodboard
  4. 04

    Mockups & handoff

    I placed the finished pages in real settings to check they still read clearly at a glance, then handed over the screens, colours, type styles and button states so the build could match the design.

    Desktop mockups

    Homepage hero with ratings, headline and quick-action buttons on a laptop on a home office desk
    Heating and air conditioning services section on a laptop on a desk

    Mobile mockups

    Home, services, reviews & request service on mobile

Results & Reflections

Every visitor now has a clear next step. Calling or requesting service is one tap away, on a phone or a desktop.

What worked

The design removes the guesswork. From the first screen, homeowners can see who Brody Pennell is, what they fix and exactly what to do next: call or request service.

What I learned

People with a problem want a fast solution. A clear call to action, honest visuals and real social proof on the website give them the confidence to contact the business and book right away.