UI/UX Improvements

Map interface refinements, responsive layout, service colour coding, and interaction design across the Ordering Portal

Overview

The Ordering Portal's user interface has been iteratively refined throughout the development process, with each improvement driven by stakeholder feedback and usability testing. The result is a clean, intuitive interface that guides customers through complex ordering workflows while providing administrators with efficient tools for order processing.

Order Interface Design

The order display has been designed with a responsive grid system for clarity and efficiency:

Responsive grid layout - Order headers and cells use a responsive grid system that adapts to different screen sizes
Visual hierarchy - Custom styles establish clear visual hierarchy between order information, status indicators, and action buttons
Action buttons - Prominent, clearly labelled action buttons guide users through order workflows
Status indicators - Colour-coded status indicators provide at-a-glance order state visibility
Service colour coding - Services and their statuses are colour-coded for visual distinction across order types

The map display has undergone several iterations for optimal usability:

Size reduction - Map display reduced by 15-20% to provide better balance between spatial context and order content
Static view - Maps display in a static, non-scrolling view optimised for project context rather than interactive exploration
Zoom feature removal - The interactive zoom feature was removed in favour of a cleaner, static presentation
Error handling - Graceful handling of scenarios where map data is unavailable, with appropriate user feedback
Order note section expansion - The space saved from map reduction was allocated to expand the order notes section

Navigation has been refined for intuitive wayfinding:

"Back to Project" navigation - Clear navigation buttons allow users to return to the project view from order detail pages
Route improvements - Current orders group links route directly to the project view for streamlined navigation
Page static view - Key pages render without unnecessary scrolling for a focused, clean presentation
Pagination text wrapping - Pagination controls handle text wrapping correctly across different content lengths

Service Display

Services are presented with rich contextual information:

Service description tooltips - Hover tooltips display detailed service descriptions without cluttering the main interface
Service ordering - Services can be reordered using a sortable interface to match customer priority
Service name display - Service names are displayed clearly with refinements for specific order types (e.g., energy order service name clarity)
Available services search - Search and display improvements help customers find and select appropriate services
Top services tailoring - The most relevant services are prioritised based on the customer's company and division configuration

Document Interface

The document management interface provides a streamlined upload and review experience:

Drag-and-drop upload - Intuitive drag-and-drop file upload across all order types
Designated document type sizing - Document type selection fields are sized for clear visibility
Document section spacing - Optimised spacing between document sections for improved readability
Two-method upload interface - FTS users have access to flexible upload methods depending on workflow context

RFI Interface

The Request for Information interface balances detail with usability:

Modal layout - RFI items are presented in a modal interface that reduces visual clutter on the main page
Row click selection - RFI items can be toggled via row click for intuitive interaction
Multiple RFI display - When multiple RFIs are ready for review, they are presented together for efficient batch processing
Generated checklist headings - RFI headings use the generated checklist name for clear, contextual identification

Dashboard Improvements

The customer and admin dashboards provide clear, actionable overviews:

In-progress orders badge - A badge displays the count of Pending and On-Hold orders for immediate awareness
Key milestone visibility - Dashboard surfaces key project milestones (FTS Assessment Completed, Sale Accept Complete, Permit Issued) in real-time
Pending order clarity - Pending orders are clearly identified as draft-state orders separate from submitted orders
Forecast date display - Order forecast dates and delay calculations are displayed for timeline visibility
KPI metrics - Dynamically retrieved KPI metrics from DashboardTarget entities provide performance monitoring

Admin Interface

The administrative interface includes specialised improvements:

Order override layout - A responsive grid system for order headers and cells with custom styles for improved visual hierarchy
Bulk management page - The company service sync page provides a comprehensive overview with toggle controls
Import preview enhancements - Service import preview and export controls provide clear visibility into bulk operations
Select2 refinements - Dropdown selection components are refined for accurate display in admin import workflows

Communication Interface

The in-platform communication tools support clear stakeholder interaction:

Project notes section - A dedicated general communication section at the project level
Order notes chat - Chat-style order notes across all order types
Image paste support - Users can paste images directly into the communication interface
Expected date completion display - Clear display of expected completion dates and forecast tracking

Accessibility & Responsiveness

The interface is designed to work across different contexts:

Responsive grid system - Layout adapts to different screen sizes and contexts
Document timestamp localisation - Timestamps are corrected from UTC to local time for accurate display
Consistent interaction patterns - Drag-and-drop, tooltips, modals, and toggles follow consistent patterns across the portal
Visual status indicators - Colour-coded status badges and indicators are used consistently throughout the interface