Paul Venter - ICE Paygate Project

		ICE Paygate is a platform for paying or pre-buying toll vouchers to pass through a tollgate, allowing clients to hold and manage multiple wallets linked to specific providers and currencies. The system supports the execution of transactions, manages wallet balances, and ensures the security and integrity of all operations within the portal.

BACKGROUND The development of the ICE Paygate is driven by the need to provide clients with a secure, centralized platform for purchasing services from multiple providers while managing funds through provider- and currency-specific wallets. The portal is intended to streamline voucher and service payments, support integration with tolling and border control systems, and establish a foundation for future multi-country and multi-provider transactions.

PROBLEM Clients currently need to interact with multiple providers, payment channels, and border or tolling systems to purchase vouchers and services across different territories. This creates a fragmented and inefficient process, making it difficult to manage balances, currencies, transactions, and service access from one place.		SOLUTION ICE Paygate will provide a user-centred payment portal that guides clients through the process of managing wallets, selecting services, purchasing vouchers, and completing payments with minimal friction. The experience should make complex cross-border purchasing feel simple by presenting service providers, routes, currencies, wallet balances, fees, and voucher status in a clear step-by-step flow. Users should be able to quickly understand which wallet applies to each service, what balance is available, what action is required next, and when a voucher or transaction has been successfully completed.
PROJECT OVERVIEW MY ROLE: UX Research, UX Design, UI Design  TIMELINE: 13 months PROCESS: Discovery → Ideation → Design → Usability Testing TOOLS: Google Forms, Various LLM’s, Confluence, Teams, Confluence Whiteboard, Figma, Photoshop

DISCOVERY
The discovery phase was completed with a UX focus to understand the needs, pain points, and expected journeys of users purchasing and managing border post vouchers. This included reviewing the current process, identifying gaps, and clarifying how users should interact with payments, wallets, voucher selection, and custom fields. The outcome provides a clearer foundation for designing a simple, intuitive, and reusable portal experience that supports both end users and administrators.

DESK RESEARCH The UX research focused on understanding how travelers, border officers, agents, and administrators will interact with ICE Paygate. It reviewed key user needs around purchasing vouchers, selecting payment methods, using wallet options, managing multilingual access, validating vouchers, and configuring custom fields. These insights will help shape user journeys, improve usability, and guide the design of a simple, efficient portal experience.

PRIMARY RESEARCH UX primary research was conducted to understand the needs, expectations, and pain points of the key users who will interact with ICE Paygate, including end users purchasing vouchers, border officers validating vouchers, administrators managing configurations, and service providers supporting payment and voucher services. The research focused on how users currently complete voucher purchases, manage payment options, handle wallet functionality, validate vouchers at border posts, and work with configurable fields. Insights gathered from these sessions will guide the design of a standard, reusable portal that supports multilingual usage, simplifies the purchase and redemption journey, reduces dependency on developer intervention. We did competitive analysis to benchmark existing toll and voucher payment platforms, analysing their purchase flows, wallet management, validation processes, and configuration flexibility, to identify best practices, usability gaps, and opportunities to differentiate ICE Paygate with a simpler, more scalable, and user-centric experience.

To explore the issues in more depth, we interviewed selected participants from the screener survey. Five in-depth interviews with fleet managers and independent drivers identified the pain points, frustrations, needs and wants they have with current voucher and payment systems.

INTERVIEWEE QUOTES “The ticket must work offline. I’m often in areas with poor signal when I need to show it at the gate.” Thabo (Independent Driver)
“Don’t force me to pre-fund a wallet. That ties up company cash I need elsewhere.” Maria (Fleet Manager)
“I just need email and card. Two fields max — every extra field loses me a job.” Thabo (Independent Driver)

KEY TAKEAWAYS Treat the wallet as a payment method. It should sit alongside card and mobile payments as a core feature. "My Wallets" works well, so the page suggests keeping the name. Keep what already works for users. Keep the current registration flow and the "My Vouchers" actions (pay, download, cancel). Users should also be able to pay for pending vouchers straight from "My Vouchers". Separate the different users. Treat these as distinct journeys: clients who only buy vouchers clients who buy vouchers and also provide services customer admins who customise the system Let users buy several vouchers at once. A cart that covers several border posts and is paid in one go is a key improvement. Make the design modern, reusable and responsive. The page rates an up-to-date UX that works for multiple customers as High priority. Support different languages and currencies. Refunds make cancelling vouchers a problem. Cancelling means refunding the voucher holder, and how that works depends on the payment method.

