A few friends and I were fed up with a certain local weather site not working on our phones. So we came up with an idea of taking that data and reformatting it into a mobile friendly view. But as we did more and more research we found we could get hold of a lot more data. So we thought why not use this data and create a mashup of all this available data in one site - Specifically for Jersey.
So we did.
When Tom and I began working on what became http://jsy.io/weather, the domain was chosen first. We chose a .io domain (which stands for input / output) as we felt it reflects the current trend in tech companies using .io domains, and it suited our game plan; to create mashups using various data API's and displaying them nicely via the web.
JSY was chosen, because it's short. So then whilst Tom began looking into data sources and what other tech to use, I went to work on what I felt was the most important: the mobile view. This was the first time I have designed a site from the mobile view first. I could do this with confidence as Tom and I decided we would not support IE7 and below - which cut development time and meant we could focus on making it more future and mobile friendly. *Incidentally Facebook, Google etc have dropped IE7 support, with them looking to drop IE8 support soon.
Tom got an early "Alpha" version working that had ALL the data in it, so I knew what I was designing around, which again sped up my part. Tom and I went back and forth about what to include and what not to. Tom is 80/20 in favour of function/form, whereas I'm 80/20 in favour of form/function. The result of this, was that I kept stripping things out that he felt were required from a functional point of view. I think we came to a good compromise. We also both agreed that we would view the analytics data (with custom events tracking) to see what people are using, and along with any other comments via our Facebook, Twitter page or email address and then refine current data, or potentially add new data to the view.
Keep it simple
As much as the aforementioned simple weather site annoyed me, it did have a beauty, in that it was simple. And in my mind that is why people were using it. I tried really hard to keep the JSY Weather site as simple as possible, and not to scare people off with 'data overload'. So we chose to show that basic data that we felt most people would find useful, then use buttons to reveal the more complex data therefore reducing clutter, yet keeping 'power users' happy.
I was also not a fan of colourful weather icons, so I decided right from the start that I was use the websites background colour to represent the temperature range. This immediately affects the look of the site and at a glance - gives an idea of the weather. I went to work mapping out a colour / tone wheel based on photos, and colour theory to a range of temperatures, and then used LESS to fill in the rest via calculations. (It still needs a bit of work in the middle). I took it one step further and used CSS3 Gradients to overlay the 'Low' temperature. So we now have a representation of the two extremes.
Keep it mobile
Another area that got me really excited was making the web site, into a "mobile web app", so that if you are on an iOS device you can 'bookmark' this website, and get a custom jsy.io weather app icon, along with a full screen version. This took some sneaky tricks to make it work, but I'm very happy with the results. the whole site feels very 'appy' so having it as bookmark-enabled web app made total sense. Edit: since writing this it looks like this paid off. Our analytics reports for the first few days show high numbers of new, and repeat mobile and iOS usage. The largest referral coming from the Facebook iPhone app
Keep it sharp
One final consideration for the design was "Retina" screens. We didn't want all the icons to look blurry or fuzzy on retina screens. So without resorting to having two versions of each icon, we decided to use a font for the icons. Yes, I know that sounds like an oxymoron, but by using an icon font, we can ensure that the font will always be sharp (much like how text is sharp on a retina screens). I won't bore you with the details of why this is - but if you are morbid, here you go.
Get it out early
Then Tom and I just kept beavering away, comparing notes over Skype, and the beautifully simple to do app: workflowy. We kept refining the app, as we were actually using it and testing it as we were developing and designing, which worked really well for us.
Now comes the hard part…
Once we were happy with our self-inflicted launch deadline, we pressed the button. But as most of you will know, this is not the end; merely the beginning in many ways. We now have to get the site out in front as many people as possible. Tom and I have not discussed advertising. We are going to try and grow the audience as organically as possible, and see how far social media can take us.
What do you think?
We'd love to hear what you think and your experience of using http://jsy.io/weather. Please comment us up below.