Strabag

Digital editorial platform

The Strabag Innovation hero: the name across a red field, with portraits of engineers behind it and a network of points and lines drawn over the whole.

Strabag Innovation is a digital journal documenting the latest developments across Strabag's network — from automation and data management to materials science, engineering, and design. Built to disseminate knowledge across an extensive network of partners and clients. The platform brings this network of knowledge into a single, navigable editorial experience — from the homepage feed to individual story modules.

Client
Strabag
Agency
Wien Nord + Now
Role
UI Design
Interaction Design
Art Direction

The homepage: a browsable knowledge feed

The homepage surfaces stories from across Strabag's network — automation, materials science, data management, engineering — in a single scrollable feed, letting visitors browse by topic or discover new developments.

The full Strabag Innovation homepage design, from the lead story and the row of project cards through the interview and the innovation-days feature to the filtered project list and the footer.

Designed mobile-first for on-the-go reading

The same editorial depth carries over to mobile, optimised for quick, on-the-go reading across Strabag's partner network.

The homepage on a phone, from the STRABAG bar and the lead story down through the project cards to the interview with Kai Anderson.
Further down the same phone page: the innovation-days feature, the adASTRA article, the topic filter and the project list.

A visual identity built on connection

Strabag's brand mark is built from vertices and edges — points connected into polygons, echoing a network of partners and expertise. This idea runs through the interface as a recurring motif: in the hero, images transition through a polygon that collapses and expands, revealing a new image with each expansion.

The same motif resurfaces in the navigation — menu thumbnails are polygon-shaped, with vertices that respond to hover, adding a small moment of delight consistent with the brand down to the finest interaction detail.

The open navigation: the sections listed across the top, and under them a row of project thumbnails cut to polygons.

Before/after: showing technical progress

An image-comparison module lets Strabag show technical or material progress over time — useful for documenting engineering developments visually.

Interactive image map: exploring in detail

An interactive image-map component lets readers zoom into and explore detailed visuals — from technical drawings to broader site imagery — surfacing extra detail on hover or click.

Reading a story,
mobile-first

On mobile, individual stories are optimised for a clean, distraction-free reading experience.

The same story page reduced to its layout: the blocks a story is built from, in the order they are read.

Interactive quiz: turning reading into engagement

A lightweight quiz format adds a layer of interactivity to selected stories, encouraging active engagement rather than passive scrolling.

  • The question on a phone — how many kilometres VirtuRail has covered autonomously — with four distances to choose from and one of them selected.
  • The answer confirmed: a green tick, and the right answer given as 25,000 km.
  • The explanation behind the answer, and the button on to the next question.

Next up

AviationHi FlyB2B website redesign
View project
The Hi Fly B2B website redesign.

This work is covered by a confidentiality agreement. The full case study is shared by an access key.

Don’t have a key?Request access