Quick click-through a couple of Hitachi Energy Pages


Web analytics showed a drasticaly high bounce rate for pages that where 2 levels deep or lower in the navigation hierarchy. Pages that where 2 or more levels deep: were accessed only throughs search or links from third parties.

A person wearing glasses
				Description automatically generated with medium confidence

‘Some of the objects in the page are clickable others are not yet they still look similar? ...also even if I manage to indetify a link, I'm not sure where I'll be going next ’


Needs to actively identify link to navigate  through content

A person with a beard
				Description automatically generated with medium confidence

‘There are more that 15 elements I can use as links. Many times I don't link them anywhere... just use them to make the content "stand out"’

Web Editor

Decides on using linking elements randomly when creating pages

Back To Top

Proposal & Process

The proposal was to create a unified design for interactive elements and enhance the configuration of existing components to improve the user's foresight of the link created.

It was necessary to go through the following steps:

  1. Listed all of the existing interactive components 
  2. Provided a visual guide of the configurations available per component    
  3. Visualy displayed their states (initial, hover, active...)
  4. Analyzed how the components were being used (E.g. pointing to video, linking to internal pages, linking to documents, etc.)
  5. Created a new style for existing components: started with a concept of the basic button and grew from there
  6. Tested prototypes of new designs collaborated with branding on new designs
  7. Mapped all existing configurations to new designs and established new configurations that could improve the user experience
Documentation on buttons and links

Design Specs for buttons and links


Perceptible affordance, information on link's target, and a consistent design across interactive omponents made it easier for users to diferenciate between: a teaser component and an image, a link and highlighted text, a link to a video or a link to a document, and so on.

Several months after the redesign of the interactive components, we compared the 'bounce rate' from high level pages and got to see a drop in the amount of users that left the website on that level.

There was a drastic increase in access of pages on a 3rd or lower level (in many cases a 40+% increase)

Additionaly, editors working on the website and colleagues from the company were happy to provide positive comments regarding how easier it had gotten to navigate through pages.

Documentation of the Teaser component: content editors favorite component to link pages due to its visual appeal


Better reach of low level pages meant an increase in the number of viewers of these pages on the external website.

There was a decrease in the number of ticket requests to the IT and HR departments. Before the redesign, a large inflow of tickets were related to documents publicly available in the intranet.

Documentation on Anchor Component

Design Specs for Anchor components: used for in-page navigation.


This initiative faced many difficulties, among them:


This initiative required me to wear two hats:

User Experience Researcher

Project Manager

Documentation on Breadcumbs

Breadcumbs became a standard in all templates for an easier navigation.


From this project I got three main takeaways:

  1. Visual changes can be a 'hard sell' since the results take time to be considered quantifiable. If you are lucky, users will notice them as a good change and be vocal about them
  2. Put the cards on the table: make sure that stakeholders understand problems by possibly showing the whole picture first and then focuse on details when neccesary
  3. Component deprecation is a very delicate subject: timely communication and an alternate solution that works automatically are vital for a frictionless transition
Next Case Study: Case Studies Revamp