1. About the Client
VIA is a leading European FinTech innovator delivering advanced payment solutions tailored for self-service technologies across diverse industries, including electric vehicle (EV) charging networks and vending operations.
Operating through its two core branches—VIA Payments, which focuses on innovative, secure payment processing and transaction simplification for merchants and acquirers, and VIA Consulting, which provides expert IT consulting and custom software development for financial institutions—VIA empowers businesses to modernize their operations.
Headquartered in Lisbon, Portugal, the company maintains a strong presence across Europe while extending its operations to key international markets, including Brazil, Colombia, and Mozambique. With cutting-edge payment infrastructure, VIA enables seamless, secure transactions at unattended touchpoints—helping clients elevate customer experiences, streamline processes, and ensure full compliance with international standards—while partnering with EV charging providers, vending operators, and other self-service sectors to deliver reliable, intuitive interfaces that fuel efficiency and growth.
2. Project Scope
TeddyGraphics was commissioned to design complete User Experiences for two distinct Self-Service payment scenarios: Electric Vehicle Charging Stations and Vending Machines. Our mission was to create interfaces that not only facilitate transactions but actively and clearly explain the Users what to do and when in an optimally legible way, that's also Accessibility compliant.
The project required developing interfaces for two different hardware platforms: the PAX IM30 terminal (supporting tap, insert, and chip card readers) and Galaxy Tablet, about twice the size of IM30's screen (utilizing contactless NFC readers). This dual-platform approach ensured VIA could deploy the solution across various installation scenarios while maintaining consistent user experience principles.
a) Dual Design Approach
Understanding that different deployment scenarios might require different UX philosophies, we developed two complete interface variations for VIA to choose from:
Demo 1 = Simplicity-first approach
Minimal information, maximum ease of use. Perfect for quick transactions dedicated for more tech-savvy Users, that just want to proceed fast.
Demo 2 = Information-first approach
Technical specifications, visual plug identification, and status information prominently displayed. Designed for Users who need to understand what they're getting (charging speed, plug type) before committing.
Both approaches maintained core usability principles and WCAG compliance while offering VIA flexibility to match their brand positioning and User Research findings.
b) EV-Charging Interface Design
The electric vehicle charging interface was designed to address a critical challenge in the EV charging industry: plug confusion. Many EV drivers, especially new Users, struggle to identify which charging plug their vehicle requires and understand the differences between regular and fast-charging options.
Our solution focused on visual clarity and education. We integrated spinning 3D animations (in Demo 2) and 2D animations (in Demo 1) of charging plugs directly into the interface, allowing Users to see the exact physical shape and connection points of each plug type. This visual approach dramatically reduces the cognitive load compared to text-only descriptions or simple 2D icons.
The interface guides users through plug selection by displaying:
- 3D animated plug models (in Demo 2) and 2D animated plugs (in Demo 1) that Users can visually match to their vehicle's charging port
- Accurate technical nomenclature (e.g., "CCS2", "Type 2", "CHAdeMO") instead of ambiguous letter designations
- Charging power specifications (kW output) to help users understand charging speed
- Estimated charging times based on selected power levels
- Connector availability status in real-time
c) Vending Machine Interface Design
The vending machine interface was designed to streamline the product selection and payment process while accommodating users with varying levels of digital literacy. Our approach prioritized clarity, speed, and accessibility.
Key features of the vending interface include:
- Large, high-contrast product images with clear pricing information
- Intuitive navigation optimized for both touchscreen and physical button inputs
- Multi-language support with easy language switching
- Clear payment status indicators throughout the transaction flow
- Accessibility features compliant with WCAG 2.2 AAA standards
3. Key Design Innovations
a) Integrated 3D Plug Animations
One of the most distinctive features of our EV-charging interface is the interactive 3D plug visualization system. Unlike traditional charging station interfaces that rely on flat icons or photographs, our solution presents rotating 3D models of each charging connector.
These animations serve multiple purposes:
- Visual matching: Users can instantly compare the animated plug to their vehicle's charging port
- Spatial understanding: The rotation helps users understand the plug's orientation and connection mechanism
- Differentiation: Clear visual distinction between regular charging and fast-charging connectors
- Engagement: The animated elements make the interface feel modern and premium while serving a functional purpose
The 3D models were optimized for performance across both PAX IM30 terminals and Galaxy Tablets, ensuring smooth animations without compromising transaction speed.
b) Accurate Plug Naming & Technical Specifications
We challenged the industry standard of using simple letter designations (e.g., "Plug A", "Plug B") by implementing accurate technical nomenclature that aligns with automotive industry standards.
Our interface displays:
- Proper connector names: CCS2 (Combined Charging System), Type 2 (Mennekes), CHAdeMO, etc.
- Charging power ratings: Displayed in kilowatts (kW) for both AC and DC charging
- Connector specifications: Maximum amperage, voltage ranges, and compatibility notes
- Charging speed indicators: Estimated charging time for typical battery capacities
This approach educates users over time, helping them become more knowledgeable EV owners who can make informed decisions at any charging station, not just VIA-branded ones.
c) WCAG 2.2 AAA Compliance
Accessibility was not an afterthought but a core design principle from the project's inception. We achieved WCAG 2.2 Level AAA compliance—the highest accessibility standard—ensuring the interface is usable by individuals with diverse abilities.
Our accessibility features include:
- High contrast ratios: All text and interactive elements exceed 7:1 contrast ratios
- Scalable typography: Font sizes designed for readability at various distances and lighting conditions
- Large touch targets: All buttons and interactive elements meet minimum size requirements (44x44 pixels minimum)
- Clear focus indicators: Visible keyboard navigation support for users with motor impairments
- Color-independent information: No information conveyed by color alone
This level of accessibility not only improves usability for individuals with disabilities but also enhances the experience for all users—particularly in challenging conditions like bright sunlight or when wearing gloves.
d) Multi-Device Payment Solutions
The project required designing for two distinct hardware platforms, each with different payment capabilities:
PAX IM30 Terminal: A compact payment terminal supporting multiple payment methods including tap (NFC), card insertion, and chip reading. The interface was optimized for the terminal's smaller screen while maintaining full functionality and readability.
Galaxy Tablet: A larger-format Android tablet with built-in NFC reader, supporting contactless payments only. The interface leverages the additional screen real estate to display more information simultaneously while guiding users through contactless payment exclusively.
Both interfaces share core design language and user flow logic, ensuring brand consistency across deployment scenarios while optimizing for each device's specific capabilities and constraints.
4. Communication with the Client
Transparent collaboration was the cornerstone of this project's success. From initial discovery through final delivery, we maintained a structured communication framework that kept VIA informed, engaged, and confident in our design direction.
UX Discovery Session: We kicked off the engagement with an intensive UX Discovery workshop, where we immersed ourselves in VIA's vision, business objectives, and technical constraints. This collaborative session established a shared understanding of user needs, business goals, and the unique challenges of designing for self-service payment terminals in diverse environments.
Internal Research & Strategy: Following discovery, our team conducted extensive internal research into EV charging behaviors, accessibility standards, payment terminal ergonomics, and competitive benchmarking. This research phase informed our strategic approach and ensured our design decisions were grounded in both user insights and industry best practices.
Weekly Video Consultations: Throughout the project lifecycle, we maintained consistent weekly video calls with VIA's stakeholders. These synchronous sessions facilitated real-time feedback, aligned expectations, and enabled rapid decision-making on critical design choices—from color accessibility ratios to animation timing.
Iterative Design with Video Walkthroughs: After each design iteration, we shared our evolving Figma prototypes accompanied by detailed video explainers. These walkthroughs provided VIA's team with context behind every design decision, demonstrating user flows, explaining accessibility considerations, and showcasing animation behaviors. This approach transformed abstract wireframes into tangible experiences, making feedback more precise and actionable.
This communication methodology—combining structured discovery, rigorous research, consistent synchronous touchpoints, and asynchronous visual documentation—enabled seamless collaboration across time zones and disciplines. The result was a design process that was both efficient and deeply collaborative, minimizing revisions while maximizing design quality and stakeholder confidence.
5. Recognition & Results
The project's success was validated when VIA presented our interface designs at the Portugal Digital Summit 2025 in Lisbon—a prestigious event showcasing cutting-edge digital innovation across Europe.
Key outcomes include:
- Industry recognition: Featured presentation at a major European technology summit
- Client satisfaction: VIA's choice to showcase our work demonstrates confidence in the solution
- User education: The interface actively teaches users about EV charging technology, reducing support calls
- Accessibility leadership: WCAG 2.2 AAA compliance sets a new standard for self-service kiosk design
- Design flexibility: Two complete design variations provide VIA with strategic deployment options
The combination of educational UX, cutting-edge 3D visualization, and uncompromising accessibility creates an interface that not only facilitates transactions but enhances users' understanding of emerging technologies.
