Mockingbird’s Approach to Building Websites

We are going to go over the tools and techniques used to make Mockingbird custom websites and how it helps us achieve our technical metrics and goals. We are constantly researching and trying to improve our build process. As more techniques and tools come out, we start learning how to incorporate them into our process.

What are our goals?

  1. Site Speed – we aim for all websites to load 3s or below (without third party scripts)
  2. Accessibility – We clear the AA Level of the Web Content Accessibility Guidelines
  3. Sexy and clean – sometimes, clients decide to leave us. When they do, we want to make sure whoever takes a look under the hood of the theme can easily do what they need to do.

What theme are we using?

  1. Sage 9 Theme – The sage theme comes with a lot of tools baked in for advanced WordPress development.
    • Blade Templating Engine – stay DRY (don’t repeat yourself) by using Blade templates which makes it easy to organize code so developers can quickly find what they need and prevent unneeded code bloat.
    • Webpack – we can write JavaScript and SASS that can be easily compiled, minified, and concatenated to reduce the size of the theme.
    • JavaScript Routing – combined with Webpack, we can dynamically load JS files on different pages to reduce load size on each page.
    • Automatically optimize theme images – all image files within the theme get compressed and minified for production.
  2. Tailwind CSS – the never ending debate of CSS structure and conventions can be tiresome. After some long consideration, we landed on tailwind, which is a utility first approach to writing CSS.
    • We don’t have to think of clever names for classes
    • Easier to scale vs other methodologies where you can easily repeat yourself such as adding borders or shadows to elements.
  3. Blade SVG – a way to easily incorporate SVG files into the website.
  4. Purge CSS – we configure a script to run throughout the site to purge all the extra CSS classes that aren’t being used, therefor reducing the file size.
  5. Lazyloading – we have created a custom implementation to enable lazy loading so pictures only load when they are needed.
  6. WP-CLI – installed on our local environments and hosting to easily manage things or run scripts on our projects.

What plugins do we use?

  1. Soil – cleans up all the extra junk WP likes to add to websites when rendering.
  2. Advanced Custom Fields – this is the only way to easily extend your WordPress customization.
  3. Query Monitor – used during development only so we can watch our calls to the database and see anything that is being resource intensive.

What tools are used in QA?

We want to measure how we are doing with everything above so we use a few different tools to measure.

  1. Wave – an accessibility website or extension that scans your pages and displays any accessibility issues.
  2. GTMetrix – a website speed analysts tool
  3. Google Lighthouse/Devtools – another tool that rates your website on site, speed, and accessibility.

Creating Effective PPC Landing Pages

Earlier this year, emarketer released a report stating that 2019 will be the first year digital ads surpass traditional ads. A claim was also made that by 2023, 2/3 of all advertising will be digital. If your law firm is not already putting the majority of advertising into reaching potential clients online then you’re already behind your competition.

Because pay-per-click encompasses such a large amount of the digital ad spend for our clients, we’re constantly trying to refine our designs and create websites that will perform well when it comes to converting your online ad spend into actual new clients. Here’s an overview of our process and what we try to convey on a successful PPC landing page.

After hours of external research and testing our creations, we have laid out our process for creating law firm PPC landing pages.

Determine Your Audience.

The first step, as it should be with any marketing material, is determining your audience and how we can appeal to their emotional desires. How we write copy is very important and just tweaking an ads copy can drastically increase click through rates and increase conversions on your landing pages. Once we know the audience, we can start the trust enhancing design.

Build the Landing Page

Now we know who the audience is, it’s time to think about the page structure and design of the landing page. We want the page to load fast, while gaining the user’s trust enough that they’ll want to contact your firm. When we create each landing page, we keep these three principles in the back of our heads:

  • Keep it minimal and uncluttered.
  • Each section should appeal to the user’s desires and reflect the search they conducted when finding your ad
  • The page should load as quickly as possible.

Header – Contact Bar

The header will serve more as a contact bar and an internal navigation. Your PPC landing page will not link to any external pages. We want to keep visitors on the landing page and emphasize contacting you on this first visit to your site. We also want your phone number and/or a contact button easily visible at all times. We will keep this fixed on the page so it’s constantly visible, but small enough that it’s not distracting users from your content.

