After a few weeks of working on an updated version of Space Weather I have finally released 4.0. This update is the product of a redesign from Microsoft and Nokia. A few months ago I won a trip to San Francisco where I met a Senior UX and Design consultant from Microsoft who helped me redesign my application. The result was a great new UI and a lot of work added to the backlog.
The last few weeks I had quite a few decisions on my hands. It is one thing to mock up a great looking UI, and it is another to actually implement the UI and bind data to it while still pleasing all of my existing customers. So little by little I started making some of the changes and creating small prototypes and compiling them into a bigger functional application. At first I thought that there wasn’t a way to present all of the data that previous versions had. I even wrested with the idea of turning this update into its own application, a second “lite” app (thanks for talking me out of it Peter) but then I found a way to logically break up all of the information I was presenting. It sounds simple and makes a lot of sense when looking at it now but when I first started re-writing Space Weather 4.0 it was a little overwhelming.
So i broke it down into 5 main parts or pivot. Some pivots have more information that the user can drill into if they choose to.
In this pivot I show the likelihood of seeing an aurora based on the Kp index. The Kp index is on a 10 point scale (0-9) and is updated regularly. The ellipse will move based on the Kp index and will also change colors. 0 is gray, 1-3 is green, 4 is yellow, 5-7 is red, and 8-9 is purple. If it even turns purple we are in for a show!
I also display the most current space weather information. For most people this pivot is all you need to see to get a glimpse of current space weather conditions and if it is likely to see an aurora (Northern Lights).
I used the Flickr API to display images that match the search term “aurora borealis” and filter the results based on images that can be used commercially. The Flickr API was pretty easy to use and there is a NuGet package for this.
In the alerts pivot, I show the active alert count in the pivot header and the alert details on the main page. You can drill into one of the Alert item details to read more about it. Again, on this pivot item’s main page I used the same Flickr API mentioned above but grab a different image.
The forecast section shows the forecast for the next 24 hours. There are different categories for each of the predictions. The image I use in the background is from the Solar Dynamics Observatory (SDO).
This pivot shows space weather over the last 24 hours. It shows the same categories that the forecast shows however this is past activity. The image shown here is the past Kp index.
This is the last section but contains the most information. The Explore pivot is a hub where you can get more information if you like. It contains many images, movies, RSS feeds, and even real-time generated charts for you to explore. Each section is a gallery of media where you can find web cam images, the current solar wind, and even movies of the sun.
After getting my pivots organized and the data wired up I decided to focus on my Live Tiles. Prior to this updates my Live Tiles were live, but not alive. What I mean by this is that the feature was enabled but it showed an image that was hard to make out and didn’t really give the user any valuable information or a sense that it was alive. I decided to surface the Kp index to my Live Tiles, using the same look and feel from the main pivot. I also update the counter based on how many active alerts there are. As an added bonus, if you are using Windows Phone 8.1 they support transparency!
There are a few things I intentionally left out of this release. One is the lockscreen image. I wanted to be sure that I did this feature some justice instead of just cobbling in a few random images like I was doing before. I also left out the current status of each type of space weather reading/storm. I haven’t found an elegant way to do this yet but I have some ideas.
A huge takeaway that I discovered after redesigning my application was to separate your business logic from your UI. Luckily when I wrote my application I followed the Model View ViewModel (MVVM) pattern, so ripping out the UI and starting all over was relatively easy. I reused 100% of my business logic for this update and only added new properties where I needed to. Space Weather is almost 16,000 lines of code and I wanted to be sure I could reuse as much as possible. Space Weather 4.0 looks drastically different than previous versions however since I followed the MVVM pattern almost all of the code behind the UI is the same. I highly recommend following a pattern like this in case one day you decide to give your own app a face lift.
Overall the experience with Nokia and Microsoft was a welcomed one. Dave Crawford pointed out that my design (or lack thereof) was really needing to be simplified and focused. My application is information dense and he helped my break it apart by redesigning my layout into pivots. This helped me organize related content and display it in a more consumable manner, which meant a better overall user experience for my customers. Taking a mock up and advice from him really helped transform my application into the one it should be. I wish I could work with him on refining some of the rough edges it still has however his advice and time was much appreciated and will continue to influence my future applications at home and at work.
You can download Space Weather here:
You can see it in action below:
You can read more about the release here: