Project overview
I was the sole UX designer for the paint section of Home Depot’s website in 2019. I worked in a pod with a product manager, several developers, and a user researcher to build and enhance features for any paint related features on the site.
During my tenure, I decided users would benefit from the ability to compare different paint colors, and luckily the product manager agreed. If everything went well, users would soon be comparing paint colors for their walls!
Initial Approach
The UX process is largely defined by the individual contributor at Home Depot. At my fingertips were things like usertesting.com, past research, personas and other UX’ers to run designs by, among other resources.
For this feature, I decided to begin with competitive research — I knew there were other retail websites already doing this feature well, but I also knew that the experience would end up being specific to homedepot.com due to the interactive and unique nature of our “color wall” experience.
Competitive Research
I noticed Best Buy had a compare feature for products on their PLP.
Clicking the “Compare” button directed the user to a new page which gave the user information on “key specs” and showed how products differed.
I surveyed the retail landscape elsewhere and found other good examples, but given the color wall experience was something only found on homedepot.com, I decided that at least part of the compare feature for paint would need to be something unique.
Designing
I knew the bottom tray I saw on the Best Buy site could work well, so I didn’t reinvent the ‘compare feature’ wheel entirely. I added a “compare” button to the inline product card which, when clicked, would summon a similar tray and encourage users to add more colors to compare them.
Once additional colors are added, the user sees the option to either clear all colors or view the ones they’ve selected side-by-side.
When the user clicks “View Side-By-Side,” a scrollable modal appears showing the selected colors next to one another in the same room, with the option to view different rooms. Importantly, the user sees the option to buy a sample or move straight ahead to buying the paint from the modal.
User Testing
I ran some simple asynchronous user tests for the experience. Overall, the experience got good feedback, but I did find a couple of key takeaways to implement into the design:
- Users mentioned they would like a way to remove only one color instead of clearing all of them from the tray.
- The prototype showed four colors in the compare modal sitting perfectly in the modal’s frame. This proved confusing to some users who wondered where the remaining two of the six chosen colors could be found.
For the first point, I was embarrassed to have let such a simple element of the feature slip through the cracks! It just goes to show that even a little bit of testing can save a lot of future work. I added an “x” that would be revealed when the user selected or hovered over an individual color in the tray.
For the second user testing takeaway, I made sure to communicate to the developers that we would need to make sure the modal always hid a little bit on the second row of comparators so users would know there could be more colors hidden beneath.
This feature was built and went live. It has been changed slightly since, but can still be found here!
Additional Points
- I decided to show desktop designs for this case study, but I approached this feature mobile first.
- The text color on top of the selected paint color in the compare modal is either black or white depending on contrast ratio - whichever color has higher contrast is the one shown on the card.
Contact me
✉️ Email: zachisverymodest@gmail.com
📞 Phone: (706) 329-0622
👨🏻💼 LinkedIn: DM me