Web experience, design systems

Google Nest Renew

Experience design

Overview

Nest Renew is an energy subscription for your home that works with your Nest Thermostat to help you reduce your impact on the environment.

Goal

Create an engaging experience for Nest Renew, that exemplifies Google’s commitment to clean energy and empowers users to take small steps for big impact.

My role

Senior visual designer.
Huge Inc.

Creative team

Home
Sam Clark - Creative Director
Faith Kaufman - Sr Visual Designer

Blog & additional pages
Alejandra Monroy - Creative Director

Pushing the creative for a distinctive and memorable look was a huge success. The client has also extended the track in time and actually asked for more work to be completed.
‍
We synthesized diverse aesthetics, analyzing product UIs and marketing videos to craft a cohesive brand style. Inspired by the hero video, we incorporated warm cream tones, natural wood accents, and pops of color to create a calm, welcoming, and open atmosphere.

Motion also plays a critical role in the experience—impacting how users move through the story and understand brand personality across the different pages of the site.

Link to site ➹

➹ Nest Renew - Mobile experience.

➹ Nest Renew - Web experience.

➹ Clean Energy Match.

My contributions

I’ve participated in the complete process since discovery for the project. Creating over 10 different visuals proposals for the site. Continuous benchmarking and exploring visually while narrowing down to the development phase.

I also created the design system documenting the grids, typestack , color palette, and the different behaviour of the components. It has escalated now to even have project miscellaneous items, redlines & greenlines.

➹ Nest Renew - Art direction

➹ Nest Renew - Typography breakpoints equivalence.

➹ Nest Renew - Redlines, Greenlines, Misselaneus.

"Viviana's been a key part of the project from the early stages playing a key role in concepting all the way through building the design system and working with dev to implement the site. Truly could not have completed this project without her dedication to the craft and diligent work!"

- Sam Clark, Creative Director

Blog strategy

We also consolidated a Blog strategy for Nest Renew. I’ve worked on the visual direction for the blog landing page and the article page.   We had build off of the visual direction and experience principles (easy, empowering, and impactful) we’ve established thus far for Nest Renew and apply them alongside best practices for blog design. Our aim was to bring Nest Renew’s distinctive and memorable look and feel into the blog.

➹ Nest Renew - Landing & Article pages wireframes

➹ Article page.

➹ Nest Renew - Landing & Article pages

New Pages

The site was also enhanced with additional pages to provide detailed education on service on overall eligibility and a double-click into key areas such as Energy Impact Program (EIP) and how does Premium works.

➹ Nest Renew - How it works.

Premium uses existing components and elevates them with dark theme. The dark theme helps differentiate it from the rest of the site and have a Premium look & feel. Clean Energy Match is the core source of inspiration to tell an impactful story.

➹ Nest Renew - Premium concept proposal.

➹ Low power mode. The internet is accountable for about 3.7% of the world's carbon emissions. What if we created a web experience that uses minimal energy?

Learnings

Accesibility first

The complete site has been designed to address the latest Google Accessibility Rating (GAR). Making the site level 5 for software product technical accessibility.

Go beyond

Although the site lives within Google ecosystem, we pushed the components to create a differentiated look and feel.

Team communication!

Fluid teamwork and clear communication across disciplines led to successful collaboration and ideation through internal reviews and shared spaces.