Page Templates

Quick scroll through a couple of Hitachi Energy Pages


Lack of page structural consistency hampers both user experience and editor experience due to higher cognitive load on users and higher effort necessary to create pages.

A person wearing glasses
				Description automatically generated with medium confidence

‘It is cumbersome to browse through pages, since each one is structured totally different; even though they inform about the similar products


Needs to actively understand the page to be able to browse through content

A person with a beard
				Description automatically generated with medium confidence

‘Since I have to come up with new layouts, every new page I create takes me more time to assemble than to come up with the content’

Web Editor

Starts with a white canvas when she is creating a new page

Back To Top
 Wireframe of an event page Wireframe of an event page topics Wireframe of Wireframe of Wireframe of Wireframe of Wireframe of Wireframe of Wireframe of Wireframe of Wireframe of Wireframe of

Wireframes of multiple page templates

Proposal & Process

The proposal was to create topic-specific templates that editors could use as starting point.

It was necessary to go through the following steps:

  1. Divide pages in topic types
  2. Analysis existing pages: identify tendencies and best practices together with content owners
  3. Create wireframes based on previous analysis
  4. Prioritize page areas and decide which should be mandatory or optional with content owners
  5. Translate wireframes to available frontend components
  6. Create visual mockups
  7. Have signoff of content owners


Editors benefited from a starting point that lowered initial effort and even shaped how they structured content on a page. Three months after the release we conducted Q&A’s where Editors feedback was excellent noting out a big improvement on their workflow thanks to templates.

Consistent pages facilitated users who were browsing through content, since pages became more predictable regarding how content was arranged on each page. Even though no data was able to support our hypothesis, thanks to template restrictions: we managed to remove editor’s bad practices that hampered user experience (e.g. hidden content in tabs, misuse of tables, lack of headings)

As a bonus, visual hierarchy across pages was enabled through the creation of the ‘Stage’ Component at the top of each page. Pages on the first level of navigation now start with a ‘Big’ Stage with an image, lowering to title only stage on deeper lower-level pages.


Resources necessary to create new pages where nearly halved. The average page creation time was reduced from 90min to 50min. The editors started focusing more on shaping the content to follow the template rather than re-inventing the layout every time.

Quick demo of editor experience when creating a new page.


This initiative faced many difficulties among them:

Example documentation of a page template.


This initiative required me to wear two hats:

Project Manager

User Experience Researcher


From this project I got three main takeaways:

  1. Understanding of Editor Freedom (A.K.A. Less is more): ‘What does it mean to let editors create pages freely?’. For many, starting with a white canvas can become more of an obstacle than an advantage, since it requires more decisions to be taken that are distinct from the page’s topic. Narrowing down layout capabilities and options of templates eases the editor’s mind and lets her/him focus on the content.
  2. Setting up mandatory vs good-to-have: It is important to have clear vision of what is necessary for a design to work since it will affect the work of hundreds of people.
  3. Up to certain level, page consistency is a given for any modern website. Once you find a website that looks different on every page: as a user, you could even start questioning the content.
Next Case Study: Design System