Multimedia solutions for any project, big or small.
Multimedia solutions for any project, big or small.
Olympus Consumer Product Group
Olympus Consumers
Olympus' Consumer Product Group needed a refresh of their products area. They were going to be adding a shopping cart, and wanted the site to be as easy to navigate as possible.
We were asked to combine three previously separate areas into one, building a navigation that would allow users to browse Digital SLR cameras, lenses, and their new product line; the Olympus Pen. When a user chose one of these focus areas, the bottom content would fade and load via ajax instead of forcing the user to wait for a page load.
When our designer brought the navigation concept over for review, I was extremely impressed with the design. We had the idea to not only brighten each of the product items when a user hovered/clicked on them, but to also change the z-index of each item to move "above" the others. This was extremely challenging to do cross browser, so we could only support IE 7/8 with animation and z-index, and IE 6 fell back to a duller version of the nav. Progressive enhancement is key.
I ended up using a combination of hand-coded jQuery (sans plugins) and jQuery UI's tabs for the bottom content area. When a user clicked a navigation item that specific panel would be faded into view.
Looking back at this project now, the code is extremely verbose and repetitive. I really wish I could go back and fix such atrocities, but I suppose the learning begins somewhere.