Paul Venter - Portfolio

ICE Force Project

Administrator Portfolio 15 October 2026

		ICE Force is a workforce and field operations management platform that streamlines how teams plan, execute, and monitor work in the field. It unifies scheduling, inspections, data capture, and reporting into one integrated system that works seamlessly on web and mobile. This portfolio focus on the Mobile development.

BACKGROUND Field operations and workforce management often rely on fragmented communication channels, manual paper-based logs, and disconnected legacy tools. In fast-paced, high-stakes operational environments, field workers struggle with cumbersome data entry and limited offline reliability, while central coordinators lack real-time visibility into task execution and inspection progress. ICE Force was conceived to bridge this divide, transforming disjointed field routines into a modern, unified web and mobile platform engineered for seamless scheduling, rugged on-site data capture, and instant operational reporting.

PROBLEM The legacy applications caused field teams to struggle with the out of date digital tools and unreliable offline syncing leading to frequent data-entry errors, delayed task turnaround, and low adoption in the field.		SOLUTION Updating the current system, we designed an offline-ready, dual-platform solution consisting of a high-contrast mobile app streamlined for one-handed field inspections and instant evidence capture, paired with an intuitive web command centre featuring live tracking and drag-and-drop scheduling for dispatchers.
PROJECT OVERVIEW MY ROLE: UX Research, UX Design, UI Design  TIMELINE: 16 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 strong UX focus to uncover the core needs, friction points, and real-world journeys of field workers and back-office dispatchers conducting on-site inspections and operational task management. Through contextual inquiry and workflow mapping, we examined existing field routines, highlighted operational bottlenecks, and clarified how users interact with scheduling, dynamic checklists, multimedia evidence capture, and offline data synchronisation. The resulting insights established a solid foundation for designing an ergonomic, resilient, and unified platform experience tailored for both mobile field personnel and desktop administrators.

DESK RESEARCH The UX research focused on understanding how field agents, supervisors, dispatchers, and administrators will interact with ICE Force across mobile and web environments. I reviewed key user needs around task scheduling, executing dynamic checklists, capturing multimedia evidence, managing offline reliability, tracking status in real time, and configuring operational workflows. These insights helped shape user journeys, reduce on-site friction, and guide the design of an intuitive, resilient field management experience.

HEURISTIC EVALUATION We conducted a heuristic evaluation of the legacy interface against established usability principles to identify core friction points. The audit revealed major issues with system feedback during offline modes, crowded touch targets, and complex form validation. These findings established clear design benchmarks, ensuring the redesign prioritised visibility of system status, error prevention, and streamlined ergonomics tailored for challenging field conditions.


INTERVIEWS We conducted on-site interviews and contextual shadowing with field teams in their actual operating environments. Observing agents firsthand revealed critical real-world constraints, such as harsh sunlight, noisy settings, and erratic connectivity, alongside informal workarounds developed to bypass rigid workflows. These direct observations highlighted the vital ergonomics needed for quick, one-handed data entry, ensuring our design choices were grounded in the physical realities of everyday field operations.

INTERVIEWEE QUOTES “The new design will help me work faster, with fewer steps and distractions, so I can get more done each day.” Jane (Technical Supervisor)
“Dark mode would make late-night fleet checks easier on my eyes and help me stay focused.” Tato (Technical Manager)
“I need Offline Mode so I can keep working when the signal drops — no connection shouldn’t mean no income.” James (Technitian)

