BatteryFlower
When designing dashboards for energy systems in previous work, I realised that numbers alone don't communicate well. I wanted to build a playful infographic to tie together both sustainability and readable battery insights.
- Year
- 2026
Stack
- CSS
- TailwindCSS
- React
- TypeScript
- UI/UX Design
- Figma
A new representation of battery health
BatteryFlower translates complex battery performance data into a visual, interactive system that anyone can understand. Instead of raw numbers, battery health is expressed as a circular “flower” of segments, where each petal represents a portion of the overall score. Healthier batteries produce fuller, more vibrant petals, giving users an immediate sense of performance without needing to interpret technical figures.
Battery Health
Poor
Battery Type
Once daily
Optimal operating range
Try it out! This is an interactive case study ⟢
Balancing scientific accuracy with clarity
The health calculation is based on established battery science. Lithium-ion, solid-state, and lead-acid chemistries degrade differently depending on charge cycles and operating temperature. Research on battery lifetime and thermal stress (Schmidt et al., Journal of Power Sources, 2020) informed the model, ensuring that the dynamic health score from 0-100 reflects realistic behaviour. Higher temperatures accelerate wear, and frequent cycles reduce lifespan. These are factors the visualisation communicates clearly.
Immediate feedback and interaction
The design emphasises clarity, control, and discoverability. Users can adjust annual charge cycles, with relatable labels such as “Once daily” or “Weekly”, toggle battery type, and explore temperature thresholds. The flower responds in real time, using subtle opacity and smooth animations to highlight changes without overwhelming the user. By turning abstract data into an interactive visual, users can explore how different conditions affect battery health in an intuitive, low-friction way.
Encouraging sustainable awareness
The flower metaphor links performance to longevity, reinforcing energy-conscious behaviour. By making battery health visible and understandable, the component supports informed decisions that extend battery life and reduce waste, demonstrating how thoughtful design can translate technical complexity into actionable insight.