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
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.
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
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:
This is what it looks like now:
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.
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.
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.