KEY TAKEAWAYS Design for offline first, not as an edge case. Field agents frequently work in dead zones. The app must save progress locally by default, show clear ambient sync status, and resolve conflicts automatically so users never wonder if their inspection data is safe. Optimize ergonomics for one-handed field use. Technicians operate on the move, often under direct glare or while holding equipment. Interfaces need generous tap targets, high contrast, and single-tap inputs (toggles, barcode scanning, quick photo capture) over tedious typing. Break monolithic checklists into guided milestones. Long, complex inspection forms cause cognitive fatigue and missed steps. Chunking questionnaires into logical, bite-sized sections with visible progress indicators keeps agents focused and reduces completion time. Separate field execution from dispatch management. Treat mobile agents and back-office supervisors as distinct journeys: Field agents: Need a distraction-free mobile flow focused strictly on today’s tasks, quick evidence capture, and rapid sign-offs. Dispatchers & Admins: Need a dense web dashboard with live map tracking, drag-and-drop scheduling, and self-service form builders.

PERSONAS Synthesized directly from on-site user interviews and field observations, I developed archetypal personas representing our primary user segments: frontline field agents, dispatch coordinators, and operations administrators. Mapping their distinct motivations, working environments, and technical comfort levels ensured design decisions remained anchored in real behavioural patterns. These personas served as a shared empathetic baseline across design and engineering, clarifying trade-offs between rapid mobile execution and comprehensive desktop management.



EMPATHY MAPS To move beyond functional requirements and unpack the emotional realities of our users, I created empathy maps for key roles based on our interview and observational data. By systematically mapping what field agents and dispatchers say, think, do, and feel, I uncovered underlying anxieties around data loss during connectivity drops and the cognitive fatigue caused by complex forms.



AFFINITYMAPS After conducting user interviews and on-site observations, all participants' responses were synthesised on a Confluence Whiteboard to discover common patterns and identify the core pain points and features that ICE Force should focus on, such as offline sync reliability, one-handed field ergonomics, dynamic form flexibility, and real-time dispatch visibility.



IDEATION

During the ideation phase on the Confluence Whiteboard, concepts and rapid sketches were developed to address our priority problem statements, focusing on core improvements like offline reliability, simplified form progression, and seamless field-to-office coordination.

BRAINSTORMING I created low-fidelity wireframes and interactive prototypes to establish layout hierarchy and map end-to-end user journeys for both mobile and web. I focused on simplifying complex checklist forms, placing key actions within easy reach for field agents, and testing navigation flows early to validate structural decisions before moving into visual design.



USER STORIES I Build user stories which 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 Won't-have) method gave me a clear direction on the key features that must be incorporated for both Sipho's rugged mobile inspection flow and Karen's high-efficiency dispatch flow. I constructed the user stories in standard Agile user story format: As a... I want to... So that... As a Field Inspector (Sipho), I want to... Execute inspection checklists offline without interruption so that I can complete audits in remote areas with zero network connectivity. Capture and annotate photos, signatures, and barcode scans directly within the form so that I don't have to switch between multiple apps or loose paper notes. See clear, ambient sync indicators on my home screen and task list so that I have complete confidence my submitted inspections are safely uploaded. Navigate forms using large, high-contrast tap targets so that I can easily enter data with one hand while moving outdoors under direct sunlight.  As a Dispatch Coordinator (Karen), I want to... View a live, visual schedule and map of all active field technicians so that I can assign urgent service requests based on proximity and real-time availability. Reassign, reschedule, or adjust jobs via simple drag-and-drop so that I can adapt instantly when technicians face delays or emergencies. Build and update custom inspection forms without engineering support so that our team can roll out new compliance checklists immediately. Track real-time inspection completion and sync statuses from a centralized dashboard so that I can quickly review submitted reports and resolve bottlenecks.

INFORMATION ARCHITECTURE To support the prioritised features identified in the user stories, I structured the information architecture to minimise cognitive load in fast-paced field environments. Developing a clear hierarchy and sitemap allowed me to map the journey from authentication and daily task queues to active inspection workflows, multimedia capture, and sync management, ensuring both field agents and dispatchers can navigate complex operational data with minimal friction and fewer taps.



