CASE STUDY - HMI /hardware interface design
Ara Human-Machine Interface Redesign
dcbel builds a smart home energy system that manages solar, electric vehicle battery, backup energy storage, and grid power from a single wall-mounted unit. Its interface failed during real internal field testing during a blackout. I led the redesign, and it shipped on time.
My Role
Senior Product Designer
Tools
Figma
Timeline
2 months
Oct - Nov 2025
Human-machine interface design
Field research
Moderated usability testing
Design systems
C-suite alignment
Scope negotiation
01 -
Context: designing without inherited bias
I was deliberately kept away from the existing interface so I wouldn't inherit its assumptions.
Instead of reviewing the existing HMI design, I was tasked with building a new concept from scratch, grounded in in-lab heuristic evaluation. For two months after I joined the company, I iterated on wireframes and journeys for new users.
As a new product category in the market, there were no category conventions to borrow from. I had to map its usability to known behaviours from industries like EVs and power backup.
how might we
Can you make a home energy interface intuitive for non-technical users through visual design, without rebuilding the underlying platform?
Increased velocity by 15x
Resolved a multi-month blocker on the user notification framework and restored executive confidence.
dcbel's first design system
Built the company's first HMI design system from scratch with tokens, typography, and complete component library that works for the engineering team.
02 -
The catalyst: when the design failed a real field test
During a real blackout, the CEO's wife could not make the product work. Another executive's partner reported the same independently.
The interface was technically functional. However, under stress, non-technical users could not
03 -
Strategy: from revolution to evolution
A full modernization would have delayed the launch, so I pivoted to a targeted evolution.
My first instinct was a full redesign with a new visual language and a new interaction architecture. However, the underlying technology is decades old and licensed per use, per device. A rebuild was neither feasible nor fundable.
The design itself was not bad. What it lacked was an intuitive, cohesive language. I pivoted my approach to enhance each screen for cohesion, clarity, and consistency while preserving the layout structure to minimize code changes. Validation from the CEO and Head of Design strengthened my resolve to pursue this strategy.
I now have three future design concepts in the pipeline tied to planned technology upgrades.
Design principles
On a non-interactive display, the design carries 100% of the communication burden.
PRINCIPLE 1
Focus on the user
Understand needs and behaviours in high-stress scenarios. Replace assumptions with evidence from testing.
PRINCIPLE 2
Simplicity
Element on screen must help the user reach their goal, nothing more.
PRINCIPLE 3
Transparency
Show what the system is doing and give clear paths to act, especially during outages
PRINCIPLE 3
efficiency
In a blackout every second of confusion matters. Intuitiveness is the standard.
04 -
design: screen by screen
Every change replaced a technical value with the question: Is this valuable for the user?
The Art Director redesigned the iconography while I drafted an accessibility-tested colour palette. All combinations ensured that the colour palette would be viable for protanopia, deuteranopia, and tritanopia deficiencies.
Energy flow
Ara's home view shows how energy moves between solar, battery, grid, home, and connected EVs. The key decision was to reframe the central state from an outcome metric to a mode indicator. "40% – Net Zero" became "48% – Private grid," and so did its representation at the 0% & 100% extremes.
I also added metrics beyond kW values to provide an overview of all systems.
EV (Electric vehicle)
The original design didn't clearly communicate the state, battery level, or charging speed. I made the battery level the dominant value, reframed charging speed to align with DC fast-charging standards, and replaced the dual-panel comparison with a single-state focus when only one charger is in use.
Support
The most emotionally significant failure was the error state in the old design. Rather than giving it its own space, the support page was repurposed to include error information. Additionally, technical details without guidance rarely provided a next step.
The redesign replaced it with a non-intrusive, criticality-categorized banner and calm, emotionally neutral communication that told users actions were already being taken to fix the issue.
05 -
Validation: usability testing
All six participants tried to touch a screen with no touch input. A physical affordance gap that no amount of screen polish could fix.
To validate the redesign before the Engineering handoff, I ran an in-person moderated test with 6 internal employees simulating first-time users on a Figma prototype of the dual-charging experience. None had used a dual-charging system before, matching the mass-market profile.
FINDING 1
Metrics confused everyone
kW metrics had no meaning. All participants preferred a consistent metric for both AC and DC.
Fix: Unified metrics displayed on both.
FINDING 2
Animations read as unrelated
Different animations for AC and DC appeared unrelated, creating confusion.
Fix: Standardized animation behaviour.
FINDING 3
0% implied a fault
Private Grid at 0% when grid-connected caused confusion about the system's health.
Fix: Changed the metric to an icon at 0% & 100%.
FINDING 4
Visual design promised touch
All 6 tried to touch the screen, but the hardware couldn't support it.
Fix: Added physical button usage instruction.
06 -
Alarm handling: the roadmap that unblocked launch
No one had decided which alarms were worth notifying the users. I built the strategy that did.
While an ex-Product Owner had catalogued every possible alarm as critical, major, minor, or functional, there was no escalation strategy, user-facing language, or HMI-to-mobile sync. An issue that dragged on for 4 months.
I developed plain-language messaging for technical issues that homeowners could understand. I also made changes directly in the Engineering team's JSON repository, where alarms were defined, delivering the first iteration in 8 days.
I then created a roadmap to scale the framework as complexity grew, including logic to cap auto-resolution attempts before escalating to Customer Care, ensuring trust in the product did not erode over time.
07 -
Design system: the company's first
On my own initiative, I adapted system discipline to hardware constraints for the first time.
I created tokens, component libraries, and typography styles used on all four screens of Ara - Energy Flow, EV, Home Consumption, and Support, effectively creating consistency and a standard for engineering handoff that was otherwise nonexistent.
This initiative exponentially increases our team's velocity in prototyping, support, and handoffs and bolstered the image of the Product Team's capabilities in the eyes of the CEO.
08 -
Lessons learned
LESSON 01
The best design is the one that can ship
The right strategy for this project was a targeted evolution that respected technical debt and preserved the launch date while still meaningfully improving usability. Quality is impact achievable within real constraints, not visions.
LESSON 02
Simplicity is the ultimate empathy
We designed for homes with people who didn't understand technical jargon. They didn't need technically informative screens. They needed simple designs and metrics they could easily understand.
LESSON 03
Trust is built through alignment