Squiz Matrix

Content management

Editing tools

User experience

User interface

The opportunity:

Drive migration to Squiz Matrix version 6 by making it easier for non-technical users to build the page content that they need to deliver for their customers.

The dual interfaces of Squiz Matrix. On the left, the Admin interface aimed at technical users. On the right, the Edit+ interface aimed at content editors which was later depricated.

The challenge:

Squiz Matrix is a content management system, and the flagship product in the Squiz suite of products. While the administration interface of Squiz Matrix is extremely powerful it can also be confronting for low-tech users like content editors. Over time this need was addressed by the creation of a second interface that could be plugged-in to an environment to allow editors a more user friendly experience. When the Matrix product was moved to SaaS a decision was made to end-of-life the plug-in editor as it was too costly to support.

The decision to remove the low-tech editing interface meant that the administration interface needed to be updated to be more welcoming to content editors. Key challenges included modernising and simplifying the interface enough to enable users of the existing system to feel confident they would not be overwhelmed by the new experience, planting the seeds for future feature development within the page builder, and demonstrating the value of the new version of Matrix to customers who were yet to migrate to SaaS.

A set of personas were developed to help the team solve the problem for the right users.

A low-fidelity storyboard was developed based on the insights from user research, and a prioritised list of jobs to be done for the target persona.

More detail was built in to a refined storyboard that became the basis for presenting the new vision to stakeholders.

The product vision was communicated at the Squiz User Summit, using the higher fidelity storyboard.

The approach:

A design workshop was held to define the vision for the page builder.
Key personas were identified and fleshed out with existing and new research.
An end-to-end user journey was mapped out to be used as the basis for testing and validation.
A series of wireframes were developed from the user journey and tested with existing users.
A set of early hi-fi designs were created based on feedback from the wireframe testing, and used as part of a preview in a keynote speech by the Matrix product manager at Squiz’s annual summit. One on one sessions were held with customers at the summit to gather more feedback.
Surveys was sent to Matrix users to collect additional data on how the existing administration interface was used.
Final designs were refined and implemented, released and iterated on.

The Squiz Matrix team workshopping a new approach to Asset creation in the product.

To ensure everyone was in alignment early on in the build, the team defined and labeled the elements that would make up the new application frame.

Approaches to sidebar behaviour in the content editor views were prototyped.

Features based on research:

A way to consistently show contextual information for a page, including the page structure, settings for content on the page, and publishing details.
The ability to search for content components, and associate an icon with them.
A simplified approach to adding components to a page, especially when using default settings.
The ability to view and download invoices for subscriptions.
An editing interface that is only visible when needed, allowing content to take centre stage.

The existing Admin interface approach for inserting components was confronting, de-prioritising the most important fields a user needed to provide.

An early sketch exploring how the new approach to inserting a component to a page might function.

The updated experience for inserting components introduced a side panel and focused on helping users find and select the template they needed.

Additional functionality was added to the component configuration screen to allow an admin to assign an icon and colour to custom components to help content editors distingish between components easily.

The existing Admin interface approach to component actions was inconsistent and space consuming.

The updated approach to component actions used a contextual box that only appeared when a user was working on that containers content.

The outcome:

Enabled increased migration to new version of Squiz Matrix.
Reduction in the complexity of the editing interface for the vast majority of editors.
Set the foundations for the future introduction of a complex component management system for the platform.

The Squiz Matrix interface showing a user interacting with components on a page.

The redesign introduced a Page structure panel that lets users see an overview of their page, and easily reorder components.