Squiz Matrix logo

Under the skin – Restyling a UI

In Uncategorized by richardbarrett0 Comments

This is not an article about the excellent and, in my opinion, underrated sci-fi movie by the same name, it is about restyling a product already in wide use and central to a company’s revenue stream.

Brief

Design a new look for Squiz Matrix CMS making sure not to alter the UI’s layout or move (or remove) screen elements from their original positions.

Overview


The product is called Squiz Matrix CMS, a content management system (hereafter referred to as CMS) developed by Squiz, an open source software services company founded in Sydney, Australia in 1998. I was hired on a six month contract to give the CMS a fresh lick of paint whilst remaining true to its original UI.

It is important to note that no allowance was made for UX-related study. This meant I could only draw on the experience I had gained developing similar UIs in the past. Secondly, all screen elements were to remain in their original positions and nothing could be moved to another location. What this boiled down to was that I could only modify the CSS. There was a tiny allowance to modify the HTML, too, but only in extreme cases and only where absolutely necessary.

With that said, let’s take a look at the old UI.

Analysis


Aside from the unusual location of the logo (it should be fixed tight up into the left hand corner, in my opinion) the issues with this interface are as follows.

Whitespace

All of the elements on the page are squashed up against each other and there is no comfortable area for the eye to land. Whitespace is important insofar that it gives the eye time to breathe and comprehend a page’s structure and is essential for a balanced, harmonious layout. In terms of UI design, whitespace is not empty space; it is as important as any other element on the screen. As, Luke Wroblewski, author of Developing the Invisible, claims:

Development teams are responsible for putting interactive features and content into a product. Empty space is neither feature nor content. Therefore, it is not a requirement. For a designer, however, whitespace is often just as important as the content.

Colour

Colour is another form of data and when used correctly it can convey useful information. However, in this instance, where the application is data-heavy, colour is often a distraction. Take, for example, the black background of this UI: it is heavy, claustrophobic and a little foreboding. This is further compounded by the use of dark purple as a panel heading background colour. Combine the use of these dark tones with the white backgrounds of the containers, plus the colourful row of icons in the top right corner, and you have the makings of a very high contrast and distracting UI. Finally, the use of decorative flourishes add their voice to an already noisy interface.

Alignment

Alignment plays an important role in conveying structure and hierarchy to the end-user and is another one of those invisible design elements that relay valuable data. This interface is poorly aligned and, because of that, the main page sections appear to jostle for attention. This has the knock-on effect of breaking the visual flow to the point where elements seem unrelated to one another.

Conclusion

With the analysis complete it was fairly clear where improvements could be made:

  • Open up the interface by adding whitespace.
  • Knock the colour palette back, so it does not interfere with the content, and remove superfluous decoration.
  • Straighten out the interface and create relationships by aligning elements to one another.

My unofficial #4 is to make the interface nicer to use. I was aware that a lot of people used Matrix on a regular basis and I felt for those people, I truly did. Even though I could not interview or survey them directly, I knew I had the agency to make their time in Matrix less of a strain and more of a joy. This goal was foremost in my mind as I got to work restyling their interface.

Design & development


Before I could begin working on the restyling, I needed to create the Photoshop designs. This was actually quite a lot of work because, like any CMS, there are many pages, modal windows, state changes, buttons, etc. to design. However, it was just the case of applying the theme based upon the conclusions outlined above. Moreover, I also spent a reasonable amount of time designing new icons. Once all the designs were approved work began implementing the restyle in CSS.

The following image is a side-by-side comparison of the restyled and original home page interfaces respectively.

This is a great example of how a little time spent on analysis and the application of basic design principles can breathe new life into tired interfaces.

Results


As far as development is concerned, it proceeded without a hitch and the new look CMS is serving Squiz customers to this day.

To finish, here are a couple of extra examples of the new theme applied elsewhere around the CMS.

Share this Post

[mc4wp_form]

Leave a Comment