PERSONAS From my empathy maps, two clear personas began to emerge. Both groups struggle to complete a quick, frictionless checkout but show two different approaches to purchasing. The corporate-focused Maria needs to buy at scale. Her priority is control, visibility and distributing tickets to 75+ drivers without tying up company funds. The independent Thabo needs to buy in the moment. His priority is speed, guest access and instant mobile delivery without creating another account.



EMPATHY MAPS By stepping into our users' shoes and creating Empathy Maps, I was able to dig deeper into what they think, feel, say and do during checkout. This highlighted the core frustrations for each user type from Maria's need for bulk control and consolidated reporting to Thabo's need for speed and guest access — and clarified what the payment gate must solve: a dual-path flow that supports corporate scale without sacrificing mobile simplicity.



AFFINITYMAPS After conducting user interviews, on the Confluence Whiteboard, all participants' responses were synthesised to discover keywords and identify the main pain points and features that ICE Paygate should focus on, such as voucher visibility, account type clarity, and a manageable allocation process.



IDEATION

Reflecting on the research, I was able to identify the most consistent pain points around the payment gate and determine which problems were of priority in order to come up with solutions that alleviate their struggles. The problem statements are as followed. How might we... Enable fleet managers to purchase in bulk without tying up company funds in wallet pre-funding? Provide spending controls and corporate dashboards without adding friction to guest checkout? Help independent drivers get instant, mobile-first ticket access without forcing account creation? Support flexible payment methods and multi-currency options while keeping pricing clear and compliant? Make ticket distribution, reporting and receipts effortless for both bulk buyers and one-off users?

BRAINSTORMING Focusing on the “How Might We” problem statements, I started sketching screens and flows to brainstorm ideas around the payment gateway. Using the ICE Paygate 10 Ideas Per Feature, I explored potential solutions across dual-path checkout, flexible payments, bulk buying and mobile delivery that could effectively solve both Maria's corporate needs and Thabo's need for speed.



USER STORIES Building user stories allowed me to solidify the users' desired functionalities and articulate the value each feature brings. The process of categorising by priority, using the MoSCoW (Must-have, Should-have, Could-have and Wont-have) method gave me a clear direction on the key features that must be incorporated for both Maria's corporate flow and Thabo's quick guest flow.  I constructed the user stories in standard Agile user story format. As a... I want to... So that... As a Fleet Manager (Maria), I want to... Buy 75+ vouchers in bulk at once so that I can supply my whole team without repeating checkout Set spending limits and assign vouchers to drivers so that I can control company costs Pay by company wallet, card or invoice without pre-funding excess amounts so that I don't tie up working capital View consolidated reporting and receipts so that I can reconcile expenses easily  As an Independent Driver (Thabo), I want to... Purchase a single ticket as a guest without creating an account so that I can get instant access on the go Complete checkout in 2-3 fields on my phone so that I don't get delayed between jobs Pay with my preferred local method and receive a digital ticket immediately so that I can use it same-day Access my ticket without downloading another app so that my phone stays light and fast

INFORMATION ARCHITECTURE To support the key features identified from user stories, I focused on structuring information in a way that avoids overwhelming complexity. Creating a sitemap allowed me to visualise the overall architecture, from Onboarding through Home, My Profile, My Wallet, Shopping Cart and My Vouchers and to map how users flow from product discovery to payment and voucher delivery.



USER FLOWS Based on the organisation of information created on the site map, the three main routes were generated focusing on the main pains and gains. Visualising how users would navigate the app ensured that the pathways are designed to include different kinds of people, from Maria managing 75+ fleet vouchers to Thabo needing a quick guest checkout and are easily accessible to enable users to achieve their goals without friction.







