I’m a little late on blogging about the release of Discovery Earth Live. It is an online application built in Flex which allows user to cross reference earth related data and information upon an interactive 3D representation of the Earth.
Click here to visit Discovery Earth Live
I was the lead production designer on the project and at first, was heading up extending the design comps for skinning. After some major design changes, I had to begin redesigning the whole layout. The change came late into the project and it was to reduce the width by 120px. Which may not sound like a lot to everyone, but in the web/software industry, that is huge!
This change did not simply call for “squishing” the app and squeezing the design into a smaller width. Some instances this would work, but not in this case. We had a very unique experience designed, especially with the use of a 3D globe, which could not be simply squished. This would’ve have really made the experience and design crumble.
Instead of doing that, we opted for an overhaul and redesign. I was actually at Adobe MAX in Chicago during the time. IMyself and a couple of the development team members were out there, and we started working on it from the convention center and hotel.
I maintained the theme for the most part, that our Concept designers had already put together and Discovery already approved. Since we did have to reduce quite a bit, I felt that using curved modules on the right and left would not only look unique, but it would serve some functionality with the 3D earth by allowing it to breathe a little more. This gave the application a little more dimension and variation from typical straight edged components and modules (which does not work for every app).
We also had to rework how the navigation would behave and be laid out. Initially, we had a left column browser using a custom tree-like accordion. This worked well before, but not in the new design. We chose to place it at the bottom in a 3 column waterfall navigation. We felt this would allow the user to have a good view of the items and children. This also gave them access to the controls for each layer item.
Some other minor features were the latitude and longitude coordinates. Brad Umbaugh was the primary dev on the earth, and he not only put the earth together with Away 3D, but was able to get those calculations for the lat/long coordinates.
The application still looked pretty tight still. So although the user does require the details and info, the main focus of the application is the Earth. I wanted to give them just that, so we came up with the “space” view, where you can push away all of the other panels, modules and navigation, and just focus on the Earth. It is a mocked up space environment in the background, but it does allow the user to get the feeling that they are viewing the earth in space.
There is also a small Widget you can create and embed into your own personal web page, blog, social network site, etc.
RJ Owen was another developer on the team. He was very helpful in putting all of this together and working closely with design to ensure everything was developed as it was intended. Kevin Skrenes was another big contributor, with development of some of the custom components and working with skinning.
This was a great project and case study for me. One major thing that came out of this was how extensible and agile Flex is for development and design. The application was 3/4 developed based on the original design, and we were able to redesign the interface, experience and add some functionality within 2 weeks! The client was happy and the people seem to enjoy it.
It has won a couple awards since the release.