Supernova Green.
Supernova Green.
Supernova Green.
EV CHARGER UI/UX
EV CHARGER UI/UX
EV CHARGER UI/UX
I led the redesign of Supernova Green’s EV charger interface. Supernova Green, based in Ahmedabad, is a company expanding from diesel generator manufacturing and automotive dealerships (Kia, Audi, Tata) into sustainable energy solutions through EV charging infrastructure across India.
I led the redesign of Supernova Green’s EV charger interface. Supernova Green, based in Ahmedabad, is a company expanding from diesel generator manufacturing and automotive dealerships (Kia, Audi, Tata) into sustainable energy solutions through EV charging infrastructure across India.
Timeline
Timeline
3 Weeks
3 Weeks
Disciplines
Disciplines
UI/UX Design
UI/UX Design
Role
Role
Design Lead
Design Lead
Tools
Tools
Figma
Figma
Context & Challenge.
Context & Challenge.
The current charger user interface (UI) does not have a distinct visual identity, making it confusing for users. It appears overly technical and seems designed more for engineers than for the average electric vehicle (EV) owner.
The current charger user interface (UI) does not have a distinct visual identity, making it confusing for users. It appears overly technical and seems designed more for engineers than for the average electric vehicle (EV) owner.
Opportunity.
Opportunity.
The goal was to build a unified visual system that reflects Supernova Green’s emerging clean-energy brand while making the charging process intuitive and effortless for all users.
The goal was to build a unified visual system that reflects Supernova Green’s emerging clean-energy brand while making the charging process intuitive and effortless for all users.
Interface Before Redesign
Interface Before Redesign
Interface Before Redesign
The Problem.
The Problem.
The Problem.
The previous interface was functional but not designed for consumer use. It felt technical, inconsistent, and confusing to anyone unfamiliar with EV charging protocols. While Analyising the user interface and user experience of the EV charger I listed down 6 major core problems.
The previous interface was functional but not designed for consumer use. It felt technical, inconsistent, and confusing to anyone unfamiliar with EV charging protocols. While Analyising the user interface and user experience of the EV charger I listed down 6 major core problems.
Inconsistent UI elements, spacing, and color usage.
Inconsistent UI elements, spacing, and color usage.
Inconsistent UI elements, spacing, and color usage.
Unclear communication status during sessions.
Unclear communication status during sessions.
Unclear communication status during sessions.
UX felt like a developer interface, not a consumer product.
UX felt like a developer interface, not a consumer product.
UX felt like a developer interface, not user friendly.
Navigation not suited for general customers.
Navigation not suited for general customers.
Navigation not suited for general customers.
No payment information or sequence clarity.
No payment information or sequence clarity.
No payment information or sequence clarity.
Unclear actions like Start Charging or Stop Charging.
Unclear actions like Start Charging or Stop Charging.
Unclear actions like Start Charging or Stop Charging.
RESEARCH
RESEARCH
RESEARCH
Desk Research.
Desk Research.
Desk Research.
To understand the EV charging ecosystem and identify gaps in the existing UI, I conducted structured desk research. Since full user testing and field interviews will occur after development, desk research allowed me to build foundational knowledge, analyze the market, and study industry patterns without direct user involvement.
To understand the EV charging ecosystem and identify gaps in the existing UI, I conducted structured desk research. Since full user testing and field interviews will occur after development, desk research allowed me to build foundational knowledge, analyze the market, and study industry patterns without direct user involvement.
To understand the EV charging ecosystem and identify gaps in the existing UI, I conducted structured desk research. Since full user testing and field interviews will occur after development, desk research allowed me to build foundational knowledge, analyze the market, and study industry patterns without direct user involvement.
I reviewed publicly available documentation and technical resources about:
I reviewed publicly available documentation and technical resources about:
I reviewed publicly available documentation and technical resources about:
COMPETITOR UI ANALYSIS
After reviewing leading public EV charging solutions such as Tesla Supercharger, IONITY, and ChargePoint, a common pattern emerged: most systems either rely heavily on vehicle integration or external apps, reducing the role of the charger interface itself. While this minimizes friction for repeat users, it often creates uncertainty for first-time or cross-network users. This gap highlights an opportunity for a charger UI that is self-sufficient, clearly guided, and trustworthy without depending on prior familiarity or ecosystem lock-in.
Users interacting with public EV chargers prefer linear, step-by-step flows over exploratory interfaces. Unlike mobile apps, charger interfaces are used in time-sensitive, high-attention environments where users expect clear guidance rather than choice-heavy navigation. Interfaces that present one clear action at a time reduce hesitation, prevent errors, and help users complete charging sessions with greater confidence.
GUIDED FLOWS OVER EXPLORATORY INTERFACES
WORKING OF EV CHARGER
Public EV chargers follow a structured sequence that begins with vehicle connection, user authentication, and charger–vehicle communication before energy transfer starts. Once connected, the charger verifies compatibility, confirms payment or authorization, and establishes a stable charging session while continuously monitoring power flow, battery status, and safety conditions. Any interruption, error, or completion state must be clearly communicated to the user, making system feedback and status visibility critical throughout the interaction.
COMPETITOR UI ANALYSIS
After reviewing leading public EV charging solutions such as Tesla Supercharger, IONITY, and ChargePoint, a common pattern emerged: most systems either rely heavily on vehicle integration or external apps, reducing the role of the charger interface itself. While this minimizes friction for repeat users, it often creates uncertainty for first-time or cross-network users. This gap highlights an opportunity for a charger UI that is self-sufficient, clearly guided, and trustworthy without depending on prior familiarity or ecosystem lock-in.
Users interacting with public EV chargers prefer linear, step-by-step flows over exploratory interfaces. Unlike mobile apps, charger interfaces are used in time-sensitive, high-attention environments where users expect clear guidance rather than choice-heavy navigation. Interfaces that present one clear action at a time reduce hesitation, prevent errors, and help users complete charging sessions with greater confidence.
GUIDED FLOWS OVER EXPLORATORY INTERFACES
WORKING OF EV CHARGER
Public EV chargers follow a structured sequence that begins with vehicle connection, user authentication, and charger–vehicle communication before energy transfer starts. Once connected, the charger verifies compatibility, confirms payment or authorization, and establishes a stable charging session while continuously monitoring power flow, battery status, and safety conditions. Any interruption, error, or completion state must be clearly communicated to the user, making system feedback and status visibility critical throughout the interaction.
COMPETITOR UI ANALYSIS
After reviewing leading public EV charging solutions such as Tesla Supercharger, IONITY, and ChargePoint, a common pattern emerged: most systems either rely heavily on vehicle integration or external apps, reducing the role of the charger interface itself. While this minimizes friction for repeat users, it often creates uncertainty for first-time or cross-network users. This gap highlights an opportunity for a charger UI that is self-sufficient, clearly guided, and trustworthy without depending on prior familiarity or ecosystem lock-in.
Users interacting with public EV chargers prefer linear, step-by-step flows over exploratory interfaces. Unlike mobile apps, charger interfaces are used in time-sensitive, high-attention environments where users expect clear guidance rather than choice-heavy navigation. Interfaces that present one clear action at a time reduce hesitation, prevent errors, and help users complete charging sessions with greater confidence.
GUIDED FLOWS OVER EXPLORATORY INTERFACES
WORKING OF EV CHARGER
Public EV chargers follow a structured sequence that begins with vehicle connection, user authentication, and charger–vehicle communication before energy transfer starts. Once connected, the charger verifies compatibility, confirms payment or authorization, and establishes a stable charging session while continuously monitoring power flow, battery status, and safety conditions. Any interruption, error, or completion state must be clearly communicated to the user, making system feedback and status visibility critical throughout the interaction.
RESEARCH
RESEARCH
Understanding Human–Machine Interaction
Understanding Human–Machine Interaction
By studying ATMs, kiosks, and ticketing systems, I learned how people behave in fast, high-pressure environments. These interfaces rely on instant clarity, low cognitive load, and strong visual cues. The learning was clear: public-facing machines need to communicate instantly, operate with predictable behaviors, and provide error-proof guidance that even a first-time user can follow without hesitation.
By studying ATMs, kiosks, and ticketing systems, I learned how people behave in fast, high-pressure environments. These interfaces rely on instant clarity, low cognitive load, and strong visual cues. The learning was clear: public-facing machines need to communicate instantly, operate with predictable behaviors, and provide error-proof guidance that even a first-time user can follow without hesitation.
Implement Checkbox
Implement Checkbox
Implement Checkbox
Implement Checkbox
Implement Checkbox
Implement Checkbox
One Primary Action Per Screen.
One Primary Action Per Screen.
Minimize decision-making, narrow the user focus.
Minimize decision-making, narrow the user focus.
Minimized. Text. Denendency.
Minimized Text Dependency.
Minimized Text Dependency.
Users don’t read long text on public machines.
Users don’t read long text on public machines.
Back
Continue
Back
Continue
Rapid Recoverability.
Rapid Recoverability.
When users make mistakes, recovery should be easy.
When users make mistakes, recovery should be easy.
Delete
Confirm
Delete
Confirm
Confirmation at Every Step.
Confirmation at Every Step.
Each action should feel acknowledged.
Each action should feel acknowledged.
THE PROCESS
THE PROCESS
THE PROCESS
Defining User Flow.
Defining User Flow.
Defining User Flow.
The redesign followed a structured approach focused on clarifying the user journey, fixing UI inconsistencies, and aligning the interface with real-world charging behavior. Each stage built on the insights and pain points identified during the UI audit and desk research.
The redesign followed a structured approach focused on clarifying the user journey, fixing UI inconsistencies, and aligning the interface with real-world charging behavior. Each stage built on the insights and pain points identified during the UI audit and desk research.
RESEARCH
Understanding Human–Machine Interaction
By studying ATMs, kiosks, and ticketing systems, I learned how people behave in fast, high-pressure environments. These interfaces rely on instant clarity, low cognitive load, and strong visual cues. The learning was clear: public-facing machines need to communicate instantly, operate with predictable behaviors, and provide error-proof guidance that even a first-time user can follow without hesitation.
Implement Checkbox
Implement Checkbox
Implement Checkbox
Implement Checkbox
Implement Checkbox
Implement Checkbox
One Primary Action Per Screen.
Minimize decision-making, narrow the user focus.
Back
Continue
Back
Continue
Rapid Recoverability.
When users make mistakes, recovery should be easy.
Minimized. Text. Denendency.
Minimized Text Dependency.
Users don’t read long text on public machines.
Delete
Confirm
Delete
Confirm
Confirmation at Every Step.
Each action should feel acknowledged.
THE PROCESS
THE PROCESS
THE PROCESS
Wireframes.
Wireframes.
Wireframes.
Mid-fidelity wireframes helped explore layout options while focusing on clarity and hierarchy.
At this stage, I refined placement of primary actions, created space for status feedback, and ensured that each screen served a single purpose.
Mid-fidelity wireframes helped explore layout options while focusing on clarity and hierarchy.
At this stage, I refined placement of primary actions, created space for status feedback, and ensured that each screen served a single purpose.
Main Screen.
Main Screen.
Main Screen.
While designing this screen I tried to set a clear visual hierarchy. Guiding their eyes on the main interaction of the screen which is the outlet selection.
While designing this screen I tried to set a clear visual hierarchy. Guiding their eyes on the main interaction of the screen which is the outlet selection.
While designing this screen I tried to set a clear visual hierarchy. Guiding their eyes on the main interaction of the screen which is the outlet selection.
Designing this screen was crucial because this was the screen that was going to act as the foundational base for all the other screens.
Designing this screen was crucial because this was the screen that was going to act as the foundational base for all the other screens.
Designing this screen was crucial because this was the screen that was going to act as the foundational base for all the other screens.
THE PROCESS
Visual Design.
Once the structural decisions were set, I moved into designing the system to create the screens. I designed a visual identity that matches with the brand.
Colors.
Colors were chosen on the basis of their current brand identity. They were only using green as their accent color with any other color.
Forest Green
Charcoal Black
Pure White
Fox Red
Icons.
After finalizing the color palette, I designed the iconography with a focus on consistent style and stroke weight, ensuring clarity and visual harmony.
Wanted Sans.
Wanted Sans Font Family is a strong and elegant sans serif font family. With its geometric design and humanist impression, Wanted Sans is easy to read. Suitable for both display and body text, it boasts beautiful and witty character designs, intelligent context recognition, and other useful features.
01
UI
H1
02
Text
03
Icons
Hello
04
Buttons
Fonts.
Choosing the right typography was an important step, since it needed to be clear and easy to read. I chose sans serif typefaces because they are well suited for on screen reading.
THE PROCESS
Visual Design.
Once the structural decisions were set, I moved into designing the system to create the screens. I designed a visual identity that matches with the brand.
Colors.
Colors were chosen on the basis of their current brand identity. They were only using green as their accent color with any other color.
Forest Green
Charcoal Black
Pure White
Fox Red
Icons.
After finalizing the color palette, I designed the iconography with a focus on consistent style and stroke weight, ensuring clarity and visual harmony.
Wanted Sans.
Wanted Sans Font Family is a strong and elegant sans serif font family. With its geometric design and humanist impression, Wanted Sans is easy to read. Suitable for both display and body text, it boasts beautiful and witty character designs, intelligent context recognition, and other useful features.
01
UI
H1
02
Text
03
Icons
Hello
04
Buttons
Fonts.
Choosing the right typography was an important step, since it needed to be clear and easy to read. I chose sans serif typefaces because they are well suited for on screen reading.
THE PROCESS
Visual Design.
Once the structural decisions were set, I moved into designing the system to create the screens. I designed a visual identity that matches with the brand.
Colors.
Colors were chosen on the basis of their current brand identity. They were only using green as their accent color with any other color.
Forest Green
Charcoal Black
Pure White
Fox Red
Icons.
After finalizing the color palette, I designed the iconography with a focus on consistent style and stroke weight, ensuring clarity and visual harmony.
Wanted Sans.
Wanted Sans Font Family is a strong and elegant sans serif font family. With its geometric design and humanist impression, Wanted Sans is easy to read. Suitable for both display and body text, it boasts beautiful and witty character designs, intelligent context recognition, and other useful features.
01
UI
H1
02
Text
03
Icons
Hello
04
Buttons
Fonts.
Choosing the right typography was an important step, since it needed to be clear and easy to read. I chose sans serif typefaces because they are well suited for on screen reading.
THE PROCESS
THE PROCESS
THE PROCESS
Design Components.
Design Components.
Design Components.
Creating design components was one of the curcial steps while designing the interface as the components are something that has to be informative yet visually engaging and clear to the user.
Creating design components was one of the curcial steps while designing the interface as the components are something that has to be informative yet visually engaging and clear to the user.
Outlet 1
CCS
87%
Charged
Elapsed Time
12:32
Energy
147 KWh
Start SoC
45%
Final SoC
96%
RFID Tag
Scan QR Code
DISCONNECT
Elapsed Time
Energy
Start SoC
Final SoC
12:32 mins
147 Kwh
45%
96%
87%
STOP CHARGING
Under Voltage
Over Voltage
Door Open
Earth Fault
Outlet 1
CCS
87%
Charged
Elapsed Time
12:32
Energy
147 KWh
Start SoC
45%
Final SoC
96%
RFID Tag
Scan QR Code
DISCONNECT
Elapsed Time
Energy
Start SoC
Final SoC
12:32 mins
147 Kwh
45%
96%
87%
STOP CHARGING
Under Voltage
Over Voltage
Door Open
Earth Fault
Outlet 1
CCS
87%
Charged
Elapsed Time
12:32
Energy
147 KWh
Start SoC
45%
Final SoC
96%
RFID Tag
Scan QR Code
DISCONNECT
Elapsed Time
Energy
Start SoC
Final SoC
12:32 mins
147 Kwh
45%
96%
87%
STOP CHARGING
Under Voltage
Over Voltage
Door Open
Earth Fault
OUTCOME
OUTCOME
OUTCOME
Key Features.
Key Features.
Key Features.
The following key features highlight the functionalities of the interface, designed to improve usability, clarity, and overall user experience. Each feature addresses a specific user need while working together as a cohesive system.
The following key features highlight the functionalities of the interface, designed to improve usability, clarity, and overall user experience. Each feature addresses a specific user need while working together as a cohesive system.
Multi language Support
Lets users switch to their preferred language instantly for a more comfortable charging experience.
Supernova Engineers Ltd 2025, All Rights Reserved
Choose Your Language
English
हिंदी
ગુજરાતી
తెలుగు
தமிழ்
16:06
Light and dark mode
Automatically adapts the interface to outdoor lighting conditions for better readability.
Descriptive charging dial
Shows real-time charging progress with clear visuals so users always know what’s happening on the main screen while there are 2 vehicles charging.
Multi language Support
Lets users switch to their preferred language instantly for a more comfortable charging experience.
Supernova Engineers Ltd 2025, All Rights Reserved
Choose Your Language
English
हिंदी
ગુજરાતી
తెలుగు
தமிழ்
16:06
Light and dark mode
Automatically adapts the interface to outdoor lighting conditions for better readability.
Descriptive charging dial
Shows real-time charging progress with clear visuals so users always know what’s happening on the main screen while there are 2 vehicles charging.
Multi language Support
Lets users switch to their preferred language instantly for a more comfortable charging experience.
Supernova Engineers Ltd 2025, All Rights Reserved
Choose Your Language
English
हिंदी
ગુજરાતી
తెలుగు
தமிழ்
16:06
Multi language Support
Lets users switch to their preferred language instantly for a more comfortable charging experience.
Supernova Engineers Ltd 2025, All Rights Reserved
Choose Your Language
English
हिंदी
ગુજરાતી
తెలుగు
தமிழ்
16:06
Light and dark mode
Automatically adapts the interface to outdoor lighting conditions for better readability.
Light and dark mode
Automatically adapts the interface to outdoor lighting conditions for better readability.
Descriptive charging dial
Shows real-time charging progress with clear visuals so users always know what’s happening on the main screen while there are 2 vehicles charging.
Descriptive charging dial
Shows real-time charging progress with clear visuals so users always know what’s happening on the main screen while there are 2 vehicles charging.
OUTCOME
OUTCOME
Final Design
Final Design
The final UI for Supernova Green translates research insights into a clear, linear charging experience designed for public infrastructure. Each screen guides the user through a single action at a time, reducing cognitive load and eliminating unnecessary decisions during time-sensitive interactions.
The final UI for Supernova Green translates research insights into a clear, linear charging experience designed for public infrastructure. Each screen guides the user through a single action at a time, reducing cognitive load and eliminating unnecessary decisions during time-sensitive interactions.
ONGOING
ONGOING
Future Scope
Future Scope
The redesigned interface forms a solid foundation for Supernova Green’s charging experience, with room to evolve as real users interact with it. As the network grows, the UI can expand to support new capabilities, improved accessibility, and deeper system intelligence. These enhancements will shape the charger into a more seamless, scalable, and user-centered product.
The redesigned interface forms a solid foundation for Supernova Green’s charging experience, with room to evolve as real users interact with it. As the network grows, the UI can expand to support new capabilities, improved accessibility, and deeper system intelligence. These enhancements will shape the charger into a more seamless, scalable, and user-centered product.
User testing and iterative refinement
User testing and iterative refinement
User testing and iterative refinement
Once the product is deployed, structured user testing will help validate the redesigned flow. Insights from real charging behavior will guide the next wave of improvements.
Once the product is deployed, structured user testing will help validate the redesigned flow. Insights from real charging behavior will guide the next wave of improvements.
Once the product is deployed, structured user testing will help validate the redesigned flow. Insights from real charging behavior will guide the next wave of improvements.
Quick Help & Support Access
Quick Help & Support Access
Quick Help & Support Access
A built-in help panel can offer instant answers to common questions and connect users to support when needed. This ensures users never feel stuck or uncertain during the charging process.
A built-in help panel can offer instant answers to common questions and connect users to support when needed. This ensures users never feel stuck or uncertain during the charging process.
A built-in help panel can offer instant answers to common questions and connect users to support when needed. This ensures users never feel stuck or uncertain during the charging process.
Error Recovery Assistance
Error Recovery Assistance
Error Recovery Assistance
Future versions can guide users through resolving common issues, like failed handshakes or connector errors. Clear, friendly prompts reduce frustration and increase confidence at the charger.
Future versions can guide users through resolving common issues, like failed handshakes or connector errors. Clear, friendly prompts reduce frustration and increase confidence at the charger.
Future versions can guide users through resolving common issues, like failed handshakes or connector errors. Clear, friendly prompts reduce frustration and increase confidence at the charger.
Technician mode for diagnostics
Technician mode for diagnostics
Technician mode for diagnostics
A dedicated technician interface can streamline error detection and maintenance. Clear diagnostic visuals and guided steps can reduce downtime and service complexity.
A dedicated technician interface can streamline error detection and maintenance. Clear diagnostic visuals and guided steps can reduce downtime and service complexity.
A dedicated technician interface can streamline error detection and maintenance. Clear diagnostic visuals and guided steps can reduce downtime and service complexity.
CONCLUSION
CONCLUSION
My Learnings
My Learnings
This project reinforced the importance of designing for context over convention. Working on a public EV charging interface highlighted how assumptions drawn from mobile and web design can fail in high-pressure, shared environments. The process sharpened my focus on clarity, restraint, and system feedback, and emphasized how good infrastructure design is often invisible, felt more through reliability than visual expression.
This project reinforced the importance of designing for context over convention. Working on a public EV charging interface highlighted how assumptions drawn from mobile and web design can fail in high-pressure, shared environments. The process sharpened my focus on clarity, restraint, and system feedback, and emphasized how good infrastructure design is often invisible, felt more through reliability than visual expression.
Small inconsistencies create big confusion.
Small inconsistencies create big confusion.
Small inconsistencies create big confusion.
Icon mismatches, unclear labels, and weak feedback loops seem minor, but they break trust instantly. This project helped me appreciate the weight that every micro-decision in UI carries.
Icon mismatches, unclear labels, and weak feedback loops seem minor, but they break trust instantly. This project helped me appreciate the weight that every micro-decision in UI carries.
Icon mismatches, unclear labels, and weak feedback loops seem minor, but they break trust instantly. This project helped me appreciate the weight that every micro-decision in UI carries.
Improving an existing system is about clarity.
Improving an existing system is about clarity.
Improving an existing system is about clarity.
The challenge was not to create something entirely new, but to elevate what already existed — fixing the hierarchy, tightening consistency, and making interactions intuitive without disrupting the familiar flow.
The challenge was not to create something entirely new, but to elevate what already existed — fixing the hierarchy, tightening consistency, and making interactions intuitive without disrupting the familiar flow.
The challenge was not to create something entirely new, but to elevate what already existed — fixing the hierarchy, tightening consistency, and making interactions intuitive without disrupting the familiar flow.
Designing for real scenarios is very different.
Designing for real scenarios is very different.
Designing for real scenarios is very different.
Working on a public machine taught me how crucial clarity, hierarchy, and predictability are. People don’t explore; they act quickly, and the interface has to guide them without hesitation.
Working on a public machine taught me how crucial clarity, hierarchy, and predictability are. People don’t explore; they act quickly, and the interface has to guide them without hesitation.
Working on a public machine taught me how crucial clarity, hierarchy, and predictability are. People don’t explore; they act quickly, and the interface has to guide them without hesitation.
TABLET VIEW IS STILL UNDER DEVELOPMENT.
Open to Work
Ahmedabad, India
Interaction Designer
Brand Designer