USER FLOWS With the information architecture established, I mapped out end-to-end user flows to define the critical decision paths, interaction loops, and system responses across both platforms. These diagrams detailed happy paths, validation gates, and contingency states, such as intermittent offline sync, partial form completion, and instant photo capture, ensuring seamless handoffs between field data collection on mobile and back-office review on the web.



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 I created a mood board which consists of a curated collage of imagery, textures, and colour palettes that capture the product's personality. The visual references drew inspiration from high-contrast industrial instruments and tactical interfaces, emphasizing bold typography, durable surfaces, and tactile elements essential for field inspections in harsh outdoor conditions. This board helped solidify the brand identity and set a confident visual direction for the design system.

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 An interactive, clickable prototype was built to simulate end-to-end operational workflows across both mobile and desktop. It allowed us to validate key interaction details, including offline sync feedback and rapid evidence capture, ensuring smooth task transitions and providing a clear, interactive reference for engineering implementation.



USABILITY TESTING The Figma prototype were tested on site through moderated usability sessions with two participants to identify usability issues and differences between users’ expectations and the proposed functionality of the ICE Force mobile app. Test Objectives To understand users’ first impressions of the screens, layout and visual clarity. To identify difficulties or roadblocks when navigating and completing inspection tasks. To assess the ease of photo capture and users’ understanding of offline saving and sync feedback. Test Questions Can users find their assigned tasks and start the correct inspection? Can users navigate the checklist, understand required fields and resolve validation errors? Can users capture, review and attach photos to the relevant checklist item without confusion? Can users distinguish between locally saved, pending and synced inspections in simulated offline scenarios?

MAIN IDENTIFIED ISSUES Issue One: Screen Visibility at Night Following usability testing, I found that users considered the screen too bright for prolonged use at night, causing discomfort and making it harder to work comfortably in low-light conditions.		Solution: Dark Mode To address the screen brightness identified during usability testing, I designed a dark mode using darker backgrounds and balanced contrast between text, icons and key actions. The aim was to reduce glare during prolonged use at night while keeping job details and navigation clear and readable in low-light conditions.



Issue two: Similar looking Job view Questions The current Job view questions was difficult to scan because individual jobs looked too similar and lacked clear visual separation. Job details competed for attention, making it harder to distinguish one entry from another and quickly identify relevant information.		Solution: Clear Distinguishable Job question design A stronger visual hierarchy, clearer status indicators and more spacing between entries were needed with more compact layout to help users recognise each job and understand its progress at a glance.



REFLECTION

Through this project, I applied the fundamental principles and practices of good design to the ICE Force mobile app. I particularly enjoyed the user experience phase, where listening to users helped me understand how they navigate jobs, complete inspections and capture information in the field, including the challenges they face when working at night. One of my key takeaways is that meaningful design begins with understanding users’ needs and the environments in which they work. Their feedback guided improvements such as clearer job views and a dark mode for more comfortable use in low-light conditions. The project also reinforced the value of Jakob’s Law: building on familiar navigation patterns and interactions to make everyday tasks feel intuitive rather than requiring users to learn a completely new way of working. Most importantly, I thoroughly enjoyed each stage of the project, from exploring users’ challenges to refining the final designs. I am proud of the outcome for ICE Force with a clearer, more consistent mobile experience designed to support users throughout their working day and night.

ICE Paygate Project

Administrator Portfolio 15 October 2026

		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 Design

Administrator Portfolio 06 October 2026

		ICE Design is an enterprise web-based Integrated Configuration Environment (IDE) built to streamline how cross-functional teams configure, model, and deploy complex business workflows on the ICE Engine platform. Designed for business analysts, system configurators, and engineers, the tool unifies fragmented processes, such as BPMN orchestration, data entity mapping, and specification authoring into a cohesive, user-friendly workspace. By replacing disparate legacy tools with an intuitive drag-and-drop interface, real-time feedback, and standardized UI patterns, ICE Design significantly accelerates configuration turnaround and reduces operational friction.


