Rebuilding a decade-old public website with a renewed publishing flow

01From a decade-old site to a shared design language

Atrias runs the data behind Belgium’s energy market: distributing documentation and coordinating data between grid operators, energy suppliers, and other sector stakeholders. Atrias is the central information provider for Belgium’s energy sector, responsible for market data exchange between grid operators and suppliers. Source Atrias is the central information provider for Belgium’s energy sector, responsible for market data exchange between grid operators and suppliers. Source The public website itself hadn’t been touched since 2011, still running on a legacy publishing flow, as well as a lack of a design foundation, no documented components, and nothing to reuse.

This was a combined project, the public website redesign were designed in parallel to setting up a design system. The key criteria for the website design, was that it automatically had to plug into the SharePoint publishing flow so new documents would be immediately available on the site.

02Paper prototypes and sketches to gather early feedback

Early workshops focused on low-fidelity designs with post-its and paper prototypes to work out the site’s information architecture directly with stakeholders. Rather than presenting a finished structure, stakeholders reviewed and participated in iterating on the information architecture and how it should be connected to the publishing flow.

Once the structure held up under that scrutiny, the same low-fidelity approach carried into the visual layout. Sketches worked out how each section would look and read, before a single screen was designed fully.

This kept the process fast and iterative, without getting bogged down in pixel-perfect details too early. It also made it easier to get feedback from stakeholders who weren’t used to reviewing digital designs, and who could more easily comment on a sketch than a polished screen.

03The challenges of working with a vivid brand color

Atrias red is a difficult color to design around. The red is vivid enough to dominate a layout if it’s not deliberately restrained. A common rule of thumb splits an interface into a dominant color, a secondary color, and a small accent. The brand’s most vivid color is usually reserved for the smallest share of the screen keeps it legible rather than overwhelming. Source A common rule of thumb splits an interface into a dominant color, a secondary color, and a small accent. The brand’s most vivid color is usually reserved for the smallest share of the screen keeps it legible rather than overwhelming. Source The organization’s wish to lean into the brand color more added several visual challenges.

Getting that balance right for the website mattered enough that it didn’t stay a one-off decision made and forgotten. To ensure future use would apply it consistently, it became a principle that was part of the design system, illustrated with concrete do’s and don’ts for future reuse.

04Solving the publishing flow was the main design challenge

New documents needed to appear on the site the moment they were published in SharePoint, with no manual step in between. In the end, I designed a workflow that the folder structure of SharePoint would automatically translate into the website’s content blocks, so that any new folder created in SharePoint would immediately appear on the public site.

Once documents would be approved through the internal publishing workflow and arrive in the SharePoint, the public website automatically reflected that change. The design system itself was built around that same flow. Pages render directly from the folder structure of the backend SharePoint instance. See the documentation section of the current Atrias website for a live example of this automated publishing flow. Source See the documentation section of the current Atrias website for a live example of this automated publishing flow. Source Add a new folder there, and a matching content block appears on the website automatically without needing to touch the website’s code.

05Moving into high-fidelity and finalizing the designs

Once I demonstrated the new publishing flow in a proof-of-concept, I could finalize the design. Three things mattered most for the final screens: the site had to be modern, maintainable, and work for both mobile and desktop. It also included a new search that could both search the entire catalog for documents, as well as search within documents so users could easily find the information they needed.

The final design was built directly on the same automated flow the earliest sketches were already designed around. The screens below are the final, high-fidelity result.

06Capturing everything into a design system for future projects

The design system had to work for everyone in Atrias, so it was built around three distinct audiences.

Part of the assignment was to design and deliver an illustration system, specifically for icons for specific concepts like infeed, billing, reconciliation, and allocation.

The initial recommendation of acquiring a generic illustration set was rejected, therefore a bespoke illustration set was designed to cover the specific concepts of the energy market, as well as technical concepts like API, database, and server.

The Atrias design system lives on an internal SharePoint site, open to any employee, requiring no technical skill to update. Anyone at Atrias can extend it as the organization’s needs change, rather than waiting on a designer or a developer to make a change.

07Looking back, there are a few things I’d do differently

This project turned out to have a broader scope than it first appeared: publishing-workflow design, a website redesign with a light branding pass, and a full design system, with a lot of the actual complexity happening behind the screen rather than on it.

The thing I’d change is when stakeholder management started. Early conversations focused on the visual side first, which meant the harder technical questions about the publishing flow only surfaced once the visuals were already underway. Next time, I’d bring stakeholders in earlier, map a service blueprint A service blueprint maps the people, systems, and processes behind a customer journey. It visualizes what happens behind the screen to support what the user sees, not just the interface itself. Source A service blueprint maps the people, systems, and processes behind a customer journey. It visualizes what happens behind the screen to support what the user sees, not just the interface itself. Source before any screen design started, and work from the technical side first rather than the visual one.

The new website tied to publishing documentation together with the Atrias Design System was launched September 2020, and still is the foundation of Atrias’ digital presence and information sharing workflow in 2026.