Windows
Settings
Windows battery redesign
I defined the battery state model behind Windows 11's redesigned battery icon and taskbar percentage, which cut average misreading from 8.5 points to under 2 in a 48-person study.
My part
State model, icon recommendation, study design, percentage
Duration
2023 – 2025
Crew
PM, research, iconography, accessibility, engineering
Ships on
Windows 11
Context & role
Windows 11 shows battery status in the taskbar, Quick Settings, the Power & battery page, notifications and the lock screen, on laptops and tablets across hundreds of millions of devices. The icon alone lived in three icon fonts owned outside my team. I worked in Windows Core OS with PM, research, iconography and accessibility partners. My role: I owned the battery state definition and the icon recommendation, co-designed the study, produced the Figma files engineering built from, and later designed the taskbar percentage. Our researcher ran the experiment and analysis, and the final direction was a joint decision across PM, design and the icon owners.
Stakes
Battery life is one of the main reasons people choose a laptop, yet people rarely open power settings and only watch their battery when something unexpected happens. Power and battery problems were a major source of feedback and support contacts. An icon people misread is a small, daily reason to trust the device less.
Reframe
Asked: refresh the icon. Reframed: help people take the right next action.
Mapping the states showed the real problem. The icon carried five overlays (Energy Saver, warning, error, smart charging and charging) that covered the charge bar, so a battery in Energy Saver looked nearly empty. Teams also used different words for the same state. I reframed the brief from "how should the icon look" to "how might we help people take the right next action from the battery icon", which moved the work from pixels to definitions and pulled the long-requested taskbar percentage into the same story.
Illustration: overlays that covered the charge bar, versus centered marks with colour backed by a percentage.
Evidence
A 48-person timed study settled the design debate
Earlier small studies showed the problem: 5 of 6 participants didn't connect the red icon with a faulty charger. Rather than settle the debate in review, I co-designed a timed experiment with our researcher. In April 2024, 48 participants in three groups each saw one icon set (the current icons, an alternative with marks on the right, or my centered, coloured proposal) and estimated battery level from screenshots. My design was significantly more accurate when discharging, in Energy Saver and when charging; the right-aligned design was more accurate for slow charging.
01
The icon was hiding its own data. Five overlays covered the charge bar, so a battery in Energy Saver looked nearly empty.
02
Teams didn't share a vocabulary. "Slow charging" meant both a slow charger and one that wasn't charging at all.
03
People wanted a number. In written comments, people repeatedly asked for a percentage and said the marks blocked the charge bar.
Key decision
One grammar for every state, even where the data favoured another design
The study didn't produce a single winner: the right-aligned design won one state and mine won three. I recommended centered marks for every state, because an icon people glance at for a second must read the same way everywhere, accepting a weaker result for slow charging. We offset that cost where it mattered most: the alert now appears only when the charger isn't charging at all, the moment someone needs another charger. When product partners warned that a new icon without a percentage wouldn't reduce dissatisfaction, I took on the percentage design so both could ship as one story.
Second call
Take on the percentage, so the icon and the number ship as one story
Product partners warned that redrawing the icon without a percentage was unlikely to reduce dissatisfaction; a percentage was one of the longest-standing requests in system tray feedback. The two were planned and funded separately. I took on the percentage design so both could ship as one story, accepting more work on a fixed timeline. It paid off twice: accessibility review found yellow fails contrast on its own, so the optional percentage became the non-colour cue that made the Energy Saver state accessible. I designed the variants too: number only or with a % sign, with and without the charging mark.
Illustration: the study favoured different designs for different states; consistency won.
Craft
Every state designed, with colour backed by a second cue
The final icon is wider so the level is easier to judge, with a single charging symbol and status marks that no longer cover the charge bar. Colour is reserved for states that need attention (charging, Energy Saver and low battery at 0–5%), mapped as one colour journey across 0–100%, and every state was drawn in light with colour, light without colour, dark and high contrast. The error state, plugged in but not charging, shows an alert. Energy Saver appears on the icon only between 0 and 20%, where it does the most work.
Illustration: every state drawn in light with colour, light without colour, dark and high contrast.
System
One state model and two principles for every battery surface
Before drawing icons, I built a single state matrix: each state, its other names, charging status, charge range, meaning, trigger, the action we wanted and its dependencies. It surfaced inconsistencies nobody had written down. From it came a priority order (level first, then plugged in and charging, then mode) and two principles: the icon never shows more than two ideas at once, and people must be able to tell whether they need to act. Engineering built the icon in three layers that follow that order and carried it to Settings, Quick Settings and the lock screen, and I taught the method to the wider design and research org.
Illustration: the state matrix behind every battery surface, and the three layers built from it.
What shipped
What shipped
The redesigned icons and a Battery percentage setting reached Windows Insiders in January 2025 across the taskbar, Quick Settings and Settings, with the lock screen following. Retail rollout began with the November 2025 update, and broader availability followed in early 2026. Engineering built the icon in three layers that follow the state model's priority order (fill for level, outline for charging and smart charging, colour for Energy Saver or low battery) and carried those states across Settings, Quick Settings, video playback and the lock screen. Two questions stayed open at launch, and I named them rather than papering over them: how smart charging should show below 80%, and the "charge to full now" control.
Outcome
What changed
The new icons and a battery percentage setting reached Windows Insiders in January 2025 and began rolling out to Windows 11 customers in November 2025. The percentage answered one of the longest-standing requests in system tray feedback. Colour is backed by a second cue, so every state also works in high contrast and without colour. These are pre-launch results with internal participants; there is no post-launch measure yet.
Reflection
Define the system before designing the surface
I would make the case for the icon and the percentage as one investment from day one, since splitting them cost weeks of debate. I would bring device makers into the state definition earlier, test with external participants in a live taskbar, and agree a post-launch success metric with PM before shipping. The principle I took away: a small component can be where several org boundaries meet, and its owners need one shared model. Evidence should settle the arguments without making the final call for us.