BACKGROUND As the ICE platform scaled, the complexity of configuring workflows, transactions, and business logic began outpacing existing internal tooling. Teams were caught between technical friction and inconsistent interfaces, slowing down project delivery. ICE Design was conceived as a centralized, extensible web IDE to bridge the gap between requirement gathering and system configuration. The goal was to replace disparate legacy touchpoints with an intuitive, drag-and-drop environment featuring real-time validation, standardized design architecture, and integrated documentation.

PROBLEM System configuration was bogged down by fragmented legacy interfaces, steep technical barriers, and a lack of visual feedback. Teams spent excessive time translating business specifications into code-heavy configurations across siloed tools, leading to high cognitive overhead, delayed implementations, and frequent production errors.		SOLUTION ICE Design modernises enterprise configuration by replacing siloed, text-heavy utilities with an intuitive, visual web IDE. Through standardized design patterns, visual workflow builders, and real-time validation, the platform dramatically reduces cognitive load, accelerates delivery timelines, and empowers cross-functional teams to configure complex services without technical friction.

PROJECT OVERVIEW MY ROLE: UX Research, UX Design, UI Design  TIMELINE: 18 months Plus (At point of this portfolio the project was in final development and testing)  PROCESS: Discovery → Ideation → Design → Usability Testing  TOOLS: Google Forms, Various LLM’s, Confluence, Teams, Confluence Whiteboard, Figma, Photoshop OTHER TEAM MEMBERS: UX Designer, Business Analysts, Configurators, Developers, Testers

DISCOVERY
In the Discovery phase I conducted qualitative interviews, quantitative surveys, and workflow mapping, the discovery phase engaged Business Analysts, Configurators, and System Analysts to uncover systemic friction across legacy tools. By synthesizing user research into detailed personas, empathy maps, and journey storyboards, we aligned cross-functional teams around a shared product vision and defined clear success metrics to guide the visual and architectural redesign.

DESK RESEARCH To establish a project baseline, we conducted an in-depth desk review analysing legacy tool architectures (BOMUI, MLCS), technical documentation, and historical defect logs. Benchmarking modern enterprise IDEs and visual BPMN workflow builders enabled us to identify standard mental models, reusable UI patterns, and validation frameworks.
PRIMARY RESEARCH To complement individual interviews and uncover shared organizational needs, we facilitated interactive discovery and co-creation workshops bringing together Business Analysts, System Configurators, Product Owners, and Engineering leads. Using collaborative digital whiteboards, we guided participants through interactive exercises, including "How Might We" framing, empathy mapping, and priority matrix sorting to unpack operational pain points and map ideal future-state workflows. These collaborative sessions broke down long-standing knowledge silos between business and technical teams, transforming individual frustrations into a consensus-driven baseline of core functional and UX requirements.

INTERVIEWS Through in-depth, semi-structured interviews with internal and client Business Analysts and Configurators, we investigated how users actually navigated configuration tasks versus how legacy systems assumed they did. The sessions highlighted widespread frustration with disconnected utilities, steep learning curves for non-developers, and an urgent need for visual process modeling with built-in guardrails. These first-hand testimonies provided the empathetic core that guided our interaction design and product architecture.
INTERVIEWEE QUOTES ICE-Engine Configurator: "Using multiple clunky tools slows down my configuration workflow. I need a single, intuitive environment that lets me write and debug without constant interruptions."
Client / End User: "I just want software that is straightforward to navigate, so I can complete my daily tasks quickly without steep learning curves or unexpected downtime."		Business Analyst: "Translating complex requirements into clear specifications shouldn't feel unpredictable; unified tools and standardized processes are vital for our team's pace."

