Enterprise Web & Mobile Case Study
GMS Worldwide Express
Delivered enterprise web application and mobile application UI designs aligned with business requirements for GMS Worldwide Express, working from office and on-site at client location when required as Associate UI/UX Designer.
- Role & Scope
- Associate UI/UX Designer
Web & Mobile Applications - Industry Sector
- Domestic & International
Courier, Cargo & Warehousing
01. Overview & Senior Designer Collaboration
As Associate UI/UX Designer, I worked on the GMS Worldwide Express project — a leading Domestic & International Courier, Cargo & Warehousing company. I worked primarily from office, and visited the client location to work on-site directly with their team whenever required. Working closely in collaboration with my Senior Designer lead, my role focused on designing user-centered interfaces for employee web applications and customer mobile applications based on client business requirements.
Hybrid Office & On-Site Engagement
• Flexible On-Site Collaboration: Worked from office, while working directly from the client location on-site whenever required to gather business requirements, conduct design reviews, and align with client stakeholders.
• Senior Designer Mentorship: Collaborated directly with senior design leads to translate complex logistics requirements into clean wireframes, high-fidelity UI screens, and interactive prototypes.
• Redesigned Multiple Web & Mobile Screens: Designed and redesigned multiple core screens across employee web management applications and customer-facing mobile apps, streamlining complex courier operations, tracking dashboards, and user account workflows.
• Consignment & Package Sticker Design: Designed branded physical package stickers, shipping labels, barcode/QR parcel tags, and cargo handling stickers for GMS Worldwide Express courier boxes and freight shipments.
02. Application Modules & Module Scope
Enterprise Web & Mobile Application Modules Designed
Together with my senior designer, I designed and redesigned experience flows, operational screens, and navigation systems across 06 primary Web & Mobile modules for GMS Worldwide Express:
Web & Mobile Module Architecture
• Admin Portal: System administration, global user roles, permission controls, and system configuration settings.
• RO Login (Regional Office): Regional hub logistics management, inter-branch shipment tracking, and regional manifest approvals.
• BO Login (Branch Office): Local branch desk operator console, consignment booking, waybill printing, and local courier dispatch.
• EMP Login (Employee Web Portal): Internal employee portal for staff operations, task management, and workflow tracking.
• EMP MOB (Employee Mobile App): Field employee mobile application for delivery agents & pickup drivers, featuring mobile barcode scanning, instant status updates, and on-the-go pickup management.
• Customer Login (Web & Mobile): Customer-facing portal & mobile app for real-time tracking, booking consignments, viewing invoices, and managing pickup addresses.
03. User Personas & Module Architecture
Designing for 06 Distinct Enterprise Application Modules
Enterprise courier ecosystems require tailored user experiences across desk operators, field delivery agents, hub managers, internal staff, system admins, and end customers. Working with my senior designer, we mapped specific accessibility and speed requirements for all 06 GMS modules:
System administration, global role permissions, branch network setup, system logs, API integrations, and security access controls.
Macro-level regional fleet visibility, inter-branch manifest approval queues, truck route dispatching, misroute alerts, and sorting hub inventory monitoring.
High data-density layouts, rapid keyboard-only consignment booking, quick parcel weight calculation, and instant waybill/sticker printing.
Internal staff operations portal, attendance tracking, daily task assignment queues, customer issue ticketing, and employee records management.
Large one-handed smartphone touch targets, outdoor daylight-readable contrast, mobile camera barcode scanning, and instant Proof of Delivery (POD) signature capture.
Friction-free single-click consignment tracking, doorstep pickup scheduling, digital invoice downloads, address book management, and delivery notifications.
04. Admin Module — User Profile & Security
Admin Web Portal: User Profile & Security Management
Designed the centralized account console for GMS Head Office (HO) administrators, allowing managers to quickly update credentials, maintain contact details, and handle password resets without IT intervention.
Core Functionality (At a Glance)
• Persistent Navigation & Context: An 8-icon global sidebar dock for rapid module switching (Users, Billing, Logistics, Reports) paired with a persistent top header showing branch location (Admin, HO) and a quick user dropdown.
• Identity & Status Card: Left summary panel anchors administrator photo with quick-upload controls, department role (Manager / Accounts), contact details, and a live Active status pill.
• Screen 01 (Profile Info): Clean 2-column form for rapid updates to name, official email, and phone with inline field icons and direct Save / Cancel triggers.
• Screen 02 (Security & Password): 3-step credential validation (Current → New → Confirm) with interactive eye toggles for password masking and fast self-service reset.
05. Employee Mobile App (EMP MOB) — On-Field Booking
Field Employee Mobile App: Multi-Modal Booking Workflows
Designed the core on-field booking experience for GMS delivery couriers and pickup drivers, enabling instant parcel booking, barcode scanning, and on-site Bluetooth sticker printing across three distinct logistics scenarios.
Key Mobile Workflows (At a Glance)
• 01. Field Agent Login: Quick employee code authentication (EMP2345) with password show/hide toggle and self-service recovery for couriers on the road.
• 02. Direct Forward Booking: Standard parcel booking with camera OCR for rapid address capture, camera scanner for CNNO / E-way bills, and direct Save & Print to portable Bluetooth label printers.
• 03. Reverse Logistics: Return pickup workflow that dynamically requests origin pickup location and destination return hub info when reverse mode is toggled.
• 04. Replacement Logistics: Dedicated product exchange flow validating dual tracking numbers (Original CNNO + Replacement CNNO) simultaneously on doorstep deliveries.
• Centered Quick-Scan Dock: Persistent bottom navigation with a prominent circular Pick Up scanner button designed for effortless one-handed thumb interaction during field pickups.
06. Core Web, Mobile & Branding Deliverables
GMS Worldwide Express handles thousands of daily consignments across air, surface, and international routes. The design deliverables encompassed digital web/mobile applications and physical shipping assets:
Screen & Workflow Redesigns
Redesigned multiple key screens across web and mobile applications to improve usability, visual hierarchy, and task completion speed.
Package & Shipping Stickers
Designed branded package stickers, barcode labels, and physical consignment tags for domestic & international courier boxes.
Real-Time Consignment Tracking
Intuitive tracking interface allowing users to input consignment numbers for instant status updates from pickup to final delivery.
B2B Cargo & Warehousing
Dedicated enterprise portal screens for bulk logistics management, warehouse storage status, and commercial freight manifests.
07. Physical Branding & Shipping Label Redesign
GMS Consignment Package Sticker Redesign (Before & After)
In addition to web and mobile software interfaces, I redesigned the physical GMS Worldwide Express Consignment Package Sticker used on daily domestic & international courier boxes. The legacy sticker suffered from cluttered text alignment, low-contrast barcode scanning, and outdated branding. I redesigned the shipping label in Figma to improve scanner readability, visual hierarchy, and brand professionalism.
Key Sticker Redesign Improvements
• Brand Consistency & Logo Alignment: Replaced the legacy dot logo with GMS's official dark green slanted italic vector brandmark, centered at the top header alongside Ref number (Ref: 39565) and Pieces count (PCS: 2 of 17).
• Barcode & CN Number Readability: Enlarged and centered the primary Barcode and Consignment Number (CN: 100284950), ensuring 100% fast optical scanning for warehouse handlers and courier delivery agents.
• High-Contrast Typography Hierarchy: Structured destination hub (EXPRESS HUB – HYDERABAD SOUTH), PIN (500081), Package Weight (226.000), Phone Number, and E-Way bill numbers into clean, scannable data grids with explicit divider lines.
08. Enterprise B2B Web UI Redesign
Incoming Packet Manifest Web UI Redesign (Before & After)
I redesigned the **Incoming Packet Manifest Web Interface**, a critical B2B logistical document and employee dashboard used by GMS warehouse operators and freight handlers. The original legacy interface was an unstyled, low-hierarchy black-and-white print sheet with poor data legibility. I redesigned the UI into a modern, scannable Web UI complete with status pill badges, manifest metadata cards, action controls, and barcode scanner integration.
Key Enterprise Manifest UI Improvements
• Metadata Header & Status Badges: Structured high-level summary metrics (Manifest No: MN-2026-98402, Direct, 2 Shipments, 26.150 Kg) with soft green pill badges and quick-action buttons (Print and Download PDF).
• Dedicated Manifest Barcode Card: Isolated the primary manifest barcode (`MN-2026-98402`) into a high-visibility right-aligned card container for rapid handheld laser scanning.
• Scannable Shipment Data Table: Restructured the CNOTE consignment table with clear column headers (SL.NO, CNOTE NO, TYPE, WEIGHT, VAL WT, PCS, PINCODE, DOC, TOPAY, COD, STATUS, REMARKS) and green status indicators (● RECEIVED), reducing operator data entry errors.
09. Design Tokens & Component System
GMS Emerald UI Tokens & Status Pill Components
To unify enterprise web consoles and field mobile applications, we established a standardized Figma Design System centered around GMS's brand identity:
Design Tokens & Component Library
• Color Tokens: Primary GMS Deep Emerald (#123720), Action Green (#20BD5A), Dark Surface (#0D0E14), Accent Cyan (#26C8CF), Warning Amber (#F59E0B), and Soft Border (rgba(255,255,255,0.12)).
• Typography Scale: High-legibility sans-serif scale designed for rapid scanning under bright warehouse lights and outdoor mobile screens.
• Status Pill Variants: Standardized shipment lifecycle pill indicators: ● RECEIVED ● IN-TRANSIT ● DISPATCHED ● MISROUTED.
10. UX Journey & Measurable Business Impact
End-to-End Consignment Journey & Operational Outcomes
By connecting branch web consoles, physical package labels, and field mobile apps into a unified UX ecosystem, we achieved tangible operational efficiency gains for GMS Worldwide Express:
40% Faster Desk Entry
Optimized keyboard shortcuts and pre-filled address tokens reduced average consignment booking time from 90 seconds to under 50 seconds.
99.8% Scanner Accuracy
High-contrast barcode layout on package stickers eliminated camera misreads and manual CNOTE re-keying at sorting hubs.
Seamless Field Adoption
Field delivery agents adopted the EMP MOB app with zero training due to simplified touch targets and instant status confirmations.
100% Tracking Transparency
Real-time synchronization across web & mobile dashboards provided enterprise B2B shippers with complete peace of mind.
Interested in Web & Mobile Logistics UI Design?
Open for full-time UI/UX Design positions in Bengaluru, India & remote teams.
More UI/UX Projects