Virginia Energy Sense
This project optimized energy savings for Virginia by aligning user needs with statewide energy initiatives through purposeful UX design. 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.
Role
UI Design
UX Research
Interaction
Client
Virginia Energy Sense
Programs
Figma
Confluence
Duration
8+ months
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.
- KWVirginia Energy Sense
- KWSaving Money
- KWEnergy Reduction
SEO & Keywords
Leveraged SEMRush to analyze traffic sources and identify keyword opportunities in the consumer energy sector.
- 01Website traffic analysis
- 02Keyword gap analysis
- 03Competitor benchmarking
PR & Partnerships
Analyzed news pieces and internal content to identify promotion opportunities for initiatives and success stories.
- 01News mentions review
- 02Partner re-engagement
- 03Content gap analysis
Summary
What the data agreed on — the stages people move through, who they are, and where they can actually be reached.
Messaging
Research identified two main stages in the user journey: Awareness / Motivation and Ready to Act.
- →Audience members move through both phases. First they learn why saving energy matters, then they move into the action phase.
- →KPIs and messaging differ by phase to reflect these groups.
Within each journey stage sit multiple audiences with different motivators and awareness levels.
- →New homeowners, Gen Z renters moving into first apartments, and rural homeowners.
- →Messaging spans the full range — from completely unaware of energy saving to fully committed and ready to change.
No single platform reaches every audience across Virginia.
- →It takes a coordinated effort — digital paid media, earned placements, and owned social — to get information out.
Recommendations
Six moves the team can make — ordered from quickest win to longest play.
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.
Optimize pages and content to increase traffic from search engines.
One kit, so the team stops rebuilding the same <button>
Virginia Energy Sense was shipping across multiple pages and contributors with no shared component library. I built one — tokens, components, and the rules for using them — so anyone could produce on-brand work without a designer in the room.
Six greens, four button shapes, no source of truth.
Every new page meant re-deciding things that should have been settled. Contributors picked whatever green looked right, and radius, padding, and weight drifted page to page.
The cost wasn't only visual. It was time — each build restarted the same conversations — and it was trust, because a site about efficiency that looks assembled by committee undercuts its own message.
Six primary actions. Six radii, four greens, three type weights, no shared padding.
Three intents — primary, outline, ghost. One radius, one weight, one scale. The choice is now about hierarchy, not styling.
The calls that were actually hard.
A palette grid proves you can name colors. These are the three decisions where the obvious answer was the wrong one.
Why the checkboxes aren't green.
Every brand instinct says the active state should be #246933. I used #0075ff instead — a blue that appears nowhere else in the system.
Green-on-green selection states are genuinely hard to read: the checked fill sits too close to the surrounding brand tint, and for users with deuteranopia the signal nearly disappears. Blue is also the platform default users already scan for.
Pills for actions, rectangles for inputs.
Buttons use a full 9999px pill. Inputs, selects, and textareas use 8px. Cards use 16px.
Radius became a signal for interaction type rather than a decorative choice. Fully round means "this does something when you press it." Softly rectangular means "this holds what you type." Users learn the rule on one screen and carry it everywhere.
Errors get border weight, not just color.
An error state changes the border to 2px #f87171 — thicker as well as redder — and always pairs with a text message carrying an icon.
Color alone fails WCAG 1.4.1: anyone who can't distinguish the red border sees an input that looks unchanged. A weight change is perceivable without color vision, and the message states what to fix rather than just flagging that something is wrong.
Components in isolation always look fine.
The real test is whether they compose. Every element below is pulled straight from the kit — nothing bespoke.
Real-time tracking
Monitor usage live
Weekly reports
Usage summaries by email
⚡ Energy saving tips
Quick ways to reduce consumption
A system nobody uses is a mood board.
The work wasn't done when the Figma file was. It was done when people stopped asking which green.
Governance was the part I underestimated. A design system without rules for growing it drifts straight back into the mess it replaced.
The rules that keep it from sprawling
Rule 01
If a component needs an and to describe it, it's two components. Splitting them early is cheaper than untangling a multi-purpose component after twelve pages depend on it.
One job per componentRule 02
Most requests for something "new" are an existing component with different content. Nine button variants collapsed to three this way — the difference was never structural, only editorial.
Variants aren't new componentsRule 03
A rule written only in documentation is a suggestion. If a color or spacing value shouldn't be available for a given component, it isn't offered in the file at all.
Constraints live in the libraryIntake: three questions before anything gets built
Stated as a user need, not a visual preference. "We need a card with a photo on the left" is a layout request; "people can't tell which programs they qualify for" is a problem a component might solve.
This is the question that resolves most requests without building anything. If no existing component was tried, the answer is to try one first. If one was tried, the specific failure usually points to a fix rather than a new component.
One page isn't a component, it's a layout. Three or more places, across more than one contributor, is the threshold where centralizing actually saves more time than it costs to maintain.
Explore the library.
Every component, live and interactive. This is the reference layer — the argument is above.
Email notifications
SMS alerts
Real-time tracking
Monitor energy usage live
Home Energy Audit
Professional assessment of your home's energy usage.
Smart Device Status
Real-time monitoring of connected devices.
Cost Savings
Track monthly savings from efficient choices.