Ørsted Website Components
Designing a scalable component system that helps Ørsted’s Marketing & Branding teams manage global websites efficiently.
I documented and organized 60+ components in Figma and aligned them with Sitecore, enabling faster updates and smoother collaboration across design, development, and content teams.
Result Highlights
-
60+ reusable modules documented in Figma
-
Unified color, spacing, and typography tokens aligned with Sitecore
-
Improved collaboration between designers, developers, and content editors
-
Accelerated website updates across 10+ regional domains
1. Overview
When I first joined Ørsted, I was part of the Marketing & Branding team responsible for designing and maintaining all Ørsted websites, from Ørsted.com to regional sites like Ørsted.dk and Ørsted.pl.
The team had recently completed a discovery phase with an external agency (ManyOne) and hired a UI consultant to deliver high-fidelity page designs. After he left during a company restructure, I became the sole in-house designer working with developers, architects, and product owners to bring the new design system to life.
Our goal was clear: turn a static design into a flexible, maintainable component system in Sitecore, so marketing teams could easily update and scale content without developer support.
All web pages UI created by UI Consultant
2. Why It Mattered
The old website setup made updates slow and inconsistent.
Each page was custom-built, which meant small design changes required developer involvement.
By creating a unified component library, we could ensure:
-
Consistency across 10+ country sites
-
Faster marketing updates
-
A shared design language between designers, developers, and content editors
3. My Role
As the Senior UX Designer, I took ownership of:
-
Organizing and cleaning up 60+ page designs in Figma
-
Building a structured component library (desktop & mobile)
-
Defining design tokens (color, typography, spacing, border, effects)
-
Testing documentation clarity with developers and SMEs
I collaborated closely with Front-End Developers to ensure everything translated smoothly from Figma to Sitecore.
4. Process
Audit & Clean-up
Reviewed and consolidated designs from the agency and consultant.
Design Tokens
Defined the foundation (typography, colors, spacing, etc.) and synced it with Front-End.
Component Library
Documented all reusable modules such as banners, cards, teasers, forms, and tables.
Templates
Created page templates that let SMEs drag-and-drop components easily in Sitecore.
Validation
Tested with developers and SMEs to ensure clarity and usability.
5. Impact
-
60+ reusable components ready for Sitecore
-
Consistent design now live across Ørsted.com and all regional sites
-
Faster content updates by SMEs
-
Stronger alignment between design, marketing, and development teams
6. Reflection
This project taught me how important it is to make design work for everyone and not just look good.
By building a shared component system, we gave the Marketing & Branding team the tools to move faster while keeping Ørsted’s visual identity consistent worldwide.
