ICE Force Project

Portfolio Hits: 32
  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
  1. 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.
  2. 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.
  3. 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.
  4. 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
  1. To understand users’ first impressions of the screens, layout and visual clarity.
  2. To identify difficulties or roadblocks when navigating and completing inspection tasks.
  3. To assess the ease of photo capture and users’ understanding of offline saving and sync feedback.

Test Questions
  1. Can users find their assigned tasks and start the correct inspection?
  2. Can users navigate the checklist, understand required fields and resolve validation errors?
  3. Can users capture, review and attach photos to the relevant checklist item without confusion?
  4. 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.  
     
     
     
Print   Email