WIREFRAMES The design stage began by transforming the sketches into mid-fidelity wireframes using Figma. This step opened my eyes to the layout of the interface and gave me a better understanding of UI elements such as visual hierarchy and the placement of various functions on screen. My main focus on the wireframes was to keep UI elements such as icons and buttons simple but detailed and consistent across both Company and Personal journeys.





DESIGN
MOOD BOARD The mood board consists of a collage of imagery and a collection of colours that represent the product's personality, which is relaxed and revitalised. The UI references inspired me with round, soft features that keep the space welcoming and safe and essential for a service handling tolls and border crossings. The mood board helped me solidify the nature of the brand and the direction of my product.

STYLEGUIDE The style guide prioritised a calm and trustworthy user experience, featuring a balanced use of neutral colours like off-white and light grey, for a clean and serene atmosphere, with deep navy and ICE blue for trust. Combined with rounded pill buttons and friendly travel illustrations, the system keeps the interface welcoming, safe and easy to scan when purchasing and managing vouchers.





HI-FIDILITY SCREEN The hi-fidelity screens brought the concepts into production-ready interfaces, balancing high-density operational data on desktop with streamlined ergonomics on mobile. For field agents, the screens feature high-contrast palettes, thumb-zone navigation, and unambiguous ambient sync indicators designed for outdoor readability. For dispatchers, responsive web views offer live operational dashboards, drag-and-drop scheduling, and comprehensive audit logs, delivering a unified visual and functional experience across the entire platform.





PROTOTYPE Using high-fidelity screens, the prototype was created in Figma to simulate the functionality of ICE Paygate and test the user flows and intuitive navigation on the web platform. The interactive prototype connects Company and Personal journeys from sign-up and login to browsing vouchers, adding to cart, and completing allocation, ensuring the users journey are seamless, accessible, and truly hassle-free.



USABILITY TESTING The prototype was virtually tested through moderated usability testing with five participants to reveal any usability issues or mismatches of expectations of the functionality of the web platform using Figma.  Test Objectives To identify first impressions on all current screens. To reveal any difficulties or roadblocks during navigation. To explore any potential usability issues with voucher purchase and management.  Test Questions Can users successfully sign up and differentiate between a Personal vs Company account? Can users browse, select and add vouchers to their cart without friction? Can users access and customise their allocated voucher list? Can users successfully complete the checkout and download workflow?

MAIN IDENTIFIED ISSUES Issue One: Unclear Service Provider Info Two participants thought all vouchers were the same and didn't realise different Service Providers offered different vehicle categories. In the old design, the eight vouchers were presented as a single uniform grid in the same navy colour, so users couldn't distinguish which provider they were buying from.		Solution: Colour coded Service Provider Vouchers have been grouped by Service Provider and colour-coded to alleviate confusion. Service Provider 1 in red and Service Provider 2 in green with clear section headers and labels under each vehicle type, making it immediately obvious which provider and vehicle category the user is selecting. The colours of the voucher buttons was used as an example and still had to be customised to the Service Provider corporate Identity.


Issue two: Complicated List View Three participants found the table list view overwhelming and difficult to scan. With all the voucher details the voucher name, status, toll fee, vehicle class, direction and registration squeezed into one dense row, they struggled to quickly identify their vouchers and wallet usage at a glance.		Solution: Adding of a Card View An alternative card view was introduced alongside the table view. Each voucher is now presented as an individual card with grouped information, clear hierarchy, and ample white space, with a toggle to switch between list and card layout making scanning, comparing, and managing vouchers much more intuitive



REFLECTION

Through this project, I applied the fundamental principles and practices of good design. I particularly enjoyed the user experience part where I heard users' thoughts and motives for their actions around toll payments and voucher management. One of the key takeaways from this project is that design is a way of communicating with and understanding users. Design is meaningful when it serves users’ wants and needs and it can be facilitated by listening to users. In this sense, this project particularly taught me the power of Jacob's Law and the importance of considering what users are familiar with and how to utilise it when creating a digital product making ICE Paygate feel as simple as any e-commerce checkout they already know. Most importantly, I thoroughly enjoyed every step of the project and I am delighted with the final outcome of my product, ICE Paygate.

ICE Paygate Project

DISCOVERY

IDEATION

DESIGN

REFLECTION