Stromnetz Berlin Hertzbeats on the net.

The task

Stromnetz Berlin and its topics tend to be for experts. Which comes as quite a surprise, as the whole of Berlin is connected to Stromnetz.

In the company a desire emerged to get in closer contact with customers, to present content in a more contemporary and open way, to develop from just informing to active communication with the main target groups.

Based on the logo and the defined corporate design for print, an online-cd had to be developed which allows Stromnetz Berlin an independent, consistent and confident appearance in digital communication channels.

The challenge

Plenty of text, few images, structural display of the internal organisation in the navigation – this more or less summarises the start point, a clear indication of the communicative requirements.

  • We need to structure from the user’s point of view, to connect to their interest
  • In addition to the menu navigation, especially for mobile usage, it should be possible to access data directly via content.
  • We need a flexible page structurs and content modules which even without sufficient image material won’t seem cramped.
  • Displaying technically complex content with text can be long-winded and difficult to grasp – this needs visual support
The modular start page with quick entrance points for B2B target groups.
Responsive transition from smartphone to desktop view.
Example of a HTML based clickable info graphic.

Information architecture and design

  • The site’s structure has been adapted to the established requirements of its users. Finding the desired content is possible via multifaceted content access and target-group specific direct access on the main page.
  • In terms of content we translated the existing corporate design in to a flexible interface system, which even without large numbers of images appears open and inviting.
  • Against the background of a close-up image of a fibre cable, colourful teaser areas and floating elements seem light and clear, processes seem coherent.

The implementation

  • Initially the requirements for structure and display were resolved during workshops with the content owners and adjusted with the requirements and needs of the core target groups.
  • A responsive HTML prototype was created based on the agreed structure proposal and step by step optimised. Together with a specification sheet this prototype was the basis for the technical implementation by a Hamburg agency.
  • Parallel to the development of the design basics, a set of corporate design compliant info graphics were created to visualise the sometimes complex context, partially animated via HTML5.
  • Accompanying the editing of the content in the new system, several checkpoints were established to guarantee quality and the implementation of the design with the real content.

Project details

  • URL:
  • Customer: Stromnetz Berlin GmbH
  • Realisation: 2014/15, 14 months
  • Technology: Opentext, HTML5/CSS3/JS
  • Work: Strategic and creative consulting, concept, screen design, responsive frontend prototyping and templating (HTML5/CSS3/Javascript), HTML5 based Info applications and animations, accompanied quality assurance