Applied Underwriters Design System Adaptation
Project Type
Web Design
Role
Designer
Applied Underwriters is a global risk services company known for creating and acquiring specialized insurance lines — from home and logistics to entertainment, sports, and more — then rebranding them under the cohesive Applied umbrella. Each division operates with its own identity and focus, while still sharing the parent company’s signature visual and brand DNA.
When I joined Applied, there was no formal design system in place. Each new website required balancing two goals: building a distinct brand presence for the new insurance line, and maintaining a consistent visual relationship to Applied’s overall style. Over time, I helped create and refine over a dozen microsites — each one contributing to a growing, reusable ecosystem of design components, visual rules, and brand assets that kept Applied’s expanding portfolio both unified and adaptable.
The Challenge
Applied Underwriters had expanded into multiple specialty divisions — from luxury homes and logistics to entertainment and sports. Each required its own website, audience focus, and brand tone.
Each microsite needed a distinct personality, but still reflect the Applied brand.
Components were being created independently without shared guidelines.
Handoffs to developers varied by project, slowing down delivery and increasing visual inconsistencies.
There was no unified documentation or visual library tying everything together.
Design Strategy
Our strategy focused on preserving the essence of the Applied Underwriters brand while evolving it to support new product lines. Each site needed to feel distinct yet unmistakably part of the same family. We achieved this by standardizing key elements—typography, layout rhythm, logo treatments, and UI—while allowing flexibility in components and interactions to fit each insurance line’s audience and function.
In the following design process, I use Applied Underwriters Title Services as a representative example to illustrate how a new brand and supporting design system were built—showing how consistency, differentiation, and scalability were balanced within the Applied ecosystem.
Design Process
Research and Discovery
Every new project began with competitor analysis. I explored how other companies in similar industries presented their offerings — what layouts they used, which visual tones they leaned on, and how their websites flowed.
From there, I compared these findings with past Applied sites to identify what made ours distinct. This helped me understand what we needed to preserve: the typography, the white space, the bold imagery, and the understated sense of confidence.
I presented moodboards and visual options to the product manager and design leads, showing how we could evolve Applied’s look for each new division without losing brand integrity.
Defining a Visual Foundation
Applied’s visual identity became our foundation:
-
Typography: A combination of Utopia (serif) for headers and Gotham (sans-serif) for body text. Depending on tone, these could be switched or weighted differently.
-
Logo System: Each division followed the “Applied [Division Name]” format, same font, different name.
-
Color: Each microsite received a new accent color or palette drawn from imagery or competitor research.
-
Imagery: Striking, bold, and cinematic, never generic or overly corporate.
-
Motion: Clean, intentional animations that added depth without distraction.
While the leadership team didn’t explicitly request a design system, I began documenting and organizing these shared rules so that future projects could start faster and stay visually consistent.
Component Creation and Evolution
As we built new websites, I noticed recurring UI elements — navigation bars, contact sections, accordion modules, and button layouts. Instead of rebuilding these each time, I started saving them in a shared Figma library.
This became our informal component system.
-
Buttons, contact forms, and navigations were reused across projects.
-
Custom components, like accordions and cards, were adapted to fit each site’s visual theme.
-
For example, in Applied Logistics Underwriters, each accordion expanded to reveal an arrow-shaped image that animated as it opened — a nod to the site’s arrowhead motif.
These creative variations gave each site personality while maintaining structural familiarity across the Applied family.
Collaboration and Developer Handoff
Collaboration with developers was tightly integrated throughout the design process. UI components and design tokens, such as typography styles, spacing, color values, and button states, were defined and maintained in Figma based strictly on the needs of each project. Rather than creating an exhaustive system upfront, components were built intentionally, only when they were required for the current website or client use case. This kept the system lean, relevant, and easy to maintain.
Assets and documentation were shared through Dropbox, and interactions were reviewed live using Microsoft Teams or Zoom to clearly communicate behavior, edge cases, and responsiveness. When motion played a key role in the experience, I created mock animations in After Effects to demonstrate timing, easing, and scroll behavior.
Consistency and Refinement
To keep the ecosystem cohesive, I regularly compared new projects against existing ones, ensuring logo sizing, typography hierarchy, and spacing followed the same visual rhythm.
Over time, we also standardized motion guidelines. Every scroll reveal, fade, and image transition followed shared timing rules to keep animations consistent across the portfolio.
Each site became part of a larger whole, distinct in character but unified in feeling.
Results and Impact
-
Built and launched over 15+ microsites under the Applied brand umbrella.
-
Reduced design and development time through reusable, well-documented components.
-
Established a de facto design system that could scale with new brands and teams.
-
Improved visual cohesion across all Applied websites while allowing creative flexibility.
-
Enabled faster handoffs and smoother collaboration with developers.
By creating a structure around design and documentation, I helped transform Applied’s digital ecosystem from a collection of disconnected projects into a cohesive family of brands — all sharing the same visual DNA, yet each telling its own story.
