Ace Hardware

Project Scope


Ace Hardware's Tips & Advice section of their site was in need of updating, and enabling their talented content creation team to publish more videos and guides to help customers with their own DIY projects. Like many large organizations, getting a system built that would integrated with the CMS, Product Inventory and other numerous enterprise tools would have been a large undertaking. We worked with their DIY content creation team to build a stand alone Tips and Advice section that could easily be linked to the rest of the organizations web services.

Context


A few things that we spotted early on in the project is that there was a fairly high bounce rate for incoming traffic on the landing page itself. Customers either weren't seeing the value of the existing content or weren't drawn in to explore what articles there were on offer. We wanted to make things "sticky" and entice users to explore more than just their most pressing project.

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.

Reflection


I find I always want a little more time than I have on projects. As you peel back the layers of the onion, there's always more you'd like to incorporate. For example, we would have loved to try and tap into the camera controls for mobile and tablet so we could try to mimic a hand sweeping gesture that didn't touch the screen but would advance the slide, so if your hands are covered in paint or mortar you could still use the DIY guides. We also wanted to see about packaging whole supply lists into a 1 click shopping cart so you could get all of the supplies into your cart, then remove any you already had. Sadly, the tight timeframe prevented us from investigating these and their potential impact. You can see the current Ace Tips & Advice site here: http://tips.acehardware.com/