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 was to make the product cards uniform, simplifying the user experience. A series of explorations resulted in a much more streamlined experience.

Writing requirements ensuring all products included the same string length present on each card as well as the wrapping rules for when longer product names were present. This required collaboration with stakeholders and copy teams to determine what information was of vital importance and what information could be hidden onto the new Product Detail Page.

Product Detail Page

A new page type was created which allowed Lutron to provide more product information without having to crowd the Product Cards on the Accessories page. This allowed users to make more informed decisions while still being able to explore all accessories.

Add to Cart

When the user finishes customizing their shade they click "Add to cart" this created a pop up seen above that use three primary buttons in a very ugly display. I created new assets and used more simplified image picker that allowed the user to easily understand what the pop up was asking and how to take their next action with confidence.

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.