Inconsistent brand execution
Legacy templates allowed too much interpretation, which created variation in layout, type, color and experience quality.
UX leadership case study
Deloitte.com modernization: building a UX-led delivery model for DMOD adoption.
Deloitte's Marketing Excellence organization needed a more consistent way to create public-facing Deloitte.com pages, with clearer brand application, content strategy, analytics planning and a smoother delivery process. As UX Lead and Specialist Assistant Manager, my focus was to move a 40+ member team from fragmented, stakeholder-led page creation to a sprint-based, design-system-driven workflow over 1.5 years.
RoleUX Lead · Specialist Assistant Manager
Team40+ strategic marketers and creatives
Duration1.5 years across 3 phases
Impact~30% faster project completion
Before
Loose legacy templates used as guides
Stakeholder or developer-led page design
Inconsistent brand, layout and tracking
Long production and approval cycles
UX-led DMOD operating model
After
01 · Challenge
The context
The team was creating pages, but the process was hard to repeat at scale.
Deloitte.com page creation had grown into a high-stakes collaboration between strategic marketers, content specialists, designers, developers and stakeholders. The legacy design system gave teams significant freedom for custom coding, and templates often acted as loose guidance rather than reliable standards.
As a result, page quality depended heavily on individual interpretation. Some pages did not consistently follow brand guidelines for color, typography or layout. Developers and stakeholders sometimes shaped page design directly, while final decisions were often made without enough brand, UX or content-strategy context.
Stakeholder-led decisions
Final page choices were often made by people close to the business request, but not always close to brand, UX or content strategy.
Limited measurement foundation
Metrics and interaction tracking were not consistently planned at component level, making performance learning harder.
Long production timelines
Unclear intake, handoffs and approvals created rework between marketers, creatives, developers and stakeholders.
DMOD was still evolving
DMOD was the direction, but the team needed a transition plan before every official component and template was ready.
UX maturity gap
The team needed a shared understanding of why story, hierarchy, layout and interaction choices affected page reach.
The bigger challenge was not individual page design. It was giving teams a consistent way to make page decisions across many different requests.
02 · Role
Leadership scope
The UX role sat across process, people, design-system adoption and measurement.
The role required a more structured UX way of working while still supporting the monthly flow of Deloitte.com page requests. That meant hands-on design leadership, stakeholder education, process design, team enablement and a practical transition plan for DMOD.
Raised UX understanding
Helped marketers and creatives understand page storytelling, hierarchy, user intent, content sequencing and why standardized design improves trust and reach.
Created the delivery model
Introduced a sprint-based intake and delivery process with clearer kickoff, readiness, handoff and approval checkpoints.
Built team capability
Hired and onboarded two UX designers, giving the team more capacity for content strategy, component mapping and page design.
Prepared DMOD adoption
Created pseudo-DMOD components and templates in Figma so the team could start practicing the new model before the official system was fully released.
Connected design to analytics
Planned component-level tracking across Adobe Analytics and the move to CJA, supporting better performance review and A/B testing.
Reduced repetitive effort
Created AI-powered internal tools and a brand-guidelines Figma plugin to reduce production load and improve designer efficiency.
03 · Transformation roadmap
1.5 years · 3 phases
The work unfolded in three phases: create the process, support adoption and refine the workflow.
The rollout was phased so the team could keep delivering active page requests while gradually shifting to a more disciplined, DMOD-aligned way of working.
Process creation and adoption
Established UX education, page intake, template selection, content mapping and a pseudo-DMOD Figma system so the team could practice the new workflow before full DMOD release.
Workflow refinement
Adjusted the process based on team feedback, clarified definitions of ready and done, improved approvals and strengthened collaboration between marketers, UX, copy, visual design and development.
Measurement and automation
Embedded analytics thinking into component planning, supported A/B testing, and introduced internal tools that reduced repetitive production effort for creatives and designers.
04 · UX delivery process
From request to published page
Page creation became a clearer UX-led operating workflow.
The process defined when UX should enter, what information was required before each stage, who owned each activity, and what counted as done before the work could move forward. This reduced ambiguity and gave the 40+ member organization a shared way to collaborate.
Sanitized recreation based on the working UX process. Internal page designs and proprietary documentation are intentionally not shown.
| Step | Task | Definition of ready | Definition of done | Approval | Primary responsibility |
|---|---|---|---|---|---|
| 01 | UX kick-off Kickoff call with strategic marketers, UX, creative and account partners. |
UX questionnaire, draft content or organized source material. | Kickoff completed and work can begin. | - | Strategic marketer initiates and gathers draft material. |
| 02 | Template selection & content mapping Select DMOD template and map rough content to available components. |
Agreed questionnaire and source content uploaded to workflow. | Stakeholder-approved DMOD template with dummy component content. | Stakeholder approval | UX + copy team collaborate on template and component fit. |
| 03 | Content development Draft page copy within DMOD character and SEO requirements. |
Approved template, SEO research and source material. | Stakeholder-approved content. | Stakeholder approval | Copy team develops content for the approved structure. |
| 04 | Risk and PR review Share approved copy for risk and public-relations review. |
Stakeholder-approved content and template direction. | Feedback captured and incorporated. | Risk / PR approval | Program manager initiates risk approval process. |
| 05 | Wireframe creation Create low-fidelity wireframe with actual content and component states. |
Approved template and stakeholder-approved copy. | Marketer-approved wireframe and development feasibility check. | Internal and SM approval | UX team creates wireframe and documents component states. |
| 06 | Image sourcing Source and resize images for the Deloitte.com page. |
Approved wireframe and image guidance. | Correctly sized images uploaded for high-fidelity design. | Internal and SM approval | Visual design team sources images based on approved direction. |
| 07 | High-fidelity creation Create high-fidelity design using approved wireframe, copy and imagery. |
Approved wireframe, copy and images. | Marketer-approved high-fidelity design. | Stakeholder approval | UX team creates high-fidelity design with approved assets. |
| 08 | Proofread content and hi-fi Final proofing against accepted copy and review feedback. |
Approved hi-fi with actual content and component states. | Marketer and writer-approved design with clean copy. | Marketer and copy approval | Copy team verifies final changes after risk and PR review. |
| 09 | D.com build Move to build for preview and publishing. |
Approved hi-fi, resized images and final content. | Published page. | Stakeholder approval | Development / digital production team builds the page. |
05 · DMOD adoption
Design-system transition
A pseudo-DMOD Figma system made the new way of working easier to practice before the official system was fully ready.
The official DMOD design system was still in progress. Waiting for every final artifact would have slowed the transition, so a practical interim system was created in Figma to mirror the expected DMOD templates, components, selection rules and content constraints.
Pseudo-DMOD component library
Reusable Figma components gave designers and marketers a faster way to evaluate page structure without custom-building every request.
HeroCampaign message, audience context, CTA priority
Story blockLong-form explanation with content hierarchy
CardsScannable offerings, themes or related content
CTA moduleConversion path and analytics event planning
Template and content mapping rules
The team learned how to choose a template based on content purpose instead of stakeholder preference alone.
GoalAwareness, engagement, lead path or event support
StoryWhat the user needs to understand first, next and last
EvidenceProof points, imagery, video and supporting data
MeasureInteractions that should be tracked after launch
Why this mattered: the interim system reduced transition risk. By the time the official DMOD system was released, the team had already practiced the mindset, handoffs and component-selection behavior needed for adoption.
06 · Measurement
Analytics-aware experience design
Analytics planning moved earlier in the page process.
The team used Adobe Analytics and later moved toward CJA. Tracking needs were discussed during component planning instead of being treated as a launch task, which made it easier to measure important interactions after launch. It also gave the team a better starting point for A/B testing and future component choices.
Define page intent
Clarify the marketing goal, user need and desired behavior.
Select components
Choose templates and components based on content type and interaction purpose.
Instrument interactions
Plan tracking for CTAs, navigation paths and key engagement points.
Review performance
Use Adobe Analytics / CJA data to understand how components perform.
Test and improve
Run A/B tests and refine future component choices based on evidence.
07 · Automation
Operational efficiency
Automation took repetitive production work out of the process.
As the UX process became more established, internal tooling became a practical way to reduce manual effort and keep designers focused on decisions that needed their judgment.
Programmatic ad generator
Built an AI-powered internal tool that turns a message and image into multi-resolution banners, reducing repetitive resizing and production work.
Brand-guidelines Figma plugin
Built a Figma plugin with Claude that gives designers quick access to brand colors, contrast-ratio checks, hex values and icons, reducing tab-switching during design work.
08 · Outcome
Business and team impact
The team ended with a more consistent way to deliver Deloitte.com pages.
The work helped move page creation away from one-off decisions and toward a repeatable process shaped by content strategy, design-system rules, measurement needs and clearer cross-functional ownership.
Marketing Excellence team members aligned around a clearer UX-led delivery process.
Reduction in project completion timelines through sprint-based intake and delivery.
Work carried across process creation, team adoption and refinement phases.
Reduction in ad production time through an AI-powered internal banner generator.
Designer efficiency improvement through the brand-guidelines Figma plugin.
Smoother adoption of the new Deloitte.com modernization design system.
The design system was only part of the change. The larger value was helping teams make page decisions through a shared process instead of relying on subjective layout preferences.
Portfolio note: This case study uses sanitized process visuals and abstracted examples. Internal Deloitte page designs, proprietary documentation and stakeholder-specific details are intentionally excluded. Public Deloitte.com pages may be referenced separately where appropriate.