Digital Innovation Meets Trusted Coverage
SUMMARYA comprehensive revamp of the brand guidelines and digital design system for W.R. Berkley, a Fortune 500 insurance company, revitalizing their outdated corporate site with a modern and refreshed appearance.
MY ROLELead UX Designer
• User Research
• Wireframing
• Visual Design
• Brand Guideline Creation
• Digital Illustration
TASK AT HANDW.R. Berkley has nurtured over 60 successful insurance businesses, empowering agents and brokers in commercial and high net-worth insurance solutions. However, as Berkley expands, its brand risks dilution. The corporate site is crucial for driving conversions and ensuring design cohesion.
Our goal: modernize Berkley’s 50+ year-old brand and corporate website to deliver a unified message in a competitive landscape. We aimed to provide a cohesive template system for their 60+ units under the parent brand and optimize user-friendly tools that drive conversions and generate strong leads.
What We Started With
Snapshot of previous design
Core Challenges + Solution Overview
Berkley’s brand identity and digital user experience were underwhelming, falling short of conveying the innovation and leadership expected from a Fortune 500 insurance leader.
Below is a brief overview of the key solutions we implemented. Detailed explanations, process insights, and visual representations are provided in the following sections of the case study. This snapshot highlights the strategies and design decisions that transformed the Berkley site into an intuitive, effective hub for connecting to its many subsidiary units.
🚨
The essential business locator tool, connecting users with over 60 Berkley subsidiaries, was cumbersome and ineffective, often returning irrelevant or outdated results and lacking advanced filtering options.
✅
We increased the tool’s visibility by integrating it into the main navigation and strategically placing it across key sections to boost conversion. Optimized for functionality, the tool was designed to guide users to the most relevant operating units with minimal clicks.
🚨
The global navigation was poorly organized, with a disjointed hierarchy, unclear categorization, and inconsistent labeling, making it challenging to find information
✅
To accommodate Berkley’s wide range of products and industries, we introduced a mega dropdown menu for desktop and a flyout menu for mobile and tablet. Each menu item features quick links and tailored sub-menus, improving accessibility and helping users quickly find the information they need.
🚨
The hero area was underutilized, lacking actionable elements that could engage users and effectively serve the primary audience groups.
✅
Our dynamic hero section optimizes above-the-fold space to engage Brokers and Policy Holders. An overarching message is shown by default, with tailored content and quick links appearing when users click audience-specific CTAs. The page remains static, minimizing load time for a seamless experience.
Experience the Transformation of Berkley
Key Interaction Modules
The most rewarding aspect of UX design for me is working through complex interactions and simplifying them into intuitive, useful tools. For Berkley, I helped develop key interactive modules, including the Locator Tool, the dynamic Homepage Hero, and the Global Navigation. These components required extensive concepts, sketches, wireframes, and user testing to ensure they were ultimately user-friendly.
Here are some of the interactive module highlights:
Location Location Location
One critical aspect of the site is the Locator Tool, designed to help visitors find Operating Units that meet their specific needs. The existing tool needed to be revamped to fulfill two of the four key user needs: ‘Showcase the Berkley Ecosystem’ and ‘Tools of the Trade.’ The use of the old tool was unintuitive and often produced inconclusive results.
We focused on enhancing the tool’s visibility by integrating it into the main navigation and placing it prominently within various page sections to boost conversion. The tool itself had to be a user-friendly conduit, enabling visitors to reach their intended results—the most relevant operating units—with as few clicks as possible.
WIREFRAMES
VISUAL DESIGNSTailored Hero Experience
The homepage Hero Module should immediately establish trust, showcase expertise, and differentiate the Berkley and operating unit brands from competitors. It must provide a clear path to information that resonates with the audience.
Our dynamic hero section maximizes the valuable above-the-fold space to engage both key user groups—Brokers and Policy Holders. By default, an overarching message is displayed. When users click on audience-specific CTAs, the hero content transitions smoothly to reveal tailored images and quick links. The rest of the page remains static, minimizing load time and ensuring a seamless experience.
General page Hero Modules should be used on all pages except the Homepage and Contact Us page. They vibrantly showcase product or industry detail pages with curated photography, straightforward headlines, and descriptive copy, creating an engaging and informative introduction to each section.
WIREFRAMESVISUAL DESIGNSRestructuring the Navigation
We restructured the global navigation to better serve the site’s key user groups, resulting in a more intuitive and user-friendly experience that simplifies finding relevant information. Given the extensive range of products and industries Berkley companies cover, we implemented a mega dropdown menu for desktop and a flyout menu for tablet and mobile. Each menu item includes pertinent quick links or sub-menus tailored to specific insurance sectors, enhancing accessibility and ensuring users can quickly locate the information they need.
WIREFRAMESVISUAL DESIGNSTemplates
We created a total of thirteen page templates for use on the corporate site along with best practices that define how modules can be put together to ensure user and business goals are being addressed at every digital touchpoint. We also created two styles of templates for Operating Units to utilize in order to reflect a unified ecosystem under Berkley:
Homepage
About Us (Strategy & Innovation, Leadership & Culture, Careers)
Agents & Brokers Landing Page
Business & Individuals Landing Page
Berkley Businesses Locator results page
Product Detail Pages
Industry Detail Pages
Contact Us
Privacy
Legal
Modules
The module library serves as the digital building blocks for creating page templates.
We designed a total of 19 basic modules, categorized into Global Elements, Heroes, Transactional, Information, and Interactive. A large portion of these modules are flexible and can be integrated into various templates, providing a robust and adaptable foundation for the site’s design.
Foundations
Working alongside the visual designer and copywriter, we established a strong foundation that contributed to the new brand guideline and digital design system.
Illustrations
Complex ideas can be tricky to represent through photography. The more abstract and creative approach of illustration can help a user understand and engage with content. It can be very specific while not overwhelming.
The illustrative approach is one that emphasizes the fact that Berkley is: unique, human, serious about their work, but also has a personality and a modern outlook.
For this project, I wore many hats. I created a series of illustrations for Value Proposition accordions as well as various maintenance states.
“Addi has incredible attention to detail and strong analytical thinking, which was very well suited for a Design Systems project.
We worked side-by-side on this Berkley project, were able to achieve great collaboration and I would not hesitate to work with him again or recommend him for the next project.”
Radoslav Ratkovic
Creative Director | William Thomas Digital
Blueprint for success
Extensive research and stakeholder sessions guided our wireframe development, allowing us to refine and focus on key user needs through four primary design objectives in the redesign of the new Berkley brand and site experience.
Tell the W.R. Berkley Story
Highlight W.R. Berkley’s unique operating model and management structure, emphasizing its strength and distinctiveness.
Showcase the Berkley Ecosystem
Illustrate Berkley’s extensive range of products and services, catering to brokers and customers alike.
Tools of the Trade
Facilitate easy access to tools, support, and information for all users, anticipating high-stress interactions to build loyalty.
Demonstrate Financial Strength
Provide clear, accessible financial performance and leadership information for investors making investment decisions.
THE APPROACHIntegrated Brand Strategy
Our structured approach involved a detailed analysis of Berkley’s existing brand presence, pinpointing inconsistencies that weakened its position in the insurance sector. Credibility and ease of interaction were pivotal for their key user groups — Brokers and Policy Holders.
We conducted in-depth research, defined user personas, created wireframes, and developed a cohesive visual design system.
Through UX and Visual Design, we applied these insights to enhance usability and perception. Berkley needed a distinct brand identity and tone that reflected their expertise and unique market position. This revitalized identity redefined Berkley’s brand positioning and resonated equally across the three experience pillars of visual identity, copywriting, and user interactions.
Key Takeaways
I thrive on projects where I can be involved from inception to final delivery. At Berkley, I embraced a variety of roles, from strategy and UX to copy, visual design, and illustration. Our close collaboration with key stakeholders—engaging in weekly sessions, incorporating feedback, and iterating based on our insights—was truly rewarding.
The synergy among our Producers, Strategists, Copywriters, Experience Designers, and Visual Designers led to the creation of a transformative Brand Guidelines and Digital Design System.
We captured Berkley’s essence—trust, expertise, and integrity—through our concept, establishing a purposeful connection between Berkley, its units, and its audience.
Credits
DESIGNAddi Hou
Rado Ratkovic
TEAMAndres Quesada
Sean Lurie
TOOLSSketch
Invision
Illustrator
Explore similar projects
B2E | LEAD UX DESIGNERDegree of Excellence for Northeastern’s CAMD Site
A substantial visual and digital experience overhaul for Northeastern University’s College of Arts, Media & Design.
B2C | LEAD UX DESIGNERHigh Marks for a New ETS Online
A complete overhaul of the outdated digital experience for Educational Testing Service (ETS), the world’s largest private nonprofit for educational testing & assessment.
B2B | LEAD UX DESIGNERAn Innovative New Avenue for Real Estate
A comprehensive initiative to transform the outdated digital experience of AvenueOne, a leading platform for real estate investment and management.