A structural hierarchy fix that corrected hundreds of articles - without touching a single one.
Live across Saxo's editorial layer
Client:
Saxo Bank
Role:
Product Design - Web / Content Systems
Date:
2025-2026
Context
Saxo's editorial layer is the primary awareness surface - the place where potential clients and active investors deepen their understanding before making decisions. It runs on a single CMS template. Every article published inherits its structure.
How It Started
The problem wasn't assigned. It surfaced while building a scalable illustration system for hero imagery.
Reviewing deployed articles, it became clear the existing hero treatment would undermine the new illustration approach and sit uncomfortably against WCAG compliance thresholds. Looking further at the template, the structural problems became hard to ignore.
Two workstreams. One observation. A decision to separate them and fix both properly.
The Problem
The Decisions
H1 out of the hero
The headline sat inside the hero container - attached to a decorative element rather than the document structure. Moving it out put title, author, and summary above the fold before any image loads.
Readers reach the article on load. Screen readers hit the title first.
Metadata - reduced, restructured
Author, category, and date were sized to draw attention rather than provide context. Rebuilt as a compact secondary block, they support the title without competing with it.
Cleaner reading start. Less to process before the article begins.
Hero height - reduced and made responsive
The hero container occupied most of the viewport on load across all breakpoints. Reducing and standardising its height let content enter the viewport earlier - on every device.
Content visible on load. Hero serves the article, not the other way around.
Related articles - aspect ratio standardised
Thumbnail images varied in ratio across the related articles component. Standardising to 16:9 aligned with the incoming illustration system and unified media treatment across the entire article library.
Visual consistency at scale - without touching individual articles.
Gradient overlay removed
The hero carried an inline CSS gradient that obscured imagery and created contrast issues across article types - directly conflicting with WCAG thresholds. Removing it resolved the compliance concern that surfaced the work in the first place.
Images render as intended. WCAG conflict resolved.
Delivery
Saxo operates at a scale where deployment pipelines are tight and changes to live content carry real risk. Scoping the work into two releases was a deliberate call - the first addressing hierarchy and accessibility immediately, the second covering a deeper metadata redesign in the next iteration.
The structural fix shipped without waiting for the full redesign.
The Same Problem, A Different Surface
While working on the article template, the same root cause surfaced elsewhere - this time on the course page.
The "All courses" navigation link had insufficient contrast against the hero background. The cause was identical: a non-uniform gradient overlay creating inconsistent background luminance across states. The link failed WCAG thresholds regardless of the content behind it.
Two options were presented. The first was a solid overlay at 85% opacity - it would have fixed the contrast in isolation. The second addressed the underlying structure: breadcrumb navigation above the content, title and metadata in a dedicated content area, video treated as a media component rather than a background element.
The team went straight to Option 2.
Scale
The article template change propagated instantly across hundreds of existing articles - evergreen content and Saxo Strats, which publishes daily. Every article the CMS generates inherits the updated structure.
No content updates. No editorial intervention. No CMS migration.
One decision. Continuous impact across the full editorial surface.
Outcome
Saxo's editorial layer exists to convert curious readers into confident investors. Every article that opens with an image instead of a headline works against that.
The template fix changed that across the entire content library - instantly, on deploy, without touching a single article.
Content leads. Tab order is correct. The course page contrast failure is resolved at the structural level. And the hero treatment is ready for the illustration system it was always going to need.