Emotional Intelligence Billing - UX/UI Design

Energy billing systems are optimized for efficiency, not empathy. Users often feel punished for using energy during vulnerable moments (late-night work, illness, care duties). Current systems lack emotional nuance in how they communicate value and pricing.

MY ROLE

UI/UX & Brand Designer

TOOLS

Figma

Illustrator

PROJECT TYPE

Personal

Overview

A one-week individual UX/UI design sprint to create a desktop web app that reframes how people emotionally experience and interpret their household energy consumption.

Competitor Analysis

Competitor analysis: Octopus, Bulb, Ovo

Competitor analysis revealed that many of these companies fail to provide support for their customers.

These competitors tend to:

Use rational, transactional designs rather than emotionally intelligent feedback.

Offer data, but not context or reassurance.

Lack features that reflect the emotional state or stress level of their users (no alerts, tone shifts, or personalisation during spikes)

Insights

Energy billing systems are optimized for efficiency, not empathy. Users feel punished for using energy during vulnerable moments. There's a lack of emotional nuance in how utility companies communicate value and pricing.

Meet the users

User A (Night-shift worker): “Why am I being punished for using power when I literally have to stay up all night?”
User B (Caregiver): “It’s not about optimizing—sometimes it’s survival. My bills feel like a reprimand.”

Insights:

Users equate peak-hour charges with moral judgment
People want more guidance, less guilt
There’s an unmet need for gentle reflection on usage patterns, rather than punishment

Analysing the Insights

This thematic analysis broke the process down into three key areas, which became the basis for the web app’s organisational structure.

Moments of empathy - When dealing with data, users felt feelings of guilt, confusion, or overwhelmed. These themes informed features to humanise the tone of the app, soften negative feedback and offer emotionally supportive language throughout the expereince.

Tools & features - Users want more control and insight into their consumption patterns. This ultimately led to features such as usage visualisations/ summaries, and context-aware tips.

Clarity - Users want a breakdown, understanding the why is important to them. This became the foundation for content strategy and UI logic—prioritising transparent explanations behind charges, usage spikes, and energy-saving suggestions. Visual clarity and digestible insights were embedded into every screen, from dashboards to notifications.

Wireframe

Data Input

• User’s energy usage patterns

• Frequency, spikes, off-peak vs. peak behaviour Processing Layer (Emotion Algorithm)

• Converts raw usage data into emotional cues○ e.g., "User had a usage spike outside normal pattern" → Likely anxiety or guilt○ e.g., "User reduced energy 3 days in a row" → Opportunity for praise

🌤️ Mood-Aware Summary Generator

• Generates one of several pre-written tone types based on emotional state:

○ Supportive: "It’s okay. Let’s look at what happened."

○ Encouraging: "You’re doing great—here’s a small win!"

○ Informative: "You’re using 20% more today. Want to see why?"

This makes your app feel like it has emotional timing.

Look and Feel

It was important to make reference to the competitor applications in terms of look and feel. Establishing a sense of familiarity was key, this allowed me to focus on the language and tone of the application, and how messages were delivered to users.

I created a high-fidelity prototype that incorporated this feedback and represented a minimum viable product.

I formalised the style tile, toning down the colours, and consolidated the text styles.

The resulting high-fidelity prototype brings together my research insights and user feedback, to create a platform that is tone aware, supportive, and understanding.