The Problem:

Honest Grace Legal (HGL) is an Australian law firm specialising in personal injury, family law, and migration law. Clarity and trust is vital for potential clients, but their existing website was visually outdated and plain, creating unnecessary friction. Critical information about fees and services was missing, while lengthy inquiry forms were intimidating. The site was also built on a static platform with no CRM integration, making marketing automation impossible. To remain competitive and attract more clients, HGL needed a better digital presence and system.

The Solution:

1. Do a full-scale redesign of their website to make it more engaging, improving on the content, structure and visuals

2. Migrate their website to Hubspot, unifying marketing, sales, and service under one platform

3. Equip the HGL team with the tools and knowledge to update and maintain the site independently in the future

Timeline:

Nov 2024 - March 2025

Role:

Lead Designer

Responsibilities:

UI/UX Design, User Testing, Hubspot CMS Migration, Client Training

Before any design work began, I conducted a comprehensive audit of the existing HGL website and analyzed three key competitors in the Australian personal injury and family law space.

I presented these findings to the HGL leadership team, highlighting the gap between their current digital presence and competitor standards.

Key Takeaways:

• More CTAs ("Book a Free Consultation" throughout the site)

• Live chat / chatbot for preliminary questions

• Mega dropdown menu + double layer navigation

• Clearer "No Win, No Fee" messaging for personal injury

• Detailed process explanations

• Free claim check

• Specific claim scenarios (Who would need to file and why)

• Knowledge base (News and success stories)

• Consistent use of brand colors to make website stand out

• An "About" page with more information about the firm (E.g. Why us)

• Team members profile page (With information like qualifications, areas of practice and languages)

• User-friendly and responsive

The main goal of these changes are to build trust through clarity while driving conversions and engagement, by equipping visitors with the right information and creating clear, consistent opportunities for them to get in touch.

Based on these findings and their own desires, the HGL team created a sitemap for us to use in the website.

ReuSable Modules:

While designing the site, there were some platform constraints to take into consideration. The redesigned site would be built on HubSpot using its native drag-and-drop builder. This meant the development team would be custom-coding modules that can be reused based on my Figma designs and not just implementing static pages. This fundamentally shaped our design approach. Since the modules would need to accommodate variable item counts (e.g., different numbers of sub-services, icons), they were designed with scalability and responsiveness as the most important factor. The focus was creating easy reusable modules that would allow HGL's team to expand on and maintain the site by themselves in the future, without ongoing developer support. This was especially important, as they had expressed their desire to keep adding new content to the site and possibly make changes.

Examples of Reusable Modules:

Hero Banner (multiple variants for different pages)

Accordion

Image and Content

use of Templates

Given the scale of the site (multiple practice areas that each have sub-pages, blog posts, resources, and team bios), I created page templates in Figma rather than designing each page individually. Each template was designed as a modular canvas, so sections could be added, removed, or reordered by the client post-launch without breaking visual consistency.

Templates Developed:

• Homepage

• Service Page

• Sub-Service Page

• Team Overview

• Team Member Profile

• Success Stories

• Blog page

• Contact

• About Us

Visual Design

I used HGL's existing brand colors, which are notably bright and welcoming. This, along with the firm's focus on personal injury and family law and their intimate size of their firm led me to go with a more friendly and approachable design, with a strong emphasis on empathy. The goal was to avoid an overtly formal and corporate look, yet still convey credibility and professionalism. 

The font I chose also reflected this approach. Rather than using a generic sans-serif like HGL had been using before, I decided to use a modern sans-serif with a warm and comfortable feel while also maintaining excellent readability. 

Content strategy

To improve engagement, I utilized strategic CTA placements positioned at natural decision points across most of the pages. I also decided to include the inquiry form on all the pages, so visitors would have easy access to it and not have to specifically go to the contact page. I also incorporated a lot of internal linking throughout the site, connecting related practice areas, success stories, and resources for better SEO practices and to improve information architecture.

The designs for each template were based on the content that the HGL team provided us with, with the assumption that the remaining pages would be following the same content format.

Mobile Design

The desktop version had rich, multi-section content designed to build trust and provide comprehensive information, but HGL did not want the mobile version to be too long to prevent the need for prolonged scrolling.

Their concern was mainly regarding the homepage, so we ended up removing a few sections they deemed to be less important, like the ‘Why Choose Use’, ‘Where Change Begins’ and ‘See Our Success Stories’ on the mobile version.

We also decided to change the service card layout to an accordion style expandable layout, to make it more condensed.

Chatbot

We initially planned to implement a hybrid chat solution, with a live chat staffed by team members during business hours and automatically switching to an automated chatbot after hours. Unfortunately, that ended up not being possible using Hubspot, so we pivoted to just using a chatbot, setting up a chat flow with quick reply options based on the inquiry form. However it was a simplified version with fewer fields, designed specifically to encourage users who may be overwhelmed by the length of the form to share their questions and concerns, allowing for HGL to collect prospect information. Assigned team members would respond to all chat inquiries within 24 hours, hopefully capturing more leads.

smart content

We implemented HubSpot's smart content functionality to dynamically personalize the homepage header based on traffic source. For Example: A visitor arriving via a HGL Family Law Google Ads campaign would see targeted header copy relevant to family legal needs—rather than generic homepage messaging or injury law messaging.