As a long-time designer, I’ve built up the habit of spotting mistakes and design inconsistencies instantly—whether I’m online or walking past a billboard in town. If you’ve been following my Design to Dollars newsletter for a while, you know I’m always preaching about design consistency and sharing actionable tips to help you grow as a designer.
In this post, I’m taking you through a local business homepage and breaking down exactly what I’d change, section by section, to make it stronger from a design and user experience standpoint.
First Impressions and Navigation
When I first land on the site, I immediately notice a lot of extra padding above the header. This space is completely unnecessary and wastes valuable real estate “above the fold.” I’d tighten that up to match the bottom padding around the logo and keep things consistent.
That said, the top bar looks fine as-is—I wouldn’t change anything there.
The Announcement Bar
Right below the navigation is an announcement bar for a new patient special.
- The headline text is way too big. Yes, it’s a special offer, but the orange background already draws attention to it—you don’t need oversized text on top of that.
- The button style doesn’t have enough contrast and blends in too much. I’d make the button white with black text to align it visually with the headline text and improve clarity.
- I’d also reduce the height of this bar to avoid pushing other important content down the page.
Hero Section Problems
This hero section has a few key issues:
- Size: It takes up the entire fold and feels oversized.
- Hierarchy: The text “Great” is the most prominent word… but what does that even mean? The real value is in “Quality Chiropractic Care.” That’s what should be emphasized.
- Button Styling: The call-to-action button lacks padding and feels cramped. It needs more breathing room.
- Background Design: The large orange box and the logo in the background make the section feel busy and hard to read. I’d explore a new image background—one without text—and rethink the overlay for contrast.
Card Section and Hover Issues
The next section has three cards in a row, each with hover interactions:
- Bad UX: Buttons should never appear only on hover. Key actions need to be visible at all times.
- Pointless Image Swaps: Changing the image on hover doesn’t add any value—especially if it’s just two images of the same doctor.
- Brand Inconsistency: The button’s hover state turns teal, which doesn’t match the brand at all. I’d switch that to a more on-brand color, likely black.
- Accessibility: Check the contrast between white text and the light gray background. It’s borderline, and likely doesn’t pass accessibility standards.
Layout Alignment Issues
There’s a container width issue here:
- The header is confined to a set width (likely 1200px), but this next section breaks outside of that container on the left edge. It’s subtle, but it disrupts the overall alignment and flow.
- Consistency in layout width is key—everything should line up.
Interior Content Blocks
The next section looks fine, but it’s missing a clear call-to-action. If you’re introducing something here—like services or background info—add a button to guide users to the next step. Even something simple like “Book an Appointment” or “Learn More” can help.
Testimonial Section
There are a few problems here too:
- Too Fast: The testimonials cycle too quickly to be read comfortably.
- Ineffective Animation: The fade effect feels awkward—especially because the background image isn’t even changing.
- Contrast Issues: The text fades into a low-contrast background, making it harder to read. I’d use a different background or darken the overlay for better readability.
Services Overview Section
This section includes a text block and image side-by-side, repeated twice. A few design tweaks needed:
- Alignment: The text and image aren’t vertically aligned, which throws off the visual balance.
- Section Heading: There’s no section title. Add something like “Our Services” or “How We Help” to anchor the section.
- Line Height and Padding:
- Tighten the line spacing on the paragraph text.
- Reduce the gap between the heading and body copy for better visual cohesion.
Final Call to Action
The “Schedule Your Free Consultation” section has potential, but:
- The embedded software button looks dated—like it’s from 2002.
- Update the styling if possible. And if this is your key call-to-action, make it pop—use the same orange background as the announcement bar at the top.
- Your main conversion goal (like booking an appointment) should always stand out clearly.
Footer Cleanup
The footer is cluttered and could benefit from a simple four-column layout:
- Logo (preferably the full logo, not just an icon)
- Hours
- Contact Info
- Reviews or Trust Badges
Move any association logos (like colleges or accreditations) under the contact info or into their own row. Also, eliminate the embedded Google Map—it doesn’t add value and often hurts performance. Instead, just link your address to the map.
Bonus: Heading Structure Check
I always check heading hierarchy for SEO and accessibility. Here’s what I found:
- No H1 Tag — which is a huge miss. Every page needs one clear H1.
- H6s are used in the top bar, then it jumps to H2s, and randomly to H4s in the footer.
- No logical hierarchy means Google and screen readers won’t understand your page structure.
Best practice: One H1 per page, then follow a clear structure with H2s and H3s beneath that.
Final Thoughts
That was a deep dive into this homepage—but hopefully it gave you insight into how I approach design critiques and spot areas for improvement.
If you want a similar review for your own site, I offer design consulting. To learn more, get in touch.