KEY TAKEAWAYS Bring all configuration tools into one place. Merge BOMUI, MLCS, and BPMN into a single web-based IDE with Single Sign-On so users stop bouncing across disconnected utilities. Make process modelling visual and drag-and-drop. Replace text- and code-heavy configuration with an intuitive graphical BPMN canvas that gives real-time layout feedback. Build a ready-made activity library. Stop teams from reinventing standard logic by offering a searchable catalog of pre-built components that configurators can drag straight into workflows. Give users safe sandboxes to test and train. Provide isolated environments so teams can experiment without the fear of breaking live data: Standardise BA specification templates. Treat requirements as structured, enforced inputs: Enable early look-and-feel previews. Let Business Analysts generate early visual mock-ups and flow previews for client sign-off, catching misalignments before engineering begins. Put help right where the work happens. Replace static external manuals with in-app contextual tooltips, direct links to relevant guides, and an integrated, searchable help panel. Tailor onboarding to specific roles. Offer guided learning paths and interactive training modules directly from the dashboard to get new analysts and configurators up to speed faster. Show live system health and connectivity. Add persistent server status indicators, automated downtime alerts, and one-click OPS issue logging so users always know their connection state.

PERSONAS Personas played a pivotal role in grounding our design process in real user needs and behavioural context throughout the project. By developing detailed personas based on initial user research and interview data representing core roles such as ICE Tech Configurators, Business Analysts, and End Users, we established clear reference points for daily user workflows, frustration points, and technical environments. These personas served as shared mental models across cross-functional teams, ensuring that feature prioritisation, user story drafting, and interface decisions were consistently evaluated through the lens of user impact rather than subjective assumptions.



EMPATHY MAPS In the ICE IDE project, empathy maps were used to translate qualitative user research into actionable behavioural insights across four target roles: ICE Tech Configurators, Business Analysts, Client System Analysts, and End Users. By categorizing direct quotes, behaviours, thoughts, and emotional responses such as Riley Finn's frustration with changing project scopes or Adio Sántos's struggles with unreliable tools and connectivity. The team mapped out specific pain points and underlying motivations. This structured visualization bridged the gap between raw interview feedback and design requirements, ensuring that the resulting IDE directly addresses user anxieties around workflow interruptions, complex tooling's, and unpredictable development environments.



SYNHESISED RESPONSES To capture user needs and translate them into actionable development tasks, I utilized Confluence Whiteboards as an interactive workspace to brainstorm, map out, and synthesize initial research and user requirements. Once the core themes were established, we collated and structured these findings directly onto a dedicated Confluence page using standard acceptance criteria and user story templates. From this centralized documentation, we seamlessly generated and linked corresponding Jira user stories ensuring complete traceability between early UX discovery, requirement definition, and backlog management.



IDEATION

Reflecting on the research, we synthesized user pain points across empathy maps and brainstorming workshops to identify key operational bottlenecks, allowing us to prioritize features that directly streamline development workflows. The resulting "How Might We" statements include: How might we... Enable ICE-Engine System Analysts and configurators to build, test, and debug code in a unified, intuitive environment without relying on multiple disjointed tools? Provide Business Analysts with standardized documentation templates and seamless requirement integrations without adding unnecessary complexity or time delay? Streamline the onboarding and training process for new configurators to reduce learning curves and eliminate workflow disruptions? Minimize environmental downtime and lack of version control so developers can maintain steady productivity and release timelines? Establish clear, transparent lines of communication between Business Analysts and technical configurators to prevent scope creep and eliminate requirement ambiguity?

