This project optimized energy savings for Virginia by aligning user needs with statewide energy initiatives through purposeful UX design. As a result, the platform simplified workflows, improved accessibility, and surfaced meaningful insights—enabling users to take measurable actions toward reducing energy use while supporting broader sustainability and policy goals.

Virginia Energy Sense

Role

UI Design

UX Research

Interaction

Client

VES

Programs

Figma

Confluence

Time

8+ Months

Methodology & Scope

Methodology & Scope

We aggregated and analyzed data from September 1, 2020, to August 31, 2021, examining public posts, owned channels, and website performance.

Social Listening

Used Synthesio to aggregate data from Twitter, Reddit, Instagram, YouTube, Facebook, blogs, and forums.

  • Keyword: Virginia Energy Sense
  • Keyword: Saving Money
  • Keyword: Energy Reduction

SEO & Keywords

Leveraged SEMRush to analyze traffic sources and identify keyword opportunities in the consumer energy sector.

  • Website Traffic Analysis
  • Keyword Gap Analysis
  • Competitor Benchmarking

PR & Partnerships

Analyzed news pieces and internal content to identify promotion opportunities for initiatives and success stories.

  • News Mentions Review
  • Partner Re-engagement
  • Content Gap Analysis
Energy Campaign Summary

Summary

Content / Messaging

Through research, we identified two main stages in the user journey: Awareness/Motivation and Ready To Act.

  • These are the two phases audience members move through. First they learn why it's important to save energy, and then they move into the action phase.
  • Our KPIs and messaging will differ by phase to reflect these groups.

Audiences

Within each user journey stage, there are multiple audiences with different motivators and awareness levels.

  • Examples of these audiences are new homeowners, Gen Z'ers moving into their first apartments, and rural homeowners.
  • We will create messaging to reach audiences ranging from completely unaware of energy saving and its benefits to fully committed and ready to make changes.

Channels

No one platform by itself can reach all the various audiences across Virginia.

  • It will take a coordinated messaging and campaign effort — spanning digital paid media, earned media placements, and owned social media — to get information out.
Energy Campaign Recommendations

Recommendations

Offer tips and tricks that are easy to implement, like thermostat changes.

Embrace seasonality by posting more during times of peak interest.

Introduce new content types and messaging to drum up engagements.

Reintroduce channels like Instagram with a new look and feel aligned with the upcoming content strategy.

Focus messaging and keyword strategy on specific, achievable tasks instead of general energy saving terms.

In the long term, optimize pages and content to increase traffic from search engines.

UI Design System