Section: 1 – Establish Your Value Proposition

You want a marketing hero that has everything the client needs to contact you. This includes an appealing headline and/or copy that establishes your value proposition, imagery, and a call to action, that all appeals to your user’s desires.

Section 2: Build Trust

We have the user’s attention and they are interested in your value proposition, but they want to know who you are and why they should trust your value proposition? Section two should be a brief “about your firm” and clearly communicate why the client should trust you. This is a great place for an awesome testimonial or award. Just don’t overload the user with how awesome you are. Pick a few standout items that reinforce the values you’re trying to convey.

Section 3: Explain How Your Value Proposition is Unique

This section is to explain how awesome your firm is at meeting the desires your client is trying to fulfill. How does your firm stand out from the competition? You should use a short paragraph on how you stand out and include a result or two that backs up your claims.

Section 4: Encourage Contact Form Submissions

Buttons will also be in different sections that will anchor to this capture form section. Here we want a very simple form that captures name, email, and a quick description of the prospect’s issue or problem. We just want them to contact your firm so the intake team can handle the rest.

Test the Landing Page

It’s always important to test your landing pages. Play with copy, imagery, and placement to see what works better for your audience. You can easily (and should) run A/B testing on different versions of your landing page. Every audience is different and tweaking to get your maximum conversions is a must. Only data can prove what is working.

Why We Start Design Projects with a ‘Discovery Phase’

We start every digital project with a discovery phase, which is an initial research period that will help provide structure during the design process. This research phase provides propose and direction to both us and the client when creating a digital solution. The discovery phase also helps identify potential roadblocks before we start designing or building a website and allows for more informed decisions throughout the cycle of the project. We don’t just want to build what a client asks us to build, we aim to build a successful product that aligns with the client’s business goals, appeals to their users, and helps them stand out from the competition.

How do we do this at Mockingbird? We break down the discovery phase into three categories.

Business Goals and Client Perceptions

  • Business Goals
  • Internal Perception

We start the conversation by finding out where the client falls within their current market and where they’d like to be headed. This requires an understanding of their current business goals, relative strengths and weaknesses, and competitive advantages within their industry or geographic area.

We have a client questionnaire that goes over internal perceptions to help identify any unique points that make a firm stand out and appeal to potential clients.

User Behavior and Customer Desires

  • Demographics
  • User Behavior Through Analytics

Next, we want to answer the question, “Who are we designing for?” We gather as much information, mostly by gathering analytics and running our own report, to define who the client’s current website users are and how can we appeal to them. No matter what field of practice, hiring an attorney is a fairly emotional ordeal. We want appeal to the right desires. We want to imagine the website from their perspective. In doing so, we can appeal to their emotions and make it as simple as possible to contact your firm.

Market Landscape and Opportunities

  • What Competitors Are Doing
  • Your Position Within the Market

Finally, we want to find the room for opportunity. What are competitors doing? Are they all doing the same thing? Is the client’s market saturated with law firm websites showcasing the same interchangeably well-tailored lawyers with crossed arms, touting their millions of dollars recovered? We don’t want our clients to blend into the crowd of attorneys, we want to show off how each firm is unique and prove they stand above the competition.

By taking a step back and looking at the entire landscape before starting any of the actual site mockups we’re able to take a more data driven approach to the design process. It’s not enough to build a website that loads fast and looks great. The true differentiator comes from creating a site that sets each client apart from their competitors, aligns with the emotional needs of their clients, and helps them achieve their firm’s business goals. The discovery phase is a key first step and helps build the foundation for each successful website.

Taking a Content First Approach to Website Design

The main goal of a law firm’s website is to create a solution that meets their target audience’s needs and encourages conversions by getting visitors to contact the firm. Understanding your target audience and your firm’s business goals is the driving factor behind website content. We want to convey your firm’s narrative in a way that’s clear, concise, and emotionally appealing to potential clients. Below are key reasons why your firm should start every website project with a content first approach.

Tackling content first helps shape design and saves time.

Agreeing on content structure helps eliminate two major obstacles: creating new content to fit the design AND needing to edit old content to fit an updated design. Both of those events are avoidable if you create a design with content in mind. This can cut down on rounds of revisions where you may end up making small content changes and allows the designer to present your content visually in a way that appeals to the user’s emotions and conveys your firm’s story.

