BACK
Westlaw Responsive
Modernizing core legal research workflows across eight responsive breakpoints.
Responsive Systems
AI-powered workflow
Accessibility
Legal Tech
Company
Thomson Reuters
Role
UX Designer
Timeline
2026
Product
Westlaw
Executive Summary
Bringing Westlaw’s core workflows to every screen size
Westlaw is a complex enterprise legal research product built around information-dense workflows traditionally optimized for desktop use.
As part of a major responsive initiative, our team redesigned some of Westlaw’s most important experiences to work across eight breakpoints — from 1368px down to 320px.
The work went beyond resizing existing interfaces. We rethought interaction patterns, improved individual components, addressed accessibility issues, and rebuilt parts of the experience where the existing Cobalt component library could not fully support responsive behavior.
To accelerate a highly repetitive design process, we also developed an AI-assisted workflow using Claude Code and reusable skill.md files, helping us reconstruct existing screens with Cobalt components and systematically generate responsive variants from a 1368px baseline.
Business challenge
A desktop-first enterprise product needed to work everywhere
The challenge was not simply making Westlaw fit smaller screens. We needed to preserve the density, functionality, and reliability legal professionals depend on while fundamentally changing how complex interfaces behave across screen sizes.
Research & Discovery
Understanding what could scale — and what needed to change
Before defining responsive behavior, we examined existing screens, interaction patterns, and Cobalt components to determine what could be retained, what needed adaptation, and where new responsive patterns were required.
FINdings
What shaped the responsive system
01
Responsive design required reflow, not scaling.
Information-dense legal workflows could not simply be compressed. Different breakpoints required changes in layout, hierarchy, visibility, and interaction patterns.
02
Desktop interaction patterns did not always translate safely to smaller screens.
Drawers, modals, side panels, filters, and navigation patterns needed reconsideration when screen space became constrained.
03
The design system itself became part of the product problem.
Where Cobalt lacked responsive or interaction-ready components, the team had to define new behavior while maintaining visual and functional continuity with the existing system.
04
Manual production across eight breakpoints would create significant design overhead.
Repeatedly rebuilding the same interface across eight screen sizes introduced unnecessary production work and increased the risk of inconsistency.
Design strategy
Designing responsive behavior as a system
Instead of treating each screen size as a separate design, we created rules that determined how layouts, components, and interactions should evolve across breakpoints.
Solutions
Turning desktop workflows into a responsive product system
Solution 01 — Responsive Layout Framework
Designing across eight breakpoints
We defined responsive behavior across:
1368 → 1250 → 1024 → 840 → 768 → 600 → 480 → 320
Rather than proportionally shrinking the desktop UI, each breakpoint introduced intentional changes to layout, content priority, navigation, and component behavior.
Desktop layouts could maintain higher information density, while narrower screens progressively reorganized secondary content and interactions around the user’s primary task.
Why this mattered
Legal research workflows contain significantly more information and controls than typical consumer products. Maintaining usability required protecting task hierarchy rather than preserving desktop geometry.
Solution 02 — Component & Interaction Improvements
Improving the experience while making it responsive
The initiative also created opportunities to revisit smaller product behaviors and components that had accumulated usability issues over time.
We refined interaction patterns, simplified selected components, and introduced responsive behavior where the existing experience no longer worked effectively.
Accessibility considerations were embedded into these decisions, including:
Contrast and visual legibility
Keyboard navigation
Focus management
Touch-friendly interaction areas
Overlay hierarchy
Avoiding conflicting layered states such as a drawer opening on top of an active modal
Why this mattered
Responsive design exposed interaction problems that could remain hidden in desktop layouts. Addressing them made the experience more resilient across both devices and input methods.
Solution 03 — Working Within the Cobalt Design System
Rebuilding experiences when the library could not fully support them
Westlaw still relied on Cobalt rather than the newer Saffron design system.
While many existing Cobalt components could be reused, others were incomplete or not designed for the responsive interactions required by the new experience.
Instead of treating the design system as fixed, we worked within its constraints — reconstructing interfaces using available components, defining missing behavior, and maintaining consistency with the existing Westlaw experience.
Why this mattered
Migrating the entire product to a new design system was outside the scope of the initiative. The challenge was therefore to modernize the experience without disconnecting it from the system that still powered the product.
Solution 04 — AI-Assisted Responsive Production
Turning repetitive production work into reusable design intelligence
Designing the same complex Westlaw experience across eight breakpoints involved a significant amount of repetitive production work.
To make the process more efficient, we used Claude Code to create reusable skill.md files that encoded parts of our design workflow.
Skill 01 — Screen Reconstruction
Starting from a screenshot of an existing Westlaw screen, the skill could reference available Cobalt components and reconstruct the interface at the baseline 1368px breakpoint.
This gave designers a structured starting point instead of manually rebuilding every legacy screen from scratch.
Skill 02 — Breakpoint Generation
Once the 1368px baseline had been established, a second skill applied our responsive rules to generate the additional seven breakpoint variants:
1250 · 1024 · 840 · 768 · 600 · 480 · 320
The generated designs then became a starting point for designer review and refinement rather than a final output.
Why this mattered
The AI workflow did not replace design decisions.
Instead, it automated repetitive reconstruction and breakpoint production so designers could spend more time evaluating hierarchy, interactions, accessibility, and edge cases.
It also helped make responsive decisions more repeatable across a large product surface.
Impact
Creating a scalable foundation for responsive Westlaw
Because the initiative is still part of ongoing product work, I would frame the outcome around product and process improvements rather than inventing unsupported adoption metrics.
Reflection
Reflection
This project changed how I think about responsive design in complex enterprise products.
Responsive design is not simply a question of where components move when the viewport becomes smaller. Every change in layout can affect information hierarchy, interaction behavior, accessibility, and the way users understand the product.
Working within an established design system also reinforced that systems are rarely perfect or complete. Sometimes the designer’s role is not simply to use an existing library, but to identify where the system stops supporting the product and define the behavior needed to move forward.
The AI-assisted workflow added another dimension to the project. By encoding repeatable design rules into reusable skills, we were able to shift effort away from repetitive production and toward the decisions that required human judgment.
For me, the biggest lesson was that responsive design, design systems, accessibility, and AI-enabled workflows are not separate disciplines — they can work together as one product design system.
More
