Designer, Tech Enthusiast, Sandwich Connoisseur
accessible-home-dt-mockup.png

Lowe's Accessible Home

UI/UX

Lowe’s Accessible Home

 

Project Purpose & Challenges

I am under NDA and can only show parts of this project.

The Lowe’s Accessible Home (Livable Home) initiative was a part of a multi-pronged major refresh and rework of the entire sector of “aging in place” of products and services Lowe’s offers. This e-commerce page in particular was the first step in this process and was to be the spearhead for entire project. It was aging not only in its design but also in its ease of use and navigability. I was given 2 days to update the page and resolve these issues in order for it be consistent with current Lowe’s design principles and aesthetic. While I had a decent framework to start from, I still had to gut about 90% of the old content as it no longer made sense current day. Image gathering was the longest step of my design preparation taking at least 3 hours to track everything down.

My goals for this redesign were to implement the style where appropriate and give it a light and airy feel with more spacing around content sections. Use of relevant and high quality lifestyle imagery helps humanize the shopping experience. It anchors each content section and makes it easy for people to understand where you are on the page and what exactly you are shopping for. Finally, whatever changes I made I constantly checked to see if they made sense for the mobile version. You can see the old page and screens of the new design below!

Userflows

A period of pre-project research and development went into the making of this page refresh. Acting on heat map data, user feedback, and our own internal analytics, we were able to make basic personas and ascertain the types of users who frequented this category of merchandise. Here are some sample userflows I developed in collaboration with the Lowe’s UX team:

 

Style Guide - A vision of what could be!

The below images are an abbreviated peek into the style guide (61 pages total) I co-developed for this project.

 

Old Version Visual Reference

As you can see below, the old page design felt anemic and barebones. No longer really selling the “feel” we wanted to promote with the style guide from above. Click on any of these for a full-screen view.

 

Newly Designed Facelift - Desktop

Taking the base of the page and the style guide in hand I went to work after collecting a large amount of new visual assets. My goal was to create a more “lived-in" and “graceful” feel, while also simplifying the options available so as to not create information overload for the user. Since this particular page’s goal is about grouping product in a visually pleasing way, I married the look and feel of the overall Lowe’s website with some of the new improvements from the style guide. Click on any of these for a full screen view.

 

Newly Designed Facelift - Mobile

Every time I would settle on a design choice, I quickly compared that to how it would end up displaying on Mobile. If it didn’t work or felt too busy, I went back to the drawing board. Click on any of these for a full screen view.

 

Newly Designed Facelift - Full Page View

Click on either the Desktop or Mobile option for a view of the WHOLE thing together!

It really helps to give a sense of scale and just how much content was getting put onto this page.

DESKTOP

MOBILE