BRAINSTORMING Focusing on the “How Might We” problem statements, I explored potential solutions across unified configuration environments, standardized requirement templates, and streamlined onboarding processes using the 10 Ideas Per Feature approach. This exercise allowed me to brainstorm and map out core ideation directions that could effectively resolve both the operational bottlenecks faced by configurators and the documentation challenges encountered by business analysts.





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 Won't-have) method gave me a clear direction on the key features that must be incorporated for both Riley's technical configuration needs and Lorette's business analysis workflow. I constructed the user stories in standard Agile user story format: As a... I want to... So that... As an ICE-Engine System Analyst (Riley Finn), I want to... Build, test, and debug configuration code within a single, unified environment so that I don't lose time switching between multiple disjointed tools. Access built-in version control and deployment management tools so that I can prevent broken builds and maintain steady project productivity. Utilize standardized code examples and interactive tooltips within the IDE so that I can complete complex setups without needing frequent assistance from co-workers. Maintain workspace settings during environmental interruptions so that I can resume work instantly without losing active configuration progress. As an ICE Tech Business Analyst (Lorette Mulligan), I want to... Export requirements directly into standardized documentation templates so that I can maintain consistent corporate branding without manual reformatting. Link requirements across different project modules within a centralized view so that I can eliminate requirement gaps and prevent scope creep. Integrate business rules directly with technical specifications so that system analysts have complete clarity without requiring unscheduled clarification meetings. Generate and view real-time process flows from updated requirements so that stakeholders can review and approve functional scope faster.

STORYBOARDS Storyboards were used as a visual storytelling tool to map out real-world scenarios and context for how different personas interact with the ICE IDE platform. By illustrating step-by-step user journeys such as Riley Finn encountering incomplete specifications during project setup or Lorette Mulligan navigating requirement handoffs—we visualized the emotional triggers, operational hurdles, and environmental contexts surrounding each task. This narrative framework helped humanize technical bottlenecks, providing cross-functional teams with a shared understanding of how design improvements directly alleviate daily user frustrations across different roles.



INFORMATION ARCHITECTURE To support the key features identified from the user stories and research findings, I focused on structuring the information architecture to eliminate fragmentation and minimize cognitive load. Creating a clear sitemap allowed me to visualize the core navigation and layout of the ICE IDE platform spanning Environment Setup, Configuration Modules, Requirement Mapping, and Workspace Settings while mapping how both system analysts and business analysts move seamlessly from requirement definition to code deployment without tool switching.



USER FLOWS Based on the structure established in the site map, we mapped out core user flows tailored to address key pain points and maximize operational efficiency. Visualizing how different roles navigate the ICE IDE ensured that pathways were designed to accommodate distinct workflows, from Lorette Mulligan mapping and exporting business requirements to Riley Finn building, testing, and debugging configuration scripts in a unified environment. These optimized routes eliminate unnecessary steps and reduce cognitive friction, allowing users across all technical levels to achieve their goals smoothly.





WIREFRAMES The design stage began by transforming initial sketches into mid-fidelity wireframes in Figma. This step helped refine the interface layout and provided a clearer understanding of essential UI elements, including visual hierarchy, component spacing, and the logical placement of key functions across the workspace. My primary focus during wireframing was to keep core UI elements such as navigation panels, action buttons, and configuration fields which is clean, intuitive, and consistent across both the System Analyst and Business Analyst user 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 structured and highly efficient. The UI references inspired me with clean lines, minimalist layouts, and clear typographic hierarchy that keep the workspace organized and focused and essential for a complex technical development and configuration environment. The mood board helped me solidify the nature of the brand and the visual direction of the ICE IDE platform.

STYLEGUIDE Following the visual direction established in the mood board, I developed a comprehensive UI Style Guide to ensure visual and functional consistency across the entire ICE IDE platform. This living document standardized our core design system which includes typographic hierarchies, primary and secondary colour palettes, interaction states, and reusable UI components like data tables, input fields, and action buttons. By establishing these clear design parameters, I ensured that the complex interfaces used for both technical configurations and business requirement mapping remained clean, scalable, and cohesive, ultimately streamlining the handoff to developers and ensuring a unified experience for all users.





PROTOTYPE Using the high-fidelity screens, an interactive prototype was created in Figma to simulate the core functionality of the ICE IDE and test the user flows and intuitive navigation within the new unified workspace. The interactive prototype connects both the Business Analyst and System Analyst journeys, from defining standardised requirements and mapping business rules to building, debugging, and deploying configuration code to ensure that the complex development process is seamless, accessible, and truly frictionless.

		Note: This prototype is a Figma file and will open in a Web browser.

