Featured Editorial UX Design

Scaling Responsive Editorial Design for 225M+ Daily Mail Readers Worldwide

Bridging the gap between high-fidelity Illustrator design and dynamic web graphics using the ai2html workflow.
Impact: Streamlined production for 20+ daily news graphics. Reduced mobile illegibility for 68% of users and increased time-on-page by 44%.

Directly go to the gallery
Role: Multimedia Graphics Editor
Tools: Adobe Illustrator, ai2html, HTML/CSS, and JavaScript

1. The Challenge: Bridging the "Mobile Gap"

In the high-velocity Daily Mail newsroom, complex data graphics were traditionally built as high-fidelity static images. While they looked great on desktop, they failed the mobile audience.

  • The Disconnect: As of 2025, 68% of users accessed news via mobile, yet graphics remained optimized for desktop (1200px).
  • The Result: Static assets became unreadable "micro-text" on 390px phone screens.
  • The Goal: Overhaul the visual experience for the mobile majority without compromising the experience for the 22% loyal desktop audience.
    • 68%

    Mobile traffic as of 2025

    2. User Research & Pain Points

    Through user testing and heatmaps, we identified four primary friction points that led to high bounce rates on data-heavy articles:

    Pinch-to-Zoom Friction

    Users abandoned articles when forced to manually zoom to read text on a grpahic.

    Information Density

    Graphics failed the "glance test" on 6-inch smartphone screens.

    Aspect Ratio Mismatch

    Landscape graphics created dead space and "micro-text" on vertical displays.

    "On my phone, the graphics are so small that I can't read them without zooming in. It breaks the flow, and I end up skipping the information altogether."

    — Margaret, Daily Mail Mobile User (48)
    Margaret - mobile user

    3. Design Strategy: "Responsive Visual Storytelling"

    Feature Mobile-First (68%) Desktop-Optimized (22%)
    Layout Vertical Stacking: Components stack for scrolling. Horizontal Spread: Side-by-side data viz.
    Typography Legibility First: Min 12px; high contrast. Detailed Hierarchy: 12px – 16px range.
    Interactivity Touch-Friendly: Tap/Swipe cards. Precision: Hover tooltips and clicks.

    4. The "Dual-Path" Implementation

    1

    From JPEG to SVG

    Switched to vector-based rendering for infinite scalability without loss of clarity.

    2

    Conditional Loading

    Developed a system that detects device type to serve either a "Simplified Vertical" or "Detail-Rich Horizontal" version of the same data.

    3

    Adaptive Assets

    Using ai2html, I converted Illustrator files into HTML5 containers that reflow text dynamically based on screen width.

    SCROLL

    5. Impact & Results

    +44%

    in time-spent-on-page for mobile users.

    WCAG

    Achieved full accessibility standards for screen readers and low-vision users.

    Unified Workflow

    Created a single master dataset that powers all device views, reducing production time.

    6. Reflection

    The solution wasn’t about choosing one platform over the other; it was about reframing news graphics as fluid containers of information rather than fixed images. By designing for the 68% mobile majority, we inadvertently created a cleaner, more legible experience for desktop users as well.

    Gallery