The 2023 Guide for Law Firm Website Design and Development

Table of Contents

    Web design is obviously important.  We’ve come a long way from the Angelfire pages of the 1990s.  Today, web design is more sophisticated — and more demanding — than ever before.

    Different industries follow different (and often unspoken) aesthetic and content norms.  There is a large variance in how different industries present themselves — and attorneys and law firms are no exception to the rule.   This is due to several factors including how long the sales process is, the sophistication of the intended consumer, and they type of conversion you are seeking.  With that in mind, here are some website design tips for law firms.

    What sets our web design and development apart from other agencies is the conversion-first focus we take when developing a new project. Years of A/B and multivariate testing across multiple industries have allowed us to hone in on what drives leads for your law firm.

    We also are not the agency that provides a finished product consisting of an inexpensive and poorly customized WordPress template. We custom design our award winning websites from the ground up to not only work with your brand, but deliver a design you won’t be forced to redesign sooner than you would like.

    Focus on Conversion + Revenue

    We have launched hundreds of websites for attorneys and law firms of all types and sizes. It is something we know well. We have an extensive knowledge of the nuances in design, language and function across different practice areas and geographies. For instance, if your last website design agency didn’t have a conversation regarding the differences in your target audience’s usage of the word “attorney” vs. “lawyer” based on geography and practice, then they probably didn’t know enough about how potential clients convert in the legal industry. What you get in Majux is an agency that has first-hand experience and test-based knowledge in every consideration of what makes legal websites function at the highest possible level.

    Think About What Visitors See “Above the Fold”

    In the modern era of web design, the “above the fold” area is your first impression (screen) to get visitors interested and if you do not immediately grab their attention they leave and do not come back. This represents what visitors see when your website initially loads before they have to scroll down.

    Have you ever walked into a retail space in the real world and are not exactly sure what is going on? There are no signs, merchandise is everywhere, and you are not sure exactly where to find what you need. In that situation, you feel confused and your first thought is to get out of that room. That feeling where you want to flee in the physical world is the same feeling that your website visitors get if you do not immediately tell them:

    • What is the purpose of your website
    • What they are expected to do on your website

    Put Your Call-to-Action Button Above the Fold

    A call-to-action (or “CTA”) is the button or form that your site uses to entice visitors to complete a conversion action on your website. Conversion actions range depending on your practice area, target demographic and how your intake is built – it may be a button at the bottom of a lead generation form or it could be a click-to-call button in the header of your mobile site. You need to immediately and explicitly tell visitors what you want them to do and make it as easy as possible for them to find your button.  If they have to scroll, they may not find the button and then it is essentially pointless that they were even on your site.

    Personalize Your Site by Personalizing the Imagery Above the Fold

    Many law firm websites do this with what is called a “hero shot”.  The best definition of a hero shot is “the visual representation of your offer and can help people to gain a better understanding of what it is or what it looks like. ” Personalized images attract the eye and sometimes the best way to get the point across is to show the product or service, rather than just describe it. I find hero shots to be one of the most difficult aspects when clients are looking for conversion rate optimization. It is easy when the service has a visual aspect like when I was working with a cookie company, but it is significantly more difficult when I work with companies such as life insurance. Some general tips are:

    • Try to avoid using stock photos
    • Show your team or a client in action
    • Make the image as clear and professional as your budget allows

    Provide Good Content

    This might seem like a no-brainer — of course good content is preferable to bad content — but the challenge comes once you start to think about what “makes content good” for your intended consumer.  Good content is:

    Be Accessible

    When you hear the word “jargon,” every head in the room turns toward the attorney.  There’s even a word for law-related jargon: legalese.  This is simple to avoid on your site – simply avoid legalese.  Most online content is not geared towards referrals from other attorneys; it’s ultimately for a potential client.  Those clients might be business owners, professionals, or construction workers, but whatever they do, there’s a good chance they won’t be as well-versed in the often baffling intricacies of legal language as a trained attorney.  Don’t write for your peers — write for your audience.  You can do this and still convey that you know what you are talking about.  Some things to think about are language that might be more common for your audience – for instance, we previously wrote a blog post about how the word ‘lawyer’ is searched for much more often than ‘attorney’ within certain practice areas.  Be conscious of these types of intricacies and play to your audience.

    Be Relevant and Clear

    People are coming to and staying on your website for a reason: there’s a topic they’re interested in, and they think you might have the answer.  Don’t disappoint them with boilerplate fluff.  Provide hard information: facts, procedures, strategies, and fees.

    Include a Blog

    If a topic exists, chances are there’s a blog dedicated to it.  Our internet-savvy society has come to expect blogs from “credible” websites.  But blogging is more than just an audience expectation.  Blogging actually serves a few different practical purposes, such as:

    • Providing SEO and link opportunities.  Blog posts are a great way to shuttle visitors around your website.  Link to other pages within your site by using anchor text phrases that are relevant to your practice or resource pages (e.g. ‘Los Angeles assault attorney,’ ‘declaring bankruptcy in Ohio’ linking to those practice areas).  This is one of the basics that let Google know a little more about what your site is about as well as directing the reader towards pages that are set up to convert them into a phone call or email.
    • Supplying “hot” and interesting information.  The fact of the matter is, a web page about how filing for bankruptcy works is not going to blow up and turn viral.  That’s precisely where your blog comes in.  While practice and resource pages supply relatively unexciting but useful information (at least from the internet’s perspective), your blog posts can be nicely separated and set up to seize on the latest and most interesting content to generate a boost in traffic.

    Allow Easy Navigation

    Nothing is more frustrating than a site full of broken links and information overkill.  Websites need to be clean, smooth, and easy to navigate.  With that in mind:

    • No matter where a visitor travels within your site, they should always have easy access to the home page, contact page, and other important links (i.e. any pages you want to focus on directing traffic toward).  Keeping a consistent panel of those links across the top of your site, for example, is a great way to ensure that visitors will never be stranded on an unlinked page.  It is also accepted that visitors have come to expect certain pages be located in certain areas of your site.  For instance contact pages should always be linked to from the footer as well as the far right of your main navigation bar.
    • In addition to always providing a “way home” (and elsewhere) for your visitors, attorneys should be mindful of how much information they’re supplying.  People shouldn’t have to put in effort to sift through mega-paragraphs.  Break up your text with images, numbered lists, and bullet points.  Keep your font professional and easy on the eyes in terms of typeface and color scheme.  Make sure text isn’t overflowing into the margins, or overlapping itself.

    Don’t Neglect Imagery

    Too often, images go neglected when it comes to web design outside the scope of industries like photography, where image explicitly reigns supreme over text.  After all, attorneys aren’t in the business of making pretty pictures.  Where law firms are concerned, pictures are just fillers, right?


    It’s true that in day-to-day business, attorneys care little for photographs (unless they’re evidence in a case).  But guess who does?  Your clients.  To outsiders, the world of law is a challenging one to access: legalese, legislature, judges and juries present a daunting barrier to any layperson.  Images are reassuring.  They put a human face on an intimidating realm that most people don’t have any experience interacting with.

    That said, the “human face” you choose to employ on your site is just as important as including one (or several) in the first place.  So what makes an image good or bad?

    • DON’T: use stock photos.  No matter who you ask (except maybe stock photographers), it’s a widely-held opinion that stock photos are cheesy at best, and downright surreal at worst.
    • DO: use photos of your staff.  What’s more appealing: the fake family that came with those new photo frames you bought, or the real people you’ll be replacing them with?  Using photos of actual partners and other staff members at your firm helps clients to feel like they’re making a connection with you and your firm.
    • DON’T: use grainy, poorly-lit, low-res photos.  In this day and age, there’s no excuse for tiny, fuzzy pictures.   Even a cheap camera can produce large images with high quality.
    • DO: use clear, sharp, high-res photos instead. 

    Stock Imagery vs. Personalized Imagery – We Tested it

    We set out looking for hard data regarding the use of stock imagery on the front page of legal websites.  While performing a UX survey on two versions of a website, we noticed that many of the participants had a particular issue with ‘trustworthiness’ and in particular, the trustworthiness of the version of website that was using stock imagery.  We then set up a live A/B test where the only difference between the two sites was the use of stock imagery vs. a professional photo of the actual attorneys.  Each A/B test had a target of 100 conversions in each set.

    We first noticed the stock imagery issue when we were testing user experience on two different websites in a small focus group.  We had the focus group to fill out a survey after being presented with each version of the site and navigating around for a short period of time.  What happened was that we saw a higher approval rating with the site using images of the actual attorneys.  Some of the visitors who viewed the stock photo site commented that they would ‘need more information before they would hire that attorney’, and also described a feeling of ‘mistrust’ based on our question about how trustworthy the attorney seemed.  The majority of the people presented with the version of the site using real photos did not choose those options.

    We then set up two versions of a website (one using stock photos, one using high quality stock photos) and ran both versions through an A/B test.  The goal was to measure the total amount of traffic it took each version to reach 100 conversions.  The data very much supported our accidental findings from the focus group.

    I suppose it seems intuitive, but the data from the A/B test supported our theory that those who viewed the version with actual photos generally trusted the firm more, and seemed to need less of a push to engage an attorney than those who did not.”

    Mobile Web Design

    What sort of “response” is the term responsive web design referring to?  The response of a web layout to user input: that is, a website should respond to its visitor depending on factors like the type of device, browser, screen size, and even device orientation.  For instance, have you ever had to physically turn an iPad on its side because a website was displaying in the wrong direction?  It was annoying, wasn’t it?  Maybe it even left a bad taste in your mouth about the site you were visiting.  The same thing can happen to your clients if you neglect incorporating responsive design into your site.  So how can you put responsive web design into practice?

    • Test your site on different devices.  What looks great on a huge desktop screen might be cramped, ugly, or downright impossible to navigate on a comparably tiny iPhone screen.  As more and more people use mobile phones and iPads to access the web, device and platform optimization is more important than ever.
    • Try different layouts.  As technology grows, web design has become more flexible and customizable than ever.  Experiment with different layouts for your site, whether that’s adding and removing columns, changing font size, or testing different color palettes.

    Conversion-Centric Design

    Conversion is your friend.  Conversion is something you want to maximize.  But what, precisely, is it?  When a customer visits your website, it’s great that they’re there and all… but ultimately, you want them to do something (as opposed to take a brief glance, and then bounce away).  For a retailer, the goal would be to have the visitor buy something.  But for an attorney, who isn’t selling a product, conversion manifests differently, typically either as a visitor submitting a form (e.g. “Contact Us”), downloading a file your site might offer (e.g. “Guide to DUI Laws in PA”), sending an email, or signing up for a newsletter.

    Now that you understand what conversion is, how do you boost your conversion rates?

    • Be accessible.  A visitor should face absolutely zero hindrances when trying to navigate around your website.  The harder it is for that visitor to make it to your “Contact” page, the less likely they are to actually feed into your conversion rates.
    • Be factual.  A blank form that simply says “Contact Us” doesn’t give the visitor very much motivation to submit.  What will motivate them?  Provide information about what they can expect.  Display physical addresses.  Point out that your consultations are free and/or confidential.  List the hours that attorneys are available to take calls.
    • Grab attention.  Now, that doesn’t necessarily mean load up your “Contact Us” page with flashing lights and annoying sound effects.  (Please, please don’t do that.)  It does mean that a visually pleasing page is more likely to hold a visitor’s attention than a dull-looking page — and the longer they pay attention, the more likely they are to click that button.
    chat bubbles

    Let's Make Every Month Your Best Month

    • This field is for validation purposes and should be left unchanged.