USABILITY TESTING The prototype was virtually tested through moderated usability testing with five participants, representing both Business Analysts and System Analysts to reveal any usability issues or mismatches of expectations regarding the functionality of the unified workspace using Figma.  Test Objectives To identify first impressions of the new unified interface and workspace layout. To reveal any difficulties or roadblocks during navigation between requirement mapping and configuration modules. To explore any potential usability issues with the code debugging and documentation export processes.  Test Questions Can users successfully set up their workspace and locate the specific tools required for their role? Can Business Analysts seamlessly link business rules to technical specifications without friction? Can System Analysts easily access standardised templates and test their configuration code within the same environment? Can users successfully complete the version control and deployment workflow without tool-switching?

MAIN IDENTIFIED ISSUES

Issue One: Who is the users? During requirement gathering and system configuration, Business Analysts often struggled to maintain a clear understanding of the specific end-users they were designing for. Without a dedicated reference point within the workspace, requirements were frequently drafted generically, leading to a disconnect between the technical specifications being handed off and the actual needs, workflows, or pain points of the target audience.		Solution: Including Persona capturing A new "Personas" feature was integrated directly into the system to give Business Analysts a tangible, structured perspective of their users. By embedding detailed persona profiles, including user goals, frustrations, and daily workflows right alongside the requirement mapping tools, BAs can now continuously reference exactly who they are building for without leaving the platform. This contextual feature ensures that business rules and system configurations remain consistently aligned with authentic user needs, bridging the gap between abstract technical requirements and real-world human application.



Issue Two: Limited document formatting During the documentation phase, Business Analysts and stakeholders struggled with rigid, hard-coded system exports. In the previous process, generating printable business requirements, project scopes, or system specifications required users to manually extract data and reformat it in external tools like Word to meet specific corporate branding and layout standards. This manual compilation was incredibly time-consuming and frequently led to version control errors.		Solution: Document Customisation A highly customizable report and document formatting system was integrated directly into the workspace. This feature allows users to dynamically compile printable documents in a custom manner using flexible, drag-and-drop templates. By enabling Business Analysts to apply specific corporate identities, adjust layout structures, and bind live system data directly to the document fields, the platform now automatically generates polished, stakeholder-ready PDFs and reports without ever requiring the user to leave the environment or duplicate their work.



REFLECTION

Through this project, I applied the fundamental principles of user-centered design to a highly complex, technical domain. I found immense value in the discovery and research phases and specifically building empathy maps and conducting user interviews which allowed me to truly understand the daily frustrations, cognitive load, and underlying motivations of both Business Analysts and System Analysts as they navigated fragmented workflows. A major takeaway from this journey is that effective design acts as a vital bridge between complex system architecture and human usability. Design is truly meaningful when it serves the users’ actual workflow needs, which can only be achieved by actively listening to them. In this sense, this project reinforced the power of Tesler's Law (the law of conservation of complexity). I learned the importance of making the system absorb the technical heavy lifting such as automated document formatting and integrated persona references, rather than offloading that burden onto the user. By utilising familiar, structured layout patterns, we were able to make the ICE IDE feel as intuitive and streamlined as the modern e-commerce or development tools they already know. Ultimately, designing the ICE IDE was a deeply rewarding challenge. It reinforced my belief that enterprise software can be both highly functional and genuinely user-friendly. I thoroughly enjoyed every step of the process and am incredibly proud of the final outcome and the unified, frictionless experience it now provides.

ICE Force Project

DISCOVERY

IDEATION

DESIGN

REFLECTION

ICE Paygate Project

DISCOVERY

IDEATION

DESIGN

REFLECTION

ICE Design

BACKGROUND

DISCOVERY

DESIGN

REFLECTION