Web Design

Redesigning a law firm’s website to meet mobile design and SEO goals.

I was approached by this law firm to help redesign their website for search engine optimization. They also saw that their mobile experience was a pain point for potential clients. Below was the state of their mobile and desktop experiences.

Project: Client Design project 2021
Role: Web Designer
Skills: Wireframing, front-end development (CSS), hi-fidelity wireframes, responsive design
Tools: Illustrator, Figma

Before: Web and mobile experience

Content heavy homepage, with multiple CTAs and large navigation system

Mobile experience entirely filled with navigation menu

After: Web and mobile experience

For the desktop experience, showcasing a hero that shows Seattle, straightforward navigation and a clear call to action

A mobile experience that isn't inundated with a long navigation menu

Deep dive into the design process

RESEARCH

I approached the research for the website redesign project three ways. Since they already had a website there was already a great foundation for me to study their current website analytics.

USABILITY TESTING

Reveals where users are experiencing barriers or confusion
Provides insight on brand impression

SEO CONTENT AUDIT

Analysis of content to bring it up to SEO standards
Provides direction for content moving forward
Click through rate on organic searches

GOOGLE ANALYTICS

Identifies activity on website
Determines popular pages and those not needed
Identifies main channels

USABILITY TESTING RESULTS

For the usability tests, I recruited 5 people from various backgrounds in profession and personal experience. I gave them a set of tasks to complete including: finding a page of content, confirming who the managing partner was, find the contact page and sharing their overall thoughts of the website. Some feedback below showed that the website was inundated with long forms of content, confusing to navigate, and not reliable.

TESTER FEEDBACK

“It feels very lawyer speak…If I was in trouble and needed to find myself a lawyer, I don't know if [the content] would resonate with me.”

“When you want to see a lawyer it's because you have a problem and are overwhelmed. The impression I'm getting here isn't the results I want from the lawyers.”

“They seem to have a broad range of services. I’m not sure if there's enough info on the homepage to explain offerings. I have an idea, but there isn't a focus.”

SEO & WEB ANALYTICS

The following data points helped determine that there’s a big opportunity to implement SEO principles into the overall content. Audience and behavior insights also determined how I should approach the design. With a considerable amount of people accessing the website via their mobile phones it was imperative to improve the mobile experience which in turns helps SEO too.

SEO

Average position: 39.
Average organic click through rate in 2021 was 1.6%

AUDIENCE

58% using desktop
40% using mobile; 60% of which are iOS

BEHAVIOR INSIGHTS

Average exit rate 55%; homepage is 48%
Average bounce rate is 68.4%; homepage is 45%

STRATEGY

SEO

Add alt tags to all photos
Clean up code that isn’t being used
Archive pages not being visited or used
Create a flatter navigation
Fix mobile errors

CONTENT

Create content hierarchy with headlines and bullet points
Make images bigger
Consolidate/condense content where appropriate
Maximize real estate on top pages
Clean up contact pages and add more access points on homepage

EXPERIENCE

Streamline navigation
Build out homepage so there is focused content and contact information on the page and in the footer
Clean up the blog and add live filtering and search functions
Edit images to fit mobile.

WIREFRAMES

To determine my initial wireframes, I created a proposed sitemap. The sitemap had a flatter navigation and streamlined the content so potential clients can find information fast and contact the firm quickly. Below are the resulting wireframes.

Lo-fi Wireframes

High fidelity mockups (90%)

I show clients 90% mockups to convey the main changes and impacts of the redesigns. I leave room for feedback to improve visual design and do more usability testing.

Homepage

Main changes here: stronger hero section with clear CTA, shorter navigation system, contact info and section on the homepage.

About

Added photos of all team members on one page verus a list of team members with no context.

Practice Areas

Practice area content is organized and clear. On the previous experience all of the practice areas were in the navigation system with no context.

Contact

Contact page has concise information and map as well as visual for parking. In the previous experience there were multiple emails and links to download the parking map.

FINAL THOUGHTS & RESULTS

This project was a good challenge or me as I leaned on an existing brand for the visual design and leveraged user research to determine ways to improve the website performance.

After 6 months the website saw:

67% increase in users
70% increase in sessions
48% increase in pageviews
31% increase in click through rate on search inquiries

My client and I agree that this is a win for their website that had tremendous opportunity in improving their mobile experience which impacts their SEO.

One challenge was distilling all the content to concise bites. Because they're a law firm, content and information needs to be thorough. Balancing that with ensuring the website met user needs was a challenge and I'm continuing to work with them on how to manage content that still meets SEO and will keep potential clients on their website.

back to projects

Page updated

Google Sites

Report abuse