Scalable, Content-Driven redesign for a National Law Firm
HeplerBroom
HeplerBroom is a multi-office law firm with a large volume of attorneys, practice areas, and editorial content spanning legal insights, case results, and blog posts.
I led the end-to-end redesign and development of their website, working closely with the client to deliver a flexible, content-driven experience— designed in Figma, developed in WordPress + Elementor
Visit Website —>
Tools
Figma
WordPress + Elementor
Custom CSS/JS
Adobe Creative Suite
team
UI/UX Designer & Developer (myself)
HeplerBroom Leadership
Director of Firm Relationships
Business Support
Social Gaines (marketing company)
My Role
UX Strategy & Information Architecture
Wireframing & Prototyping
UI & Interaction Design
Front-end implementation (Wordpress + Elementor)
Timeline
~3–4 months (Design → Iteration → Development → Launch)
Business Impact
This redesign transformed HeplerBroom’s website from a fragmented, difficult-to-maintain system into a scalable, high-performing digital platform. Key outcomes included:
01 - Improved Content Discoverability
Users can now easily navigate between attorneys, practice areas, and related content—reducing friction and improving engagement.
02 - EFFICIENt SCALability, future-proofed architecture
With 90+ attorneys and 1,500+ posts, the new system leverages dynamic relationships to eliminate manual upkeep and reduce internal workload.
03 - STRONGER LEAD GENERATION POTENTIAL
Clear pathways between expertise (Practice Areas) and people (Attorneys) better support user trust and conversion.
The Challenge
The existing website suffered from fragmented content across multiple post types, weak connections between attorneys, practice areas, and insights, poor scalability and heavy manual maintenance. But the deeper challenge was structural:
A COMPLEX WEB OF INTERNAL RELATIONSHIPs
The site functioned as a dense web of internal linking between Attorneys, Practice Areas, Blog posts, Newsroom content, and Case Results. This created a critical problem—there was no starting point for implementation—and no scalable system governing how these relationships should work.
Without a defined structure:
Content relationships were inconsistent
Updates required manual linking
Scaling the system would exponentially increase complexity
My Process
01
Research & Discovery
I conducted a full audit of the site’s structure, content types, and relationship patterns.
KEY INSIGHTS
Users think in terms of expertise (Practice Areas), not content categories
Attorneys are central to credibility, but underutilized in navigation
Content relationships existed—but lacked a consistent system
The backend structure did not support scalable linking logic, and relied instead on heavy manual editing for a content-heavy, widespread site
02
Design Exploration & Ideation
The client had asked for three different iterations of key site pages (Homepage, Blog, Attorney Archive, Individual Attorney Profile, Practice Area Archive, and Individual Practice Area Page).
They wanted high-fidelity options to choose from, so they could pick and choose which design directions (layouts, content hierarchy, iconography, etc.) they liked best. I developed three distinct design and structural iterations in Figma for them to choose from.
Learning
While the client appreciated having three design options to choose from, this was a heavy task just for ideating on UX structures. Furthermore, by the time I got to the third iteration of a given page, I found myself building certain components/sections that I knew would not work from a UX perspective. For example, building out an accordion for a specific section to differentiate from the prior two designs, despite knowing that a tab system reduces vertical scrolling and is more appropriate for the content they need to include.
While these extraneous designs were a good exercise, they taught me that sometimes limiting options for a client is a more appropriate route than giving too many options. A slimmer approach would have saved time, and also alleviated decision fatigue for the client.
03
Information Architecture
To solve the complexity of the existing system, I shifted the approach from page-based thinking to system-based thinking.
key ia decisions:
Consolidated content under a unified “Attorneys” ecosystem, which established attorneys as primary navigation anchors.
Defined a scalable relationship model using Custom Post Types and Advanced Custom Fields in Wordpress + Elementor:
Attorneys ↔ Practice Areas
Attorneys ↔ Content
Practice Areas ↔ Content
This created a single source of truth for how content connects across the site.
04
UX Strategy
from manual linking → system-driven relationships
One of the biggest breakthroughs in the project was shifting from Manual internal linking → Dynamic, system-driven relationships. This eliminated the need to manually manage the "web" of content. With 90+ attorneys, 23+ practice areas, and 1500+ pre-existing blog/news/results posts, this dynamic linking system was necessary for broad scalability across a wide array of content.
Using ACF:
Attorneys are assigned to Practice Areas once
Content is linked to attorneys via relationship fields
Pages automatically populate based on these connections, the layout for each defined by a template built for each post type (Attorneys, Practice Areas, Blogs, Firm News, Case Results) in Elementor's Theme Builder.
PROGRESSIVE DISCLOSURE
To manage content density:
Tabbed interfaces (Overview, Attorneys, Related Practices, Case Results, Insights)
"View More / View Less" toggles built using custom CSS
Conditional logic to hide empty sections
05
UI Design:
The visual system was designed to support clarity within a complex content ecosystem. This included:
Clean, highly legible typography
Modular card-based layouts
Consistent spacing, padding, and alignment
Subtle interaction patterns
UI Highlight 1: Attorney Profiles
Centralized professional identity, built using interlinking ACF Fields in Elementor
Clear connections to practice areas and integration of related content (insights, case results, blogs)
UI Highlight 2: Practice Area Pages
Tabbed layout to reduce cognitive load
Dynamically populated content
Scalable across started by creating custom icons for each benefit category, using simple, clean shapes that still felt feminine and a bit fun.
UI Highlight 3: Insights & Content Lists + Filter Systems
Unified styling across News, Events, Blog, with custom filter systems for each post type for quick searches and easy access to content.
Improved metadata hierarchy for varied post types
Better scanability
UI Highlight 4: Author Attribution System (Blogs, Case Results, News)
Multi-author support
Avatar-based identity system w/ direct profile linking
Takeaway section on blog posts for quick summary of the article prior to a full read
06
Development Highlights
This project required aligning UX decisions with technical implementation.
key implementations
Custom Post Types (Attorneys, Practice Areas, Newsroom Posts, Blog Posts, Case Result Posts)
Advanced Custom Fields (relationship logic)
Elementor Theme Builder templates
Custom CSS/JS for:
Collapsible content
Conditional UI states
Dynamic layouts (e.g. post author attributions)
Key Learnings
System design is critical for content-heavy experiences.
Within that system design, relationships should be structured, not manually managed.
Solving scalability early prevents exponential complexity later, especially if the site is content-heavy.