New Nomensa Design – style meets user experience

A little while ago we released the new Nomensa website! We’re all really proud of it, but it’s certainly gone through some transformations to get to where it is now. Now it’s had some time to settle in, I thought it would be nice to share some of the thinking and initial concepts we went through to get to this point.

Design from frustration

Before attempting any redesign you must understand why, or even if, the website needed a redesign in the first place. In our case, the Nomensa site definitely needed some love. It was an almost 4 year old design made up of many different components mashed together. It simply didn’t communicate who we are, what we do and importantly reflect our values. There was no flow, no style, no nothing! To be honest, it was a bit embarrassing for us… So after living with this design for some time, something had to be done. This prompted me to give a little surprise presentation of some concept ideas. Our MD, Simon, often spoke of great little ideas and aspirations for our website and through the years I’ve been collecting these in the back of my mind – they just had to be used on our new design.

Design requirements

There were a few key elements (as ever!) for the design:

1. To be bold! To stand out and have something unique. Also to have something that’s never been done before – that’s a tricky one with the Internet these days, but a challenge I was looking forward to;
2. To make more of our Nomensa ‘O’ element, as this shows what we’re about: making the impossible work (fitting the square peg in the round hole!);
3. To be highly accessible; From a design point of view this means (among other things) clear, legible typography with high contrast;
4. To showcase the advanced features of Defacto 2;
5. To showcase our knowledge through the website. This last one was an interesting one, Simon spoke about almost ‘testing’ people on the site – not some kind of intelligence test before you can view the site, but something that shows our understanding of human behaviour and interaction.

Solution?

The immediate solution to all of these was literally sitting under my nose in the Nomensa logo: Circles. This provided some amusement in the office for a few days as I sat staring at circles realising their potential, but circles work on so many levels:

• Perfect geometry – representing perfection in our work.
• Represent what we’re about: A team working in the User Centred Design (UCD) life cycle.
• …They’re not square! The web is full of squares, everything is made up of them. Circles represent something different and that is notoriously difficult to do on the web.
• And of course it ties in nicely with our ‘O’ element of our logo.

Circle inspiration

Having a circle is one thing, knowing what to do with it is the other. I considered all the elements from my initial brief again and found one that worked nicely with the circles: Defacto functionality. In Defacto, there’s a great function we call ‘Panels’ – giving you the ability to create any content in a panel space which can be re-used and moved around as you like. So, what if the whole site was a giant grid of circular panels? This would mean a flexible grid to work with allowing full control over every element of the page. (It also made me think of the very first Bond film, Dr. No, and it’s fantastic/psycadelic intro!) The circles in this grid essentially make a pattern, so what happens if you break the pattern? As shown in the above example, your eyes jump straight to the ‘broken’ point. In this example the orange circle is the odd-one-out, breaking the pattern. It’s a perfectly simple example of how humans interact with patterns, thus subtly and simply expressing our knowledge.

The concept

From this point, the initial concepts came together: I wanted to create a beautifully simple site. Something that allows you to do your task, and quickly. It’s what humanising technology is all about! Throughout this design I kept a quote from Albert Einstein in mind:

Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius – and a lot of courage – to move in the opposite direction.

After perfecting the circle grid and choosing some initial colours from our palette (ensuring decent colour contrast) I jumped straight into this concept. It only includes what I thought were the key elements required for our website. It’s a brave and bold statement to make about ourselves, but one I thought could work nicely. Does it need more? At this point I didn’t think so. It was a beautifully simple design that covered all my initial requirements and basic user goals. There was also an idea of hidden images behind the circles that would appear on hover, just to entice users into ‘playing’ with the site. I worked up a few alternatives of how the homepage could be in radically different layouts yet it still obviously being the same website. Another benefit of using these circles is that it became very ‘touch’ friendly for mobile and tablet devices. There was a lot of potential with the circles. Initial feedback on these were really great, Simon was really positive about them, but – yes there’s a but – this was all done before any real thought went into the content and requirements of a brand new website.

Communication is key

A good design is all about collaboration and communication. These designs were quickly designed from my own passion and so these were certainly concepts and never the final thing. After the initial concepts were discussed in depth, I attempted a few different designs based on the circle grid and found problems with accommodating the amount of content ultimately required. Instead of struggling to take this one further, we produced a completely new second design, done through a proper collaborative User Centred Design approach. In particular, we did some collaborative wireframing deciding exactly what needs to go on each key page. In my concepts I was working on the hopeful desire that we could get away with only three objects on a homepage, but we needed to work with realistic content here. We nailed down a new layout and from this came some very clean and usable designs that were a delight to work on. With this a general style emerged and a style guide could be implemented for the entire website. We wire-framed the core website experience out on one of our writing walls and walked Simon through it (he’s in the blue shirt with Richard our head of technology).

The Details

We opted for a fixed-width approach with the design to ensure everything could be pixel perfect and that everything lines up exactly to the original designs. The grid was based on the eight circles that are visible at the ‘standard’ 1024 pixel wide screen. Various layouts were made based on this grid being broken down into smaller columns. As with the earlier designs, we did keep the big circles in, just perhaps a bit hidden in the guise of the big hero images. The ‘heroes’ of pages are large circles cropped, hiding the top and bottom parts. The shape of the circles also neatly lead your eyes around them. For example if you follow the side of the circle from the top down it will lead your eye to the content below.

Typography

Typography was really important to me in the new design. In keeping a simplistic design, I really wanted the content to shine. As it’s impossible to design and create images for every single page, I wanted to ensure the typography itself can be a feature. My general thinking was ‘anything but Arial’. This stemmed some interesting font options and techniques to get the right quality that I was after. For headings, we went for a similar (but open source) typeface to Myriad-Pro called Vegur. I had to modify the font file as it didn’t include accented characters for our team members with them in their name! To compliment this typeface I used Lucida Sans for smaller sized text because of it’s clear on-screen legibility and weight.

Colours

I used a mostly stark palette, allowing for small amounts of colour into the design in very specific areas. The easy option with colour is to splash it around to garishly attract attention, but it can be used in smarter ways that maintain the clean look and feel we wanted. This goes back to breaking the pattern again – by using small amounts of colour, when used it really stands out. In addition to our Nomensa blue and orange colours, some additional pastel colours were included to compliment the design.

Icons

And don’t forget the icons. All icons are used on top of the bold colours, so they’re simple monotone shapes to give them the desired impact. As you would of hopefully seen by now, the final result maintains the simplistic, bold and usable design we originally strived for. We managed to incorporate all requirements from each team and combine them into one design that was infinitely stronger than our previous one, and gave a brand new look and feel (just in time for our new logo too!). So what happens next? Now the design has been in place for a little while we can see how people use and interact with the site. Following our user centred design lifecycle, we learn from this and continue to optimise the design further to meet these needs. A great website should be evolving, never static! Our next steps is to constantly keep these optimisations going, so keep an eye out for them. So what do you guys think? We really hope you like the new design and would love to hear your thoughts!