Back to works
[ PROJECT 06
— EVCHARGING ]
Replacing minimal loading feedback with contextual motion, so users trust that charging is actively starting.
Project Type
Role
UI/UX Designer
Timeline
Platforms
Mobile Web · PWA
[ THE CONTEXT ]
A loading state that didn't feel like it was loading
USERS COULD LEAVE TOO EARLY
Because the state looked inactive, some users pressed Back before preparation completed. On a PWA opened from a QR code, that means starting over.
PROGRESS WAS HARD TO RECOGNIZE
The blinking lightning icon didn't clearly communicate that the charging session was still being prepared.
WAITING FELT UNCERTAIN
The timer showed elapsed time, but users still lacked clear feedback about what was happening behind the screen.
[ DESIGN FOCUS ]
After scanning the QR code, users enter a preparation state before charging starts. The old screen already showed a blinking lightning icon, a timer, and instructions, but it still didn't make the process feel active, and some users pressed Back before it finished.
How can the preparation state reassure users that charging is actively starting?
01
Make system activity visible
Replace minimal loading feedback with continuous motion and clearer charging context, while keeping the timer and safety instructions in view.
[ SOLUTION ]
The redesign turns an abstract loading icon into a scene that shows what is actually happening, the vehicle and the charging station, so motion communicates that the system is working.
SOLUTION 01
Make charging preparation feel active
The blinking lightning icon is replaced with a contextual Lottie animation of the vehicle and charging station. Continuous motion gives stronger feedback that the process is still running, and the charging scene connects the loading state to the real action taking place. The timer and safety instructions stay visible, so users still know not to disconnect the connector or leave the process. The interaction was built as a working PWA using Claude Code and Lottie, so the motion, timing, and loading feedback could be evaluated beyond a static screen, the design decision and interaction direction were mine, with Claude Code supporting the implementation and Lottie delivering the animation.
KEY DECISION
Use motion to communicate what the system is doing, not simply to decorate the loading screen.
[ CONCEPT OUTPUT ]
The revised experience gives users clearer confirmation that the system is still working. Instead of an abstract blinking icon, the preparation state now combines contextual motion, elapsed time, and safety instructions in one screen, so the wait reads as active, the charging scene connects it to what is happening, and the whole flow was validated as a working PWA built with Claude Code and Lottie.
[ REFLECTION ]
01
LEARNED
Motion is most useful when it explains what the system is doing, not when it only makes the interface feel more animated.
02
CHALLENGE
The preparation state only lasts briefly, so the motion had to feel noticeable enough to communicate progress immediately, without competing with the timer and safety instructions users still needed to read.
03
WHAT’S NEXT
Test whether users recognize that charging is still being prepared, and whether the clearer feedback reduces the tendency to leave the page early: do users see that the system is still working, do they feel more confident waiting, are they less likely to press Back, and is the animation helpful without becoming distracting?
/ LET'S WORK TOGETHER
I'm open to collaboration and new opportunities
/ GET IN TOUCH