Ideas from the team

Category

Introducing the New Spektrix User Interface

This post was written by our UX Lead, Ben Sekulowicz-Barclay and our Visual Designer, Tina Pedersen.

The Spektrix design that we know and love is having a makeover. In the nine years the system has been around, a lot has changed. Lots of new features have been added over the years, but we haven’t stopped and looked at the system as a whole for a while.

So, we’ve decided to redesign the user interface that you see everyday, with the aim of making your lives easier. At Spektrix, we always keep our users at the front of our minds. Your goals are our goals and we wanted to create an interface that helps achieve them.

With people spending as much time as they do on a variety of other interfaces (like social media networks, banks, news websites), we wanted to make our interface clear and easy to use. We want the next step to be obvious to you and went about finding a way to make this happen.

Here are some pretty awesome new changes that we think you’ll enjoy.

1. We’ve made it easier to get around the system

One of biggest aims when redesigning the Spektrix UI was to make it as easy as possible for users to move around the system. Behind all the green lies the information architecture, a term used to describe how a website or application is organized page by page, and how each page links with others. To help us understand how people move around Spektrix, we created a sitemap showing every page in the current system.

Part of our sitemap showing the Administration interface on the wall at Spektrix Rise.

As you can see, it was pretty complicated. Once we’d mapped out how many pages we had and the relative importance of each of them, we were able to tackle the navigation systems, which are all of the different ways users can move around the system. Using our new sitemap as a guide, we created a new set of menus to make it easy for users to move between each interface, page and section, making everything more accessible and in the place users would expect it to be. Check out some of our menu ideas.

As well as updating our menu structure, we’ve also improved our signposting, which as the name suggests, is how we make sure users are aware of where they are in the system at all times.  We’ve added breadcrumbs (a term used to let users keep track of their locations within the system) and more indicators and notifications that show users exactly where they are in Spektrix and what’s going on. It’s a lot harder to get lost in our new UI!

2. We’ve made our page designs more consistent

We really focused on the consistency of the Spektrix user experience. Before users click on a link, they should already have a good idea of where it will take them and what that page will look like. Our new sitemap features hundreds of pages, many of which perform very similar jobs. We found that over 75% of the pages in Spektrix either show a list or table of items (such as events or offers), or they allow you to edit a particular item using one or more forms. Once we knew this, we were able to develop a core set of templates, or layouts, that cover 90% of the functionality in the Settings and Admin interfaces.

For the user, it means only having to build that muscle memory for a small number of page layouts, making it quicker to use and easier when training new users.

3. We’ve added some fun new icons

Creating a consistent design language was important for us when designing the new interface, to make sure it conveyed our personality in the same way as the fonts, colors and icons we were using.

We use icons in the system for two reasons. Often it’s faster to recognize an icon than a word and they save space. They also make places where a lot of repetitive information is needed more visually pleasing and they’re easier to ignore if you’re looking for something else on the page.

If you know and follow Spektrix, you’ll have seen our white or green outlined icons before as they’re an important part of our brand.

We wanted to keep the icons used in the UI similar to these in style, while making them a bit more screen-friendly. That meant upping the stroke width a bit which results in clear looking icons, even on a small scale.

4. We’ve chosen a new color palette

The first step in developing our design language was to create a mood board; a collection of pictures, colors and images that work as visual references for the style and emotion that we want the system to convey.

We know that Spektrix users often spend many hours a day in the system, so we want it to be a place where they always want to be, no matter what their mood is or the time of day. We were inspired by the calming and relaxing atmosphere of a forest at dawn, mixed of course, with the Spektrix green, and created a color scheme that we would use throughout the system.

Every element and color has a purpose and a function that users can relate to. If the page is neutral and a color suddenly pops, a user’s eye will move towards it automatically. So when they see red, they’ll know something is wrong; when they see green, they’ll know something is correct. 

In general we use Spektrix green as a guide through the system to aid recognition. We use this color to highlight which section of the system you’re currently viewing and as the background color for the most important button on the page, the one that will save or update your changes. The header also uses a large block of Spektrix green so that you can quickly find your Spektrix system amongst all of those browser tabs.

The rest of our natural, forest inspired palette is used for to visually identify specific elements such as graphs, price bands and delivery types.

5. We’ve picked out new typography

Most of the system consists of type; words and numbers. This makes typography one of the most important parts of the interface. The most important factor for us when choosing fonts is legibility. Users should be able to scan and read the pages quickly to find the information they’re after. It’s also important that a font is neutral. In marketing and packaging, design typography evokes feelings, but in interface design it should display information as clearly as possible.

We’ve tested and played with numerous possibilities in the process of finding the perfect fonts for the new Spektrix. We narrowed down our search to a few specifically U-optimised fonts and finally decided on Roboto, and its sibling Roboto Slab.

Roboto was designed for Google by Christian Robertson in 2011 specifically for apps. It looks great on a monitor and its rounded, geometric nature makes it nice and legible. Roboto Slab has got a bit more character and paired up, the family bring a calming and elegant feel to the redesigned Spektrix.
----
We’re really excited about these big changes to the system and we know you’ll be anxious to start using the new design. This is planned to be released one interface at a time, starting with the Settings interface in our next major release, Release 44, in the next month or so. If you’re a Spektrix user keep an eye out for the changes and further details in our release notes.