For product guidance visit

For product guidance visit

For product guidance visit

Invotra brings Material Design gains into the Enterprise Intranet world

July 2020 saw Invotra launch a complete redesign of the Invotra product using Material Design – Invotra 5.0.

It was the most important project for years, for the following reasons:

  • The visual appearance of our product is completely refreshed

  • The UX of our product has massively improved

  • Our design process has been revolutionised

  • It gave us the opportunity to re-think every aspect of the product

Product features including message wall posts, news widgets, the wysiwyg, group posts and broadcasts

Before I get into how we used Material Design for Invotra 5.0, there are a couple of things to define first:

Material Design

“Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science” Definition from https://material.io/

Design system

“A design system is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.” Audrey Hacq, Everything you need to know about design systems

Why our old process needed an update and why Material Design

Invotra primarily enables government organisations to communicate, collaborate and manage information on an enterprise scale. That is, thousands of civil servants and millions of items of content.

Our customer's logos

Who our customers are and how they need us has shaped the product dramatically since 2014. We have reacted to what’s been asked of us and we’re always aware of how our decisions impact enterprises where 90,000 users login to Invotra on a daily basis.

As a result, Invotra has developed and evolved with its customers. Where this has made us the perfect fit for so many public sector organisations, it left the product in danger of over-engineering and an emphasis on addition over simplification.

Material Design is helping us solve these problems

Infographic showing material design benefits including giving a framework of universal understanding, Google investments delivering accessible user-centered design. It is built on Atomic Design, providing a source of truth for anyone working on the product, and that it looks great!

A major benefit of Material Design is that it’s a design language and has (almost) every component we need for Invotra.

This was huge because we didn’t have to specify the components and we had our source of truth. With Material, every new screen and component became unified and we avoided custom solutions when core components were just as effective.

This meant the product team could focus on thinking deeper in how we make Invotra simpler and better to use. We had our universal best practice standard and could run all new features, updates and fixes through that standard.

With such strong foundations, we started to rethink page designs and patterns. For example, here’s what our ‘All content’ page looked like before the refresh:

Managing all content page before Material Design updates

This is what it looks like now:

Material Design Manage Content page with search filters and a list of all content titles, created and updated dates, authors and sections

As you can see, we’ve made significant changes.

We changed the name of the page to ‘Manage content’, as this page is for users to manage their own and other users’ content. The name All content was less clear, in Invotra 5.0 we want everything to be clear, quick and obvious for our users.

Material Design content table with all content titles, created and updated dates, authors and sections

The page is decluttered, with a data table making content more readable and a collapsible drawer on the left showing and hiding filters that can be applied and reset.

Filter drawer containing message categories and apply and reset buttons

Another great example of the positive impact Material Design has had on Invotra 5.0 are the new search filters.

What’s more, everything we design and implement now can be reused elsewhere consistently. Before, every screen was independent and used unique components. By reusing components and patterns, Invotra 5.0 is automatically aligned, consistent and simplified for us in the product team, and for our users.

Joined-up design and usability

With Material, the user experience is now simpler and easier to use. There are less processes to remember, reducing cognitive load. And, the product is much more manageable to improve and develop.

Talk to us

To learn more about Invotra, please talk to us

We'd love to show you how Invotra can transform the way your organisation works

Invotra 5.0 - Laptop and Mobile with message wall and a profile page displayed

Discover what your Invotra intranet could look like with a free, branded video