Nest Store PDP + Checkout

Nest Store PDP + Checkout

 

Users purchasing Nest products on the web must customize items to their specific needs. Nest’s existing PDP did not accommodate for the growing number of new products and services being released. Our challenge was to lay the framework for a new PDP that could expand into the future and beyond. Additionally, we had to optimize the cart + checkout experience to clearly communicate to users at each step of the process.

Role:
Product Designer

Year:
2017

Refocusing the Page

The pre-existing product page had four types of content: configurator, overview, tech specs, and installation instructions. Our goal was to simplify the page to be solely dedicated to customizing the product, while still giving access to the supporting content, but in clearer and more concise ways.

Updating Configurators

Our first goal was to update controls with our new design system, increase the touch-targets for all selectors and make them more mobile friendly.

We had to test our design agaist the most complex PDP’s, which in this case, was Nest Secure that had a potential of 6 different configurators.

Nest Tag & Nest Detect
No configuration

Nest Hello
Optional: Nest Aware

Nest Protect
Power selector
Pack selector (3)

Nest Cams
Pack selector (2)
Optional:Nest Aware

Nest Thermostat
Color selector
Pack selector (2)
Optional: Rebates

Nest Secure Starter Pack
Optional: Nest Cam
Optional: Nest Detects
Optional: Nest Tags
Optional: Nest Connect
Optional: Cellular Backup
Optional: Pro-Monitoring

Organizing Content

After trimming down content and updating the configurators, we were able to reorganize elements on the PDP itself.  

Putting it all Together

The full flow here shows how a user customizes their order and proceeds to checkout

Cart + Checkout

As we moved onto the checkout process, a new set of UX challenges arose. Information was unclearly organized on the page and the existing page architecture wasn’t scalable for future Nest products. Items were not easily editable, rebates were not fully integrated, and subscriptions did not have a logical place on the page.

Creating Separation

My first objective was to parse out hardware totals separately from subscriptions. The old design did not do a good job of explaining what totals were due and what they included. By having a mini subtotal for hardware, we were able to clearly communicate underneath that subscriptions were a separate charge not included in the cart subtotal.

Updating Controls

Another big user painpoint I observed was no clear way to remove items from cart. In the old design, decreasing the quantity to zero was the only way to do this. Additionally, the drop-down quantity selectors added friction with an extra click to reveal the other numbers.

BEFORE

AFTER

Making Pricing Clear

The way pricing was communicated throughout the page was inconsistent and unclear. My goal was to streamline the language, create visual hierarchy, and make things more logical.

BEFORE

AFTER

Results in Numbers

We saw a big spike in conversion right after our initial launch. We alleviated a lot of customer confusion and reduced the amount of friction throughout the funnel.  However, our work was not done there— We have an ongoing effort to test and iterate new ideas and strategies to optimize the experience and increase growth.