top of page

National Grid Multi-site Redesign

A woman holding a tablet device display an online store that features smart thermostats. The online store features a simple layout using a combination of lifestyle imagery, product images and contrasting colors

My team won the bid to redesign National Grid’s set of (6) marketplaces that were all connected by a central hub (landing page and website selector tool). Before designing the UI/UX we conducted usability studies on our current marketplaces and our competitor’s marketplaces.

User Testing for More Strategic Designs

I started this project but conducting usability studies on my team's marketplaces and our competitors' to identify customer friction points. We created a research plan for unmoderated usability tasks for both competitor-developed marketplaces and those using our common store templates.

The user tasks involved:​

  1. Finding something on the site that would help the user make a good decision on saving energy in thier home.

  2. Finding a deal or promotion in the store

  3. Looking for a smart thermostat offer that interests the user and adding it to the cart

​

Competitor Analysis Findings

  • Users wanted to see more product-related content

  • Users found product comparisons and recommendations useful

  • The homepage hero banner image related to tips only confused users to the purpose of the website

  • The “Limited Time Offers” tab and bright-colored “Sale” tag is useful to users

Competitor Analysis Findings

  • Cross-promo banners did not resonate well;  users wanted to see more product-based hero banners

  • Rebated pricing was easy to understand on the product pages but user wanted a better way to identify sale items

  • The “Efficiency 101” menu item on one of my newer stores was easy to find and understand. Users knew right away that was a place to find energy-saving tips and guides

  • The trademarked names used for the demand-response thermostat program only confused customers about the programs

Putting Research Findings into Action

The research findings from the competitor analysis helped me frame the user experience of National Grid's new marketplace.

Some key improvements were: 

  1. Add a “Limited Time Offers” menu item that will display on-sale items during promotional periods

  2. Rename the blog/energy tips articles from "Learn" to “Efficiency 101“

  3. Keep menu items clear and concise: Shop Products, Limited Time Offer, Store Info and Tools, Energy-savings Programs

  4. When calling out the demand-response thermostat programs prioritize the benefit and function of the program rather than the program name

  5. Keep the hero homepage item and proceeding carousel slides focused on the marketplace and its products. Intermingle cross-program promotions throughout the rest of the store and add it as a separate menu item

  6. Keep the thermostat compatibility checker tools but also include similar products and recommendations on the product page as well

Overcoming Technical Challenges with UX Stategy

National Grid's main utility website and marketplaces required separate logins, with each region's marketplace needing its own featured products and rebates. To simplify this, I developed a single sign-on system that directs users to the appropriate marketplace based on their region. This streamlined the process, reducing clicks and repetitive steps for customers on the utility's main website.

​

On the backend of the website, I used a CMS that was capable of sharing a main product database and price lists with multiple stores. Each store would be able to have it's own branding as well. 

​

A flow chart demonstrating a complex architecture of the National Grid marketplaces and how users would navigate between the utility’s main website and all of the individual regional marketplaces and educational blog articles.

Co-branding the Stores

Three of the six stores were aimed at business owners, while the other three catered to residential homeowners. The goal was to create a main umbrella brand while distinguishing the two identities for each group. I proposed using different secondary brand colors for each type of store, along with tailored imagery and copy to appeal to their own target audiences.

an online store aimed at homeowners that features smart thermostat and other home goods including electric vehicle chargers, showerheads, lightbulbs and powerstrips. The online store features a simple layout using a combination of lifestyle imagery, product images and contrasting blue colors
a product detail page store aimed at homeowners that features a smart thermostat. The online store features a simple layout using a combination of lifestyle imagery, product images and contrasting blue colors
an online store aimed at small businesses that features smart thermostat and other home goods including electric vehicle chargers, showerheads, lightbulbs and powerstrips. The online store features a simple layout using a combination of lifestyle imagery, product images and contrasting purple colors
a product detail page store aimed at small businesses that features a smart thermostat. The online store features a simple layout using a combination of lifestyle imagery, product images and contrasting purple colors

Engage Customers and Increase Program Participation

The store aims to provide energy-saving information and help customers select the right products. National Grid also seeks to boost participation in its programs. The user experience is designed guide customers to learn more and sign up, featuring a clearly labeled landing page and callouts for related programs, like messaging for their demand response programs while browsing smart thermostats.

a product category page for smart thermostats. This page features smart thermostats available to purchase along with some relevant energy saving program information
a simple clean for National Grid energy saving program using a combination of lifestyle imagery, product images and contrasting blue buttons
bottom of page