A solid content plan speeds up the workflow of the project.

Frequently, the biggest road block when creating a new website for a client is waiting for content. Establishing the structure and content needed before the design eliminates this obstacle so you don’t end up waiting on content decisions when the site is almost ready for launch. Developing a plan for content at the start of the project will help clarify who will be creating new content, when it needs to be created, and how that content is going to be structured before anything is designed. Instead of waiting in the middle of a project, we establish this up front for an optimal workflow.

A content first approach makes for a better user experience.

When the design is built around the content, the user has a consistent experience across the website. All practice areas look uniform and aren’t structured differently, location pages have all the necessary content for Google My Business and are displayed the same. We want the user to know they are on a location page or a contact page, not guess because one office’s content is displayed differently than another. Uniformity not only helps speed up the website because there’s less code, but when users navigate the site everything reinforces one uniform message about your firm. With a content first approach, we know what to display from mobile to desktop and how the content will scale in different views and sizes.

Content planning provides scalability and structure moving forward.

Often, content will be managed post launch by someone in your firm. Having the content structured and following an outline helps scale the website in consistency and design. Someone who wasn’t present during the design process can manage the content afterwards without missing a beat.

In short, a lot of the difficulties that pop up during the design and development process can be mitigated if you spend some time planning out what you want to convey with your website, and more specifically, what type of content you’re going to use to communicate that message.

Jeffrey Zeldman Quote on Content in web design

Quote from Jeffrey Zeldman, a legend in the web design world.

Law Firm Branding: Crafting Your Brand Image

Think of your firm’s brand image as the person we want to bring to life. A brand image is crafted from doing research into your current market bases, potential markets, and internal perceptions. We craft the brand image following an intensive research phase. Not only do we want to study the market and users, but we also need to study the law firm and how their employees and clients view the firm’s strengths and weaknesses.

Below is an overview of our process and the steps involved in defining a firm’s brand image.

Research Phase

As a marketing company with the goal of branding a law firm, we have a lot of questions to answer. We want to base your law firm’s brand on actual data and analysis, not just a hunch. We need to dig deep and discover who the market is, where your law firm stands, and how we can engage with that market. What differentiates your firm from other law firms? Where is there opportunity? These are questions we need to answer in the research phase.

Market Research

We want to discover and then define the current community where your law firm is established. We also want to look at potential markets and how to expand your brand into these markets. We want to define and answer:

  • Who is the current market? What are their hobbies, interests, and overall demographics?
  • Who are your current clients? How do they perceive your law firm?
  • What are the needs and desires being considered when your services are sought out?

Company Research

After defining the market, we want to see where your law firm can position themselves for ultimate success. In order to do so, we need to discover who the current brand of the law firm is. This includes:

  • Identifying company values and goals.
  • Assessing internal strengths/weaknesses.
  • Comparing against your competitors.
  • Identifying where your firm can bring the most value for clients.

Unique Selling Proposition

Once the research is done, it’s time to bring together the analysis. We understand your market, your internal perception, and where the competitors stand. With this knowledge, we can define your law firm’s unique selling proposition. This is when we define what actually makes your firm different and how we can position the firm to your potential clients.

Brand Personality

It’s time to start bringing the brand to life! Based on the research, we need to determine the brand personality. This will reflect the brand’s messaging, identity, attitude, and overall how the brand will be perceived from here on out. We take our findings and then select the appropriate archetype that lines up with our completed research.

Selecting an Archetype

Archetypes were created by psychologist Carl Jung, and in marketing, we use them to define how we will create a deep connection between your law firm and its users.

Defining the Brand Image

This is where we tie each of the above items together. We’ve done the research and agreed on a brand personality that will reflect your law firm’s unique selling proposition. This brand image will be laid out in the first part of your branding book to use for marketing purposes. It will define your brand personality, tone, messaging, and brand essence.

Brand Essence

The brand essence is the heart of the brand. Based on the personality defined, it’s time to write out to the world who your law firm really is. We want a finalized version of what makes the brand beat. Here we write out the values, mission statement, and vision statement.

Brand Identity

Our next step is to visually create your brand based on the image we have developed. Once we’ve crafted the heart and soul of your firm, it’s time to bring it to life.