Overview

Caseta Wireless Shades is the lowest tier shade offered at Lutron and the website was built quickly in order to meet launch deadlines. This resulted in a website that worked, but was not necessarily the most user friendly experience. My task was to take the Remotes and Accessories page and give it a face lift. The time crunch was very fast, design was only a single month for exploration before it needed to be handed off to the development team.

Orignal Design

The original design was difficult to navigate and fell apart when in Mobile. The User was required to make all of their selections from the drop downs and then click on the "Add to Cart" button. This would then add them to the cart without alerting the user of any action had taking place.

Product Cards

The first item to take care of the redesign was to make the product cards uniform and easy to use. A series of explorations resulted in a much more streamlined experience for users to add accessories to their Lutron Shades purchase. T

The key was in writing requirements that ensured that all products had the same amount of information present on each card to make them more uniform. This required collaboration with stakeholders and copy teams to determine what information was of vital importance and what information could be hidden onto a Product Overview Page.

Product Card Page

Once the Product Card design was approved it came time to place them onto the page and maximize the impact of the cards. In the original design there was only 3 items per row which required more discovery. This new product card set up allowed for 4 items per row and the ability for the user to add items directly from their individual product card. These product cards also allowed us to create a new page type in Product Overview so the user could gather more information about a product if needed.

Product Overview

This new page type allowed Lutron to provide much more product information without having to crowd the Product Card page. This allowed for users to make more informed decisions while still being able to explore with the presence of product cards at the bottom of the Product Overview.

Additional Edits

The small lift of updating the Add to Cart interaction after users had completed their shades design. Below you can see the original followed by the new and improved design.

Handoff

Here are a few images of the handoff documents to ensure the design was implemented correctly by the developer team. These documents were walked through with the development team to ensure the scope of work was conveyed and that all questions could be answered before development to allow for a smooth transition from design to implementation. The results were a fast build with minimal iteration.

It's alive!

Below are a few screen shots of the live site. It can be accessed through this link: https://store.casetawireless.com/remotes-accessories/