14Components
PoppinsBrand Font
#246933Primary Green
Tokens
Components
Design Tokens
Color Palette
All colors extracted from the VES-UI-Kit Figma file. These are the exact hex values used across every component.
Brand Greens
Green 900
#246933
Headings, nav, CTA buttons
Green 700
#2e8540
Active states, success, toggles
Green 500
#4a9960
Mid accent
Green 200
rgba(46,133,64,0.15)
Tinted backgrounds
Nav / Footer
#1d5c2e
Navigation bar, footer
Semantic Colors
Blue (Active)
#0075ff
Checkbox & radio active
Error
#ef4444
Error states, delete buttons
Error Light
#f87171
Error input border
Amber
#f59e0b
Warning / high usage alert
Neutrals & Text
Heading
#246933
All headings
Body Text
#4a4a4a
All body copy
Muted
rgba(74,74,74,0.7)
Subtitles, helper text
Placeholder
#adaebc
Input placeholder text
Page BG
#f7f7f7
Page background
Disabled BG
#f3f4f6
Disabled inputs
Border
#d1d5db
Input, card borders
Border Light
#e5e7eb
Subtle dividers
Design Tokens
Typography
Poppins is the sole typeface across all components — Bold (700/800) for display, SemiBold (600) for headings and labels, Medium (500) for emphasis, Regular (400) for body.
Display / H1
48px · Bold 700
EnergySense
Section H2
30px · SemiBold 600
Input Fields
H3 / Card Title
24px · SemiBold 600
Energy Savings Assessment
H4 / Panel Title
16px · SemiBold 600
Energy Saving Interests
Body Subtitle
18px · Regular 400
Form Elements & Input Components
Body
16px · Regular 400
Helping Virginians save energy and reduce costs through education, innovation, and smart home improvements.
Label
14px · SemiBold 600
Default Input
Helper / Caption
14px · Regular 400
This field is required
Design Tokens
Spacing & Radius
Spacing Scale (from Figma grid)
4px · gap-1
8px · gap-2
12px · gap-3
16px · gap-4
24px · gap-6
32px · gap-8
48px · gap-12
64px · gap-16
Shadows (from Figma)
Card shadow
0px 4px 12px rgba(0,0,0,0.05)
Modal shadow
0px 10px 15px rgba(0,0,0,0.1)
Border Radius (from Figma)
4px — sm
Copy buttons, small elements
8px — md (inputs)
All inputs, selects, textareas
12px — lg
Panels, section containers
16px — card (cards)
Cards, modals, panels
9999px — pill
Buttons, toggles, badges
Components
Buttons
All buttons use Poppins SemiBold 600, pill shape (border-radius: 9999px). Primary uses #246933 background.
Button
primary · outline · ghost · danger · amber · white — sizes: sm, default, lg
Components
Badges & Status Pills
Show Success Show Error Show Confirmation Show Info Energy Saving Inactive
Badge
success · error · amber · outline · light · neutral
Components
Input Fields & Textarea
All inputs: 50px height, 8px radius, Poppins 16px Regular, #adaebc placeholder, #d1d5db border. Focus border turns #2e8540.
⚠ This field is required
✓ Email is valid
0 / 200
Input / Textarea / Select
default · icon · disabled · error · success · password · textarea · select
Components
Form Controls
Checkboxes & radios use #0075ff (blue) for active state — exactly as in the Figma file. Toggles use #2e8540 when on.
Checkboxes
Energy Saving Interests
Custom (with descriptions)
Radio Buttons
Property Type
Heating System (with descriptions)
Switches & Toggles
Notification Preferences

Email Notifications

SMS Alerts

Push Notifications

Energy Monitoring

Real-time Tracking

Monitor energy usage live

Weekly Reports

Receive usage summaries

Range Slider
$0$250$500
0%30%100%
File Upload
Components
Cards & Panels
Cards: white bg, 16px border-radius, box-shadow: 0px 4px 12px rgba(0,0,0,0.05). No border.
🏠

Home Energy Audit

Professional assessment of your home's energy usage to identify savings opportunities.

Smart Device Status

Real-time monitoring of smart home devices and their energy consumption.

💰

Cost Savings

Track your monthly savings and see the impact of energy-efficient choices.

2,450 kWh
Energy Usage · This month
$126.50
Cost Savings · This month
8.5/10
Efficiency Score · Excellent

⚡ Energy Saving Tips

Quick ways to reduce your energy consumption

Switch to LED bulbs to save up to 75% on lighting
Set thermostat 7–10°F lower when away from home
Unplug electronics when not in use

🏠 Smart Device Status

Real-time monitoring dashboard

🌡 Smart Thermostat72°F ●
💡 Smart Lights8/12 On ●
🔌 Smart Outlets4/6 Active ●
Components
Alert & Confirmation Modals
From the "Alert Modals" page in the Figma file. White card, 16px radius, strong drop shadow.

Success!

Your energy efficiency settings have been saved successfully.

Error Occurred

Unable to connect to energy monitoring system. Please try again.

⚠️

High Usage Alert

Your energy consumption is 25% higher than usual this month.

Confirmation Modal
🗑

Delete Energy Report

Are you sure you want to delete "Monthly Energy Usage Report"? This action cannot be undone.

💾

Save Changes

You have unsaved changes to your energy efficiency settings. Do you want to save them before leaving?

Components
Navigation & Footer
Dark forest green (#1d5c2e) background. Poppins 500 nav links at rgba(255,255,255,0.75). Active links white.
Navigation Bar
Dark green #1d5c2e · Poppins 500 · Active state: white
Footer
Dark green #1d5c2e · centered · muted link color
Previous
Previous

PHX