Law firms need a website to get the attention of search engines and potential clients.Investing in the right law firm website design and ongoing SEO is crucial to:
- Stand out from your competition
- Effectively communicate with your target market
- Build trust with viewers to encourage conversions
This isn’t like every other list of best law firm websites out there. We didn’t just find aesthetically pleasing sites to throw together so we could rank on Google.
We wanted to give you a resource that breaks down the underlying psychology, user experience, and conversion rate best practices so you can understand.
We wanted to give you the why. Not just the what.
From personal injury law firms to business law, family law, criminal defense, estate planning and beyond, see what takeaways (both good and bad) can be applied to your own site.
The Champion Firm
Home Page (Above the Fold)
Your headline is the most important thing to get right on your home page. It should be the first thing people see when they land on the page. It should make it immediately clear what you do and reassure the visitor that they’re right where they want to be.
The Champion Firm does this by having a clear and prominent headline that conveys their value proposition (also called a unique value proposition).
The headline focuses on the problem their target client has and makes it clear that they’ve arrived at a place that has a solution. It effectively says, “If you’re injured and don’t know what to do, we can help.”
The worst thing you can do with your headline is focus on yourself instead of the visitor. Your entire website should be all about them, not you.
There’s also a prominent blue call to action immediately below the headline. The blue background of the button contrasts well with the background—making it stand out visually.
Above the headline, the slightly smaller text that reads “Marietta Personal Injury Lawyers” signals to visitors who their target audience is—people who need a lawyer near Marietta.
What’s Good?
- It’s the largest text element above the fold.
- It contrasts well with the background.
- It’s benefits-driven and speaks specifically to the visitor’s problem.
- Clear call to action above the fold (e.g. the blue “Get a free consult” button).
- The button with their phone number uses a tel: hyperlink which will prompt the visitor to call if clicked.
What Could Be Better?
- The photo of the attorneys draws focus to them and away from the headline. You don’t want to distract visitors from the most important element on the page. It also doesn’t give the visitor anything they can directly relate to. To build trust with visitors, consider using a photo of one of your attorneys with one of your clients that you’ve helped.
- The logo in the navigation area is massive. Every pixel above the fold is precious real estate. If this firm reduced the size of their logo, they could have fit some social proof above-the-fold on mobile.
Live Chat
If you’re going to have live chat on your website—customize it like The Champion Firm has. Don’t let your chat widget take over too much of the screen.
It should be there so the visitor can easily access it but don’t ruin their experience while they’re doing research.
The Champion Firm uses a photo of their lead attorney next to the chat, making it more inviting. People naturally gravitate toward human faces and while the visitor may not actually talk to that attorney, it signals to people that when the start a conversation, it’s going to be with a person and not a chatbot.
One thing that could have made their chat widget better is if it waited to popup until after the visitor had been on the page for 10-15 seconds or appeared after they’ve scrolled down the page a bit.
Having it there right when the page loads will cause some folks to get distracted and not pay as much attention to the headline.
Social Proof
This firm includes a professionally-made video that does a great job building trust with visitors. It gets everything right by talking about the questions and problems their clients face as well as showcasing real clients talking about their situations and what the firm did for them.
I cannot say this enough times: customer testimonials are one of the most impactful things your firm can invest in to capture demand when people visit your website and bring in more cases.
Contact
You’re redirect to a contact page when you click their call-to-action to get a free consult.
Their contact form provides context for the visitor. A lot of law firms just throw up a form and expect visitors to fill it out.
If you want to increase your contact form submissions, include copy that makes it clear what problems you can help people solve and what they can expect if they fill out the form.
Notice these numbers above the form? They indicate that this form has multiple steps to it. We wanted to point this out as an example of good intentions executed incorrectly.
Multi-step forms have been shown to increase conversion rates. People like to finish things they started but sometimes the hardest thing to do is getting started to begin with.
Mutli-step forms overcome this by reducing the number of fields a visitor has to fill out to get started.
On the first step of this form, all the person has to do is enter their first and last name (having it as one field that you parse out on the backend would be better).
Once they hit next, they’re prompted to enter more information like their phone number and email address.
After that, they’re prompted to let the firm know a little bit about their case, such as what type of accident they’ve been in. This can be a good way to reduce the number of low-quality submissions you receive but you have to be careful about the language you use.
The Champion Firm uses checkboxes that include things like professional negligence, premise liability, and wrongful death.
Your average person does not know what those mean. If you’re going to ask people this, use terminology they can understand (e.g. were you injured on someone else’s property).
Also, if you’re going to go this route—be prepared to lose out on a lot of valuable leads. Firms that do this are doing it for themselves, not their clients.
You may end up with more junk leads but it’s not your client’s job to qualify themselves, it’s yours. If you’re going to add qualification steps, using branching logic (Typeform is a great tool that can make the experience great for both you and your visitors).
Don’t use numbers above the form like this if you’re using multi-step. Some visitors will see that and think they’re supposed to click on them. Use a progress bar or progress percentage indicator instead.
Lastly, when a visitor clicks next, the form should move to the next step using a technique known as AJAX (you can ask your web developers about it). When you click next on this form, it essentially reloads the page, causing a jumping motion that is jarring. This can easily confuse people, cause them to get frustrated, hit the back button to return to Google, and contact the next firm on the list.
Blog Posts
If you’re investing in SEO, a majority of your visitors first interaction with your website will be through a blog post.
As such, your blog post template should receive as much care and attention as your home page.
Bad: Don’t use large hero images and headlines at the top of your blog posts. It pushes the content (what people came to your page for) below the fold.
As a general rule of thumb, the sooner you can get people reading the content on your page, the better off you’ll be.
Unfortunately, it’s not uncommon to see examples like this where everything looks great on desktop but neglected on mobile (the exact opposite of how you priortize user experience).
That being said, once you get into the meat of the page, things get better.
The Champion Firm keeps their paragraphs short and breaks them up into bite-sized chunks. This is best practice as no one wants to scroll through a long wall of text.
Use clear subheadings like this throughout your articles to make things more scannable. One thing this firm could have done better is to make their subheading about the common reasons claims are denied slightly bigger than the reasons themselves (e.g. disputed liability).
It’s best practice to make things scannable so readers can quickly find the information they’re looking for. Unlike home pages, service pages, and landing pages, don’t be fooled into thinking that visitors should read every word.
The goal of your blog content is to help people find what they’re looking for so as fast as possible so they can decide what to do next—which can often include contacting your firm.
Service Page
The headline on service pages and location pages should make it clear that the visitor is right where they want to be. The Champion Firm does this in a straightforward way, making it clear that this page has something to do with car accident lawyers in Marietta.
Right below that, they introduce trust signals by calling out how much they’ve won for people as well as objection-handling by making it clear you don’t have to pay them until you win.
The call-to-action to get a free consult is above the fold, which is great. However, it’s partially obscured by the live chat widget. That’s bad.
Never, under any circumstances, should you obscur your calls to action if you can avoid it. Getting people to click that button is literally the most important thing you want people do.
If you’re thinking, “What does it matter if they start a chat with me instead of clicking the CTA?”
Fair enough.
But how about this, instead of obscuring the CTA with your chat, why not have your CTA trigger the chat widget to appear?
Crouse Erickson
Now that you understand some of the reasoning that goes into website design best practices, we’re going to succinctly point out what each of these remaining firms get right, what could be better, and only expand on things that deserve special attention.
If you want more detailed breakdowns of each website below, let us know and we’ll revisit this article and update it (something you should also be doing to your own content every year as well).
Home Page
The CTA above the fold is good but the headline could be a bit stronger. More focus on the fact that Crouse Erikson is exclusively a family law firm could be more prominent.
Having social proof above the fold (especially on mobile) can be great. If you have client testimonials, we’d recommend using those instead of Avvo scores and other attorney awards. Potential clients don’t know what those awards mean and will relate to what other people say far more.
Blog Post
As you scroll through blog posts on Crouse Erickson’s, the navigation element that has options to contact them sticks to the top of the page.
This is a good practice to follow as it makes it easy for a visitor to contact you if they find what they’re looking for and decide they’re ready to reach out.
For blog posts in particular, it’s sometimes better if the contact buttons were the only element that scrolled with you and stuck to the top instead of the entire navigation, however.
In this instance, it’s alright since the navigation element doesn’t take up a ton of the screen’s viewport.
Gilormo Injury Law
Home Page
The headline for Gilormo Injury Law could be better. Phrases like “Fierce Advocates, Proven Results” are generic and put the focus on the attorney instead of the visitor.
Just a reminder: Every bit of copy should be visitor-centric, not attorney-centric. Talk about them, not yourself and you’ll win.
The home page does have a great video front and center though that includes testimonials from real clients. If Gilormo Injury wanted to improve their headline, they could review what their clients talked about and turn it into a more compelling value prop.
Having a contact form above the fold works great for location/service pages. When you add them like this to the home page it can be a bit too premature.
In this case, it works due to the video a visitor would ideally watch beforehand and learn everything they need to feel comfortable moving forward and contacting this firm.
Contact Page
Having a call button remain visible in the navigation on mobile is something a lot of firms forget about. Gilormo handles this effectively and increases the odds a visitor will use it instead of expecting them to open your navigation to find it.
That being said, you have to scroll 75% of the way down this page past several Google Map embeds to get to the contact form. Gilormo could improve the UX here by moving the contact form above the map embeds or adding a button that automatically scrolls the visitor to the contact form after clicking it.
The Levin Firm
Home Page
This headline may look attorney-centric at first, but it’s not. The implied message is that YOU can win if YOU hire Levin. It’s both client-centric and brand-centric—bonding them together in three simple words. 🤌
The Levin Firm displays a fantastic use of copy on their home page above the fold here. The paragraph below the headline is very client centric. It makes it clear to potential clients that the sole focus of The Levin Firm is to get their clients what they want.
Levin gets everything right here. Their primary CTA (call them) contrasts well with the background and has more prominence than their secondary CTA (free consultation).
It’s also placed right where a person’s finger would sit when using their phone—making it easy to tap. This is the level of attention to detail more websites should consider when designing their sites.
Contact Page
Every call button on this page will automatically trigger a phone’s call context menu when tapped. While some folks may have think they’ve overdone things here, it’s completely fine since this is a contact page and the primary reason a person visits your contact page is to…contact you.
Attorney Page
Attorney pages can be difficult to get right, but The Levin Firm does a great job here. Clients aren’t the only people who come to these pages, in fact, these are the main pages other attorneys visit when they’re trying to find someone to send a referral to.
Adding contact information for phone, fax, and email makes it easier for your peers to get a hold of you and send you documents when email isn’t an option.
If you’re a PI lawyer looking for a great example, The Levin Firm’s site is one of the best personal injury websites around.
What Makes a Good Law Firm Website?
Copy First
Getting your law firm’s website design requires a lot more than aesthetics and chest-thumping. The words on your page are the most important thing. If you don’t believe me, just take a look at this page with all of the words removed:
The pictures look great, but they’re meaningless without copy.
Obsession Over User Experience
User experience refers to the overall experience a viewer has with your website. If someone can’t find what they need, if it loads too slowly, or if the site seems hard to read or buggy, they’ll bounce off your page quickly. In fact, 88% of users won’t come back to a website where they had a bad experience.
Every time this happens is a lost opportunity to convert someone into a paying client.
UX Best Practices for Attorney Websites:
- Keeping what you say relevant for the visitor (e.g. don’t waste their time).
- Use images that are relevant to the copy (e.g. don’t just add images to fill in empty areas).
- Everyone talks about mobile-first, but after reviewing hundreds of attorney’s websites, it’s clear that most of them were built for desktop and tweaked to work on mobile. When you’re having a new website built, make sure the first mockups your designer shows you are the mobile versions.
- Make sure all of your CTAs work. If a user clicks on a button, they expect it to do something.
- Make sure you’re not crowding their screen with your chat widgets and other popups.
- Make sure it loads fast. People are impatient. Images can slow down loading times a lot. Have your developer make it so they load after more critical elements like the text and background color.
You’re staking your reputation, website ranking ability, and ability to convert people from viewers to clients based on the technical aspects of your site. Your law practice should stand out by showing an upfront investment in the technical aspects of your website.
Strong and Consistent Branding
Even though all the law firm websites above are unique in terms of region, practice area, and type of messaging, one thread runs through them all: clear and consistent branding.
Whether you’re a tough personal injury attorney willing to go to court or a family lawyer mostly focused on mediation and collaborative divorce, you can’t expect your clients to know that unless you communicate your brand and values upfront.
Similarly, choose photography assets that work well for presenting your firm’s approach to helping clients (bonus points if they’re client-centric).
Branding is about more than visuals though.
It extends to social proof such as feedback from clients and pages that demonstrate authority such as bios, about, and results pages.
Be aware that it’s a common thought to approach law firm branding generically with a “dark and brooding” presence.
If that’s not your vibe, don’t fall into this trap.
If you’re more of a friendly and approachable lawyer, lean into this to attract and convert clients.
If branding sounds too fluffy to you, just think of it like this: your brand is your reputation. It’s a reflection of who you are and your values.
You don’t keep attorneys around who don’t fit your core values, right? Think about that when it comes to your website too and you’ll be good to go.
The Right Content
The law firm website that wins is the one with that has the right content for the right visitor at the right time.
To do that, create a ton of useful content that the average person can understand. Educate them, explain how you can help, and make it simple to navigate between articles and topics so they can find the answers they need.
A user makes quick judgments about a law firm based on the website, so clean design and site speed are supported by great content marketing.
When a user wants to learn more about your law firm’s background, case results, and attorneys, your law firm’s website should display this material in a user-friendly fashion.
Key Pages to Include on Your Website:
- A homepage with a call to action (CTA) and links to social media profiles
- An about page
- Pages for attorneys/staff
- A place to house results/case studies/testimonials
- Service landing pages (for your practice areas)
- A blog
These pages work individually, but also enhance your entire online presence through their placement on your website.
Each of these matters because they tell a little bit more about you as a firm and the way you work with clients. On your homepage and about page, you’re explaining how you help your clients and how your firm sees the practice of law.
With pages for attorneys/staff and service landing pages, you’re doing a deeper dive into the qualifications of your team and the main legal issues within each practice area.
On your blog, this is your chance to answer frequently-asked questions and to present yourself as a leader in your service areas.
On your homepage specifically, focus on how all your experience, knowledge, and approach to the law leads to great results for clients.
Too many law firm websites make a strong case for the attorney qualifications, but miss the value of connecting with the reader’s needs.
Remember, you’re the guide in the client’s journey, not the hero of the story.
Make sure you have a way for visitors to easily contact you on every single page as well—especially on mobile. This needs to be easy to do 24/7 as well. Whether you use an answering service or have someone in the office clients need to be able to reach you easily.
How We Picked These Websites
The criteria we used to evaluate these websites included:
- Is the site’s purpose clear and easy to understand? Client-focused, simple copy that everyday readers can understand is best.
- Easy to navigate? While it’s ideal that visitors would do the primary action you want them to when they land on your site, you still want to make it easy for them to get around and find exactly what they’re looking for. Particular care to how this experience is on mobile is paramount.
- Easy to convert? Whether someone wants to submit a form, call you, email you, live chat, find your address, or download a checklist—the easier you make it for users to convert (i.e. do what they want), the better.
- Attention to detail on mobile (especially sitewide)? Every experience on mobile should be considered first. From text size to the placement of your chat widgets—it’s clear when a website was designed by professionals who care about user-experience instead of blindly doing what everyone else is.
If you know your website needs work and you’re not sure where to start, we’re here to help.
We’ll help you get your website experience, design, and SEO on the right track to rank on the first page of Google and convert visitors when they visit (just like we did for these other firms).
