Process
Sadly, this project was on a very accelerated timeframe so we were unable to dig into user research too deeply. We had to rely heavily on metrics from analytics and strove to make best practice suggestions on what we could do to increase the site's "stickyness."
What we came up with was a stronger navigation that worked well both for mobile and tablet interactions as well as desktop. We saw that those who stayed on a project page for the longest time were typically on mobile devices, and we assumed this was due to them actively using the site while working on the project. We wanted to improve the experience for mobile users so we worked on designs that would increase usability for those devices.
Next we focused on what we could do to encourage visitors on the desktop to browse around and get inspired to try out new projects and ideas. Since the content creation team had access to video cameras and a talented production crew we encouraged them to try out cinemagraphs as the thumbnails for each of the articles. Cinemagraphs are animated gifs where only part of the image is animated. We taught the team how to use Pixate to create these quickly using clips for the video shoots. Below is an example of how we intended this to work, be sure to watch for the subtle motions when the mouse hovers over the various tiles.
These are MUCH heavier than your traditional images but on desktop broadband speeds we didn't find a massive performance loss and while the images load in the background they only animate on-hover. We found that because each image only has part of it animate in our initial testing it caused users to stay on the page much longer to hover over images and see how they animated and increased a click through rate 5 times higher than what was expected prior to the redesign.
