GE-logo-half.jpg
 

ENERGY SAVINGS & USAGE CALCULATOR

•••

OVERVIEW

Working with an agency in SoCal, I helped update GE's Savings Calculator to include new lightbulbs and technologies. The user selects the desired product(s) from three available technologies and then inputs the number of bulbs they will use to calculate their yearly financial savings. There is also an environmental component displaying the benefit to the planet.

MY ROLE

Freelance UX/UI Designer exploring user research, user flow, wireframes, prototyping, and visual design.

UX (2012) 

LaptopPhoto-LG-3.jpg

DISCOVER

•••

GOAL

Educate the user on GE's new technologies and the financial and environmental benefits.

CHALLENGES

  • The calculator will be reskinned for a cross-promotion with the Lorax on Facebook. The smaller dimensions need to be implemented for both.
  • New packaging needs to be included in the design.
  • Categories have between 1-8 types of lightbulbs.
6105d31f-151f-4d78-8d62-595f45b4793e_1.bd2446283a7d5bc910cbeee41b5ca8e0.jpg

DEFINE

•••

GE-Sketches-Personas-White-3.jpg

USER PROFILES/SCENARIOS

With such a short timeframe, I gathered from the project brief and through informal interviews enough understanding to define quick user profiles and scenarios.

SITEMAP


DESIGN

•••

SKETCHING

GE-Sketches-Grid-1.jpg

PRODUCT COMPONENTS

Component included:

  • Product image
  • Product Name
  • Replacement information
  • Info icon with description overlay
GE-CloseUp-1.jpg

WIREFRAMES

I presented two options for the UI.


DEPLOY

•••

VISUAL DESIGN

After I completed the UX and handed off documentation and assets to development, designers at BBDO added the visual elements to work with the website redesign they were launching.

LANDING SCREEN

I included step by step directions on the left column, a hover state (not shown) for each of the categories with a short description and I suggested a color be associated with each category and carried through the rest of the relevant screens for visual reinforcement.

GE-Homescreen.jpg

LANDING SCREEN

I included step by step directions on the left column, a hover state (not shown) for each of the categories with a short description and I suggested a color be associated with each category and carried through the rest of the relevant screens for visual reinforcement.

GE_Screens-1.jpg

LIGHTBULB TYPE SELECTION SCREEN

Once the user selects a high level category of lightbulbs, they are given sub-categories with thorough descriptions to further narrow their choices.

'Back' and 'Start Over' buttons are included at this point. 

GE_Screen_iMac.jpg

CALCULATION SCREEN

Below is a screenshot of the final design for a sub-category screen containing six types of lightbulbs. In this layout the user is treated to an interesting 'Fact' on the left column and can input the number of lightbulbs they'd like to include in the calculation (1-999). The user can input quantities on multiple types of lightbulbs.

On the upper right, the user instantly sees the dollar amount representing their annual savings from switching from standard bulbs. And, on the upper left, the user sees the amount of CO2 (Tons) avoided annually. 

As an added bonus, the amount of CO2 avoided is translated to equal the amount of acres of trees planted, if every household did the same as the user.

If every household did the same, it would reduce the same amount of CO2 as planting <000> acres of trees!

 

ICONS FOR PRINTING, BUYING AND SHARING.

The user can print or share the calculations on social media. They can also add the lightbulbs to their cart for purchase.


BONUS

•••

GEL-Banner.png

GEL-Logo.jpg

THE LORAX

The savings calculator was reskinned and used on a cross-promotion with Dr. Seuss' The Lorax movie on GE's Facebook page.

MY ROLE

I worked with the movie's visual assets to design the look of the Facebook version.

Visual Design (2012)

GEL-Character.jpg
GEL-FB-4.jpg
 
GE-closing-half.jpg