Encinitas ADU Landing Page
Ux Designer from conception to delivery
Figma
ADU Builders Landing Page
As part of Soho Construction's marketing team, I was tasked with improving the performance of our ADU (Accessory Dwelling Unit) landing page. The original page was dense and text-heavy, making it difficult for users to understand what an ADU is, if they qualify, and how to get started.
My goal was to simplify the structure, highlight the most important questions users were asking, and design a modern, easy-to-scan layout that guides users toward booking a consultation — without relying on a hard sell.
Challenge
Most ADU (Accessory Dwelling Unit) landing pages — including Soho’s original — are designed with a contractor mindset, not a user one. They’re often dense, overloaded with information, and lack a clear path for the reader. Users who are just starting to explore whether they can build an ADU on their property are hit with too much technical content and not enough guidance.
Instead of helping them take the next step, the page creates confusion, friction, and drop-off. There was no visual hierarchy, no clear CTA above the fold, and no sense of how the process works or what to expect.
The Solution
I redesigned the landing page to focus on education-first, conversion-second. I restructured the layout based on real user questions like:
What is an ADU?
Can I build one on my property?
How long will it take?
What will it cost?
Understanding the User
I gathered user data through our website analytics and lead tracking on Monday.com, which revealed a shift in who was engaging with our ADU content — and how.
Historically, our clients were mostly older homeowners (50+) who found us through referrals. But over the past year, we’ve seen a noticeable uptick in younger homeowners (30s–40s) reaching out via our website and social media — a trend likely tied to the growing visibility of construction and architecture content online.
Key Insights
A few key takeaways shaped the new landing page:
Clear visuals over heavy text
A modern, branded experience that reflects the kind of homes they want to build
Easy-to-follow content and guidance — not a hard sell
Soho's Existing Landing Page
Before the redesign, Soho’s ADU page shared many of the same issues I observed in competitor sites:
No clear CTA above the fold
Dense text - no visual break
Inconsistent spacing
Competitive Analysis
To better understand how users experience ADU content online, I reviewed several competitor landing pages. The goal was to see what worked, what didn’t, and where there were opportunities to stand out.
What I noticed:
Heavy blocks of text with little visual hierarchy
Vague or hard-to-find CTAs
An overly sales-driven tone with minimal user guidance
Little effort to explain the ADU process or qualifications clearly
This helped me decide to structure the page around simple, common user questions — the kind people are actually Googling — and to guide them through answers with visual clarity and a calm, educational tone.
Competitor #1
Lumina’s ADU page is packed with dense, jargon-heavy text and opens with an aggressive lead capture form before offering any real value. The layout is cluttered, with competing CTAs and little visual hierarchy, making it hard for users to find clear answers or understand the process.
Hard-Sell Form at the Top
The first thing users see is a big form asking for contact info before they’ve learned anything.
This feels pushy and assumes too much intent.
Overloaded With Dense Text
The top half includes a long block of unstyled, heavy text with no visual hierarchy.
Paragraphs go on without subheadings or bullets — making it hard to scan.
Redundant & Unclear Structure
There are multiple sections doing similar things but there’s no clear flow or separation.
It’s visually cluttered and lacks hierarchy or section titles that guide the user.
Competitor #2
CRS Builders’ page suffers from key UX issues: repeated CTAs, inconsistent hierarchy, and information overload. Rather than guiding the user with structure and flow, the page throws everything at once — making it hard to focus, absorb, or act.
Heavy Text Blocks
Especially in the top “Your Complete Design and Build Partner” and “Expertise” sections.
No subheadings, bullet points, or summaries — makes skimming difficult.
Repetitive CTAs
"Schedule a Consultation" appears 6+ times, often stacked close together.
Instead of using a single, consistent CTA, the page jumps between phrases.
No context around the CTAs.
Unnecessary Sections
“Building Homes Throughout San Diego” and “FAQ” feel like filler.
No clear distinction between types of users or what each section is meant to do.
Brainstorming and Ideation
After reviewing competitor sites like CRS Builders and Lumina, I knew I wanted to take a completely different approach. Instead of overwhelming users with text and scattered CTAs, I focused on:
Clarity over clutter
Education before conversion
One primary CTA, introduced only when relevant
Visual storytelling to make the process approachable
Low-Fidelity Wireframes
After brainstorming, I sketched out rough ideas for:
A simplified hero section with a clear intro + soft CTA
Visual breakdowns of the ADU process and qualifications
A cost overview users could actually understand
Social proof (testimonials, photos) placed after trust was built
High-Fidelity Wireframes
The final design focuses on clarity, trust, and visual flow. Each section was restructured to answer the most common user questions in a calm, scannable format — with a single, consistent CTA placed only where it made sense. By simplifying the content, adding supportive visuals, and humanizing the brand through personal touches and real projects, the new page creates a more intuitive and engaging experience for users exploring ADUs for the first time.
Hero Section
Refocused the hero to make the offer instantly clear and approachable, with supporting visuals to ease users in.
Before
After
Value Props / Educational Section
Replaced dense text with bite-sized, visual content to match how users actually scan landing pages.
Before
After
Process Timeline & Cost Overview
Replaced long, unclear explanations with a visual process timeline to help users understand the ADU journey at a glance. Added a simplified cost breakdown and moved the CTA further down the page — only after users had enough context to feel informed and confident.
Before
After
Personal Touch & Building Trust
Introduced a personal touch by featuring our in-house architect near the end of the page, adding warmth and credibility. Followed it with a soft project gallery to show the quality of our work without overwhelming the user or shifting focus from the main content.
Before
After
FINAL DESIGN
Reflection
This project helped me think more deeply about visual hierarchy, how users scan long pages, and when to offer information vs. action. I originally designed an earlier version of this page, but after revisiting it months later with fresh eyes and more UX knowledge, I chose to completely redesign it from the ground up. The result is cleaner, clearer, and more conversion-focused — without relying on pushy tactics.
What's Next?
A/B test this version vs the original
Add interactivity (animated steps, form popups)
Explore a lightweight quiz to help users determine if they qualify
See more work
Whale Friend - Beach Cleanup App & Responsive Website
Flori - Flower Catalogue App