P R O D U C T D E S I G N
Delta Dental - Invoice Comparison Tool
Invoice Comparison is an enterprise tool that allows users to compare group remittance files with the data stored in Delta Dental’s system to identify and resolve discrepancies within each month’s billing cycle.
P R O D U C T D E S I G N E R
Overview
Invoice Comparison is an enterprise tool that allows users to compare group 'remittance files' with the data stored in Delta’s system to identify and resolve discrepancies within each month’s billing cycle.
Previous Designs
Users visiting a law firm’s website are often facing serious legal issues and are seeking a trustworthy and reliable solution. If the website doesn’t inspire confidence, the firm is unlikely to see strong results.
Upon reviewing their previous designs, it was clear that there was no clear conversion strategy in place. The styling and calls-to-action felt disjointed and poorly planned, leading to a subpar user experience.
Home Page
Service Page
Lawyer Bio Page
Doing the Research
DEMOGRAPHICS
When we asked the client about their different user segments, they explained that, as a full-service law firm, they serve nearly every demographic. However, they highlighted that their top practice areas were federal employment law and military law, with many clients being former military members or government employees.
Upon reviewing their website data, we found that the age and gender demographics were fairly consistent across the board.
COMPETITOR ANALYSIS
To gain a better understanding of how to design Tully Legal’s website, I conducted a competitor analysis to compare industry trends and holistically define what constitutes a strong law firm website experience.
Establishing the Design
SITE MAP
By this stage of the project, I had a clear understanding of how to organize the site architecture. I created this sitemap to illustrate how information should be structured in the main navigation and to highlight which webpages should be prioritized.
BRANDING
To better understand the client’s vision, my team guided the Tully Legal team through a branding exercise, helping them define six key components of their brand: culture, voice, ideal customer, impact, feeling, and x-factor.
After compiling a list of adjectives for each component, we narrowed them down to the top three and then eventually selected one. This exercise played a crucial role in guiding our decisions, not just for design, but also for our content strategy.
STYLE GUIDE
We created three different style guides with varying color palettes and typefaces. Ultimately, we chose a color scheme that modernized the blue and gold theme from their previous design. We also updated their generic fonts, selecting Raleway for a more elegant look on headers and sub-headers, and Libre Franklin for its versatility in weights and readability in long-form text.
DESIGN CONCEPT
I wanted the new Tully Legal website to feel modern and trustworthy, a complete departure from their previous, copy-heavy, and outdated design. To achieve this, my team refreshed the visual design and collaborated with the client to define the new look.
VISUAL DESIGN
Below are a few examples of the visual design expanded from the style guide. Once we built the client’s trust and finalized the color swatch, we began conceptualizing key pages. We incorporated sharp design elements, images of iconic buildings, and patriotic backgrounds with bold blue overlays to maintain color consistency.
Working with SEO Strategy
SEO was a major focus in this project. I collaborated closely with our SEO team to understand their needs and ensure that our designs were aligned with their overall strategy.
Service Page
The image shown here is an example of a service page. These pages function as general landing pages for users searching for specific offerings from Tully Legal. When users arrive on this page, they are prompted to select a location from the dropdown menu on the right.
SEO - Header tags, optimized copy, and keyword-rich bullet points
Design - A location selector with ample white space for a clean, easy-to-navigate layout
Conversion - A 'Contact Us' CTA placed directly below the main content area to encourage user engagement
Location Page
The image shown here is the location page. These pages were designed to be highly optimized for search engine crawling, with both the service and location incorporated into the main header tags. In addition to supporting a significant amount of copy, we’ve added content that builds trust and guides users toward conversion.
SEO - Prioritized service and location in the header tags, along with strategic copy that educates users about the services while being search engine-friendly
Design - Introduced unique elements to manage heavy copy and incorporate trust-building details
Conversion - The goal was to provide additional resources, such as featuring attorneys and outlining the onboarding process, to give users the confidence to contact Tully Legal
Service Location Page
The image shown here is the service-location page. These pages were specifically designed to be highly optimized for search engine crawling, as they feature both the service and location in the main header tags. In addition to handling a significant amount of copy, we included extra content aimed at building trust and guiding users toward conversion.
SEO - Prioritized the service and location in the header tags, along with strategically crafted copy to educate users about the services while ensuring search engine friendliness
Design - Incorporated unique elements that effectively manage heavy copy and integrate trust-building details
Conversion - The goal was to provide additional resources, such as featuring attorneys and outlining the onboarding process, giving users the confidence to contact Tully Legal
Mega Menu
Designing for Scalability
Since scaling their business was another key goal for Tully Legal, it was crucial to design elements that could be reused throughout their website. The following elements were optimized not only to deliver strong SEO results but also to be intuitive and easy for users to understand.
Location Selector
Years of Experience
Hub Page Design
Tabbed Content
UI Library
Conclusion
Once our design was complete, fully developed, and thoroughly QA'd, we successfully launched the product. In the end, we delivered a solution that emphasized trust, was easy to scale, and optimized for search engines. Our user flows were well-defined, and the designs were highly intuitive. The Tully Legal team was thrilled with the finished product, and feedback from both new and existing clients has been overwhelmingly positive, with many enjoying the improved web experience.