Overview

Timeframe: February 2016
Company: Home Depot
Role: Information architecture, interaction design, prototyping

Nearly 6 months into a massive overhaul of our core product, we noticed that the user interface was becoming pretty fragmented. I was given the task of restoring order to the universe.

Problem

In the process of completely reimagining the experience for our flagship application we were starting to encounter a lot of clutter.

In many cases we were using different design patterns to solve the same problem, and different components for essentially the same interface element.

In my assessment, we were quickly accumulating clutter and I knew it would be hard to end up with a cohesive user experience the longer we let this go.

Solution

5 months prior, we had settled on creating a full-width, responsive interface.

By combining just two simple layout components – one that would subdivide space vertically, the other horizontally – we believed we would be able to create any layout we needed.

This was a noble idea, but these layout conventions and components did not answer all our questions or provide the level of consistency we were hoping for.

I took a systematic approach to deconstructing our interface, with a particular emphasis on information architecture and consistency.

  1. First, I identified the primary components we were using.
  2. Then I sketched how my ideas for improving the information architecture would actually manifest themselves in the interface.
  3. I created wireframes to explore more of the details and vet my ideas against real constraints (e.g. screen widths, responsiveness, information density, usability).
  4. Finally, I decided to prototype (using HTML/CSS/React) certain components in order to make my design intent crystal clear.

Outcome

We changed a bunch of things under the hood and made some significant improvements to our visual design and information architecture.

The app was now better poised to scale. This increased the likelihood of future consistency in the design, improved overall usability, and helped both our designers and developers become more efficient.

March 26, 2016