CASE STUDY : WATSON WEBB

COMPANY OVERVIEW

Watson Webb is an Australian boutique law firm providing strategic legal advice and representation across a broad range of commercial and private matters. The firm works across areas including commercial disputes and litigation, insolvency and restructuring, corporate and commercial advisory, development and property, employment, private client advisory, and intellectual property. The client approached our team to redesign and rebuild the Watson Webb website in Webflow, with the goal of creating a more modern, professional, structured, and user-friendly digital experience. The project was based on detailed references and mockups provided by the client. These materials outlined the desired layouts, page structures, visual direction, and specific requirements for different sections of the website. Our role was to translate those designs and requirements into a fully functional, responsive Webflow website while creating a flexible CMS structure that could support the firm's growing team and content.

THE OBJECTIVE

The primary objective was to redesign the Watson Webb website into a polished and professional digital platform that accurately represented the firm's expertise, people, and brand while improving usability and content management. The website needed to provide a clear structure for visitors to explore the firm's services, people, insights, careers, and other key information.

To achieve this, the objectives were:

Redesign the website based on the client's references and provided mockups
Build the complete website in Webflow
Create a professional and modern visual experience appropriate for a law firm
Develop structured CMS-driven profile pages for the firm's team members
Create flexible CMS fields to manage individual profile information
Build reusable layouts that could accommodate different team members and content
Improve website navigation and overall information architecture
Add a search bar to the website header for easier content discovery
Design and implement custom dropdown navigation menus
Develop the Careers page according to the required design and user experience
Ensure images display correctly without unwanted cropping across different screen sizes
Maintain consistency across desktop, tablet, and mobile devices
Create a scalable website structure that the Watson Webb team could manage more efficiently
Deliver a clean, professional, and intuitive browsing experience

Ready to transform your website into a professional digital experience?

Let’s Build Your Website

Book Your Free Strategy Call

THE CHALLENGE

Redesigning a professional services website requires more than simply applying a new visual design. The website needed to balance a sophisticated appearance with clear information architecture, flexible content management, and a smooth user experience. The client provided detailed references and mockups showing how different sections and pages should look and function. One of the key challenges was translating these static design references into a flexible Webflow system that could be reused across multiple pages and profiles. Upon reviewing the project requirements, we identified several core challenges:

Upon conducting a deep audit, we discovered the core issue:

Translating the client's provided references and mockups into functional Webflow layouts
Creating a flexible CMS structure for multiple team/profile pages
Determining the appropriate CMS fields required for different profile sections
Building reusable profile page layouts that could accommodate varying amounts of content
Creating a custom header experience with an integrated search bar
Designing dropdown navigation that was both visually consistent and easy to use
Ensuring the navigation worked smoothly across different screen sizes
Developing the Careers page based on the required design and content structure
Managing image dimensions and positioning so images would not become unnecessarily cropped on different devices
Maintaining consistent spacing, typography, and layout behavior across desktop, tablet, and mobile
Ensuring the redesigned website remained easy to navigate despite the firm's broad range of legal services and information

THE SOLUTION

To address these challenges, we used Webflow's design and CMS capabilities to create a flexible website structure that could support Watson Webb's current requirements while making future content management easier. The implementation combined custom page layouts, CMS architecture, responsive design, navigation improvements, and careful image handling.

Key actions included:

Built the website in Webflow based on the client's provided references, mockups, and detailed page requirements.
Created custom CMS fields for profile pages, allowing individual team members to have structured information such as name, position, biography, qualifications, experience, and other relevant content.
Developed the complete profile page layout, creating a reusable structure that could be applied consistently across different members of the Watson Webb team.
Created a scalable CMS-driven system, making it easier to add, update, and manage team profiles without rebuilding the page structure each time.
Designed and implemented a custom header, incorporating the required navigation structure and additional functionality.
Added a search bar to the header to make it easier for visitors to find relevant information across the website.
Designed custom dropdown menus to provide clearer access to important website sections while maintaining the site's professional visual style.
Independently designed and implemented the Careers page, translating the required content and functionality into a polished Webflow layout.
Optimized image presentation across devices by adjusting image assets and their positioning to prevent important portions of images from being unnecessarily cropped.
Implemented responsive layouts to ensure the website maintained its visual hierarchy and usability across desktop, tablet, and mobile screen sizes.
Maintained visual consistency across pages, ensuring typography, spacing, imagery, buttons, navigation, and content sections worked together as one cohesive experience.
Focused on usability and content discoverability, making it easier for visitors to navigate between the firm's expertise, people, insights, careers, and other key sections.
Built the website with future scalability in mind, allowing the client to continue managing structured content through Webflow CMS rather than relying on manually duplicated layouts.

THE RESULT

The redesigned Watson Webb website delivered a professional and structured digital experience built around the firm's content, people, expertise, and brand. The combination of custom Webflow development and CMS-driven content management created a more flexible foundation for the website while improving navigation and responsive presentation.

Improved team profile presentation and management

Streamlined website navigation and content discovery

Enhanced search and dropdown navigation experience

Created a professional Careers experience

Improved image presentation across devices

Delivered a consistent, responsive user experience

Built a scalable CMS for future content updates

PROJECT HIGHLIGHTS & DELIVERABLES

Do’s

Do create a professional and trustworthy digital experience for a legal services brand
Do use a clean and structured layout to make complex information easy to navigate
Do build reusable CMS structures for content that will be updated regularly
Do create flexible profile pages that can accommodate different team members
Do make important website sections easy to discover
Do provide search functionality when the website contains a large amount of content
Do use clear and intuitive dropdown navigation
Do ensure images remain visually effective across different screen sizes
Do maintain consistent typography, spacing, and visual hierarchy
Do prioritize responsive design across desktop, tablet, and mobile
Do build the website in a way that supports future content growth
Do use client-provided references and mockups as a foundation while ensuring the final implementation is functional and responsive

Don’ts

Don't create separate manually built layouts when a reusable CMS structure can solve the problem
Don't make important information difficult to find through complicated navigation
Don't allow dropdown menus to become confusing or overcrowded
Don't let responsive image settings unnecessarily crop important visual content
Don't rely on a desktop-only design
Don't create inconsistent layouts between different profile pages
Don't duplicate CMS content unnecessarily
Don't compromise usability for visual styling
Don't ignore tablet and mobile behavior during development
Don't build a website structure that becomes difficult for the client to maintain
Don't overlook search functionality when a website contains extensive content
Don't treat the provided mockups as static designs only; translate them into flexible, functional, responsive components

CLIENT TESTIMONIAL

Simon Kinsey

WATSON WEBB

We’re very happy with the redesigned Watson Webb website. The Webflow development, responsive design, and CMS setup have made the site much more professional and easier to manage, while the improved navigation and profile pages have significantly enhanced the overall user experience.