So I knew what I had to do, what data I wanted to display and how I wanted the thing to look from a stylistic perspective. It was time to start the fun process of trying to design (on paper first) the interface with some consideration as to how users would interact with it.

The scanned page of my sketchbook below demonstrates that I had two ideas – which I admit is not the most thorough response to this process, but I think I hit on a winner after only my second attempt. Still, let me talk you though the two designs:

The one on the left I arrived at wearing my “functional hat”. By this I mean I was subconsciously considering “oh god, how am I going to create that?!” because usually, that is the question I am charged with solving on the other projects I’ve worked on. It’s a tough habit to shake for a developer (I use that classification loosely).

So in this idea the weather type was displayed in a large circular window in the center of the screen (information architecture: it’s the most important so deserves prominence) for the current time. Most people can tell what the weather is doing currently by looking out of a window (or they’re experiencing it first-hand) so there must be some way of seeing what it will be like in the future (3-hourly increments for the Met Office API). I therefore decided that swiping this left and right would advance (or regress) the time depending on the direction of swipe. The information in the other two circles (temperature and wind-speed/direction) would change to reflect whatever time is currently selected. But this solution came with a problem. Two problems actually.

Firstly, it’s boring and very derivative, something I was hoping to avoid and secondly, I would have to display the time in a very contrived way, again, something I was hoping to avoid. Whilst this idea was very functional and easily created, it was going against the first point raised by my brief. A new idea needed generating.

By contrast to the first idea, the design on the right was conceived with a mix of my “freedom to express ideas visually hat” and my “functional hat” on. However, this time, “functional hat” was kept in check and only allowed to take a peek to see if everything was at least theoretically possible and not some crazy UI/UW disaster!

This new design is going to feature a cool ‘wheel of fortune’ for your weather.  Basically the whole content layer (information displayed in the 3 circles – same as identified in the first idea) will rotate. Imagine the contents of the 3 circular windows on a giant disc divided into 24 segments. A swipe left or right in the main circular window will rotate it to the next / previous hour.

I was very pleased with this idea. There were still some issues which needed ironing out before I could start creating the design (and thus saving a vast amount of time). So I opened my sketchbook once again and began working through my concerns:

As you can see from the above I had 4 eureka moments (illustrated by the little light bulbs):

1. I would make it obvious that the information were displayed on a wheel which could be rotated by having the wheel spin into place when the app was launched. This would give the visual clue to the interaction model of spinning the disc to change time.
2. A way of getting rid of the contrived time display would be to use the circular window’s outside edge as a clock face! Great I thought… but there’s 24 hours in a day not 12!
3. Well how about changing the background colour of the weather type from a blue (day) to a very dark blue (night) and reflect that on the “clock face”. But that would be too confusing, not the colour change, but the fact that 12 dots would have to do the job od representing 24 dots just by changing colour. But when would this happen? Bad idea.
4. But that led to my final idea, which I admit is still a little experimental and there’s a risk it might not work but I was happy enough to at least try it in the designs. Basically each of the 12 dots around the edge of the main circular window would be made up of two components. A circle (sun) and a crescent (moon). Depending on what time of the day it was, one of the two would be highlighted. So if it were 11am, the circle in the 11 o’clock position would be highlighted to indicate day. Whereas if it were 11pm, the crescent would be highlighted to indicate night. The transitions would be night to day: 6am and day to night: 6pm. It get’s better, this transition could be dynamic and visually display the sun rise and sun set times that day! Before I got too carried away however I wondered how this would work in the very North of Scotland in the winter where its pretty much dark all day!

I have to admit there was a bit more of the design I would liked to have worked out more of what would be required but during this relatively short phase of ‘pre-development problem solving’ I managed to figure out enough of the key issues to make a start on the mock-up designs.

In the next post I will share with you how the sketches here were realised as Photoshop mock-ups!