MozSpace in London

We recently ran a mini hackday at London’s MozSpace to look at the design and user experience (UX) of our interactive 3D model. We invited a small group of developers and designers to team up with Met Office Informatics Lab members to share and discuss our demos, hack them, break them and imagine some more.

First impressions

My first impression of the MozSpace in London was ‘wow’! Funky, bold colours and designs everywhere. I was particularly distracted by the location stickers that were mounted on the wall in reception, depicting all of the MozSpaces around the world.

Mozilla locations

This was followed by sheer dismay when I realised the colour clash with my sketch book…

Colour clash

#metzilla

#metzilla kicked off by discussing the aims and progress of the project. The group then split to delve deeper into the aims of the project. It was incredibly useful to be able to talk through the purpose of the visualisation and begin to consider the most important elements to the user.

The Mozilla workspagce

It was at this stage that we began to draw and sketch the ideas to bring them to life. Having something sketched on paper really helped to focus on the hows and whys.

User interface

User interface transition

Interface mock-ups

These sketches not only proved invaluable as talking points but they also helped to inform the next stages of digital mockups. These included working up the idea of the UK and weather being housed in a visible cube, as well as how the interface would look around the cube – what would be consistent; how would the controls look; what colours would be used?

Interface One
Interface Two

I worked to echo the shape of the cube, using angles and elements throughout the design. For example, the navigation uses angles to form arrows and sliders based on the original cube. Giving the project a name and logo really helped to support the idea. ‘Weather cubed’ uses three main colours taken from the Met Office secondary palette. The bold, solid colours mixed with the simple white background help to keep the design clean, uncluttered and modern.

An amazing space

The facilities at the MozSpace can’t go unmentioned. The working environment allowed for flexible sessions, mixing breakout areas and conference facilities to allow the group to split and flex throughout the day. The light, airy workspace included charging and docking stations, big screens, AV equipment and plenty of space and moveable furniture. All with a sprinkle of fun and inspiration, including table football, table tennis and my favourite, an arcade machine.

Arcade machine

All designed to make you have fun and maximise productivity without you even realising it…and it worked!

Here we are behind the bar helping ourselves to tea and coffee and, most importantly, the amazing range of stickers Mozilla had to offer.

The bar

What’s next?

Going forward we’re hoping the group will continue to help and develop ideas and provide feedback to ensure that the visualisation remains both useful and beautiful.

Huge thanks again to Desigan Chinniah and the team at Mozilla for hosting the day and allowing us access to such a creative, comfortable environment.