OIA Connect – Responsive Logistics Management Platform
Transforming an outdated and fragmented logistics web platform into a structured, responsive, and user-centric experience.OIA Connect – Responsive Logistics Management Platform
Embedded Files
OIA Global Before Designs
OIA Global Before Designs
Project Overview
Client: OIA Global | OIA ConnectProject Overview
Platform: Responsive Web Product
Role: Lead Product Designer
Focus Areas: UX Audit & Heuristic Evaluation • Information Architecture Redesign • Responsive Web Product Design • Data-Heavy Interface Simplification • UI Design & Component System • Cross-Functional CollaborationOIA Global already had a web-based logistics platform in place; however, over time the product became outdated, unorganized, and difficult to scale. As features were added incrementally, the platform lacked clear information hierarchy, consistent interaction patterns, and a responsive experience across devices.The objective of the OIA Connect project was to redesign the existing web product, improve usability, and modernize the interface—while continuing to follow OIA Global’s established design system and brand guidelines.As the Lead Product Designer, I owned both UX and UI design, focusing on restructuring complex workflows, simplifying data-heavy screens, and delivering a cohesive, responsive web experience.
Problem Statement
The legacy OIA Global platform was an outdated, non-responsive system that hindered user efficiency due to poor data hierarchy, inconsistent navigation, and high cognitive load.Problem Statement
Design Goals
Design Goals
- Reorganize the product with a clear and scalable information architecture
- Improve usability for complex supply chain workflows
- Modernize the UI while maintaining brand consistency
- Deliver a fully responsive experience across desktop, tablet, and mobile
- Create reusable components aligned with OIA Global’s design system
The Discovery Phase (UX Audit)
Before moving to the drawing board, I needed to understand why the legacy platform was failing. I conducted a Heuristic Evaluation and a deep-dive audit of the existing user workflows to identify the "Real" problems that data tables and dashboards were hiding.The Discovery Phase (UX Audit)
Heuristic Evaluation Findings
Heuristic Evaluation Findings
- Visibility of System Status: The legacy UI was "silent." Users couldn't distinguish between a shipment that was "On-Track" and one that was "Delayed" without clicking into multiple layers. There was no clear feedback on the current state of the supply chain.
- Consistency & Standards: Navigation patterns and button styles varied across modules, forcing users to "re-learn" the interface every time they switched from Shipments to Reports.
- Flexibility & Efficiency of Use: There were no "shortcuts" for power users. Simple tasks, like finding a high-priority container, required repetitive filtering and searching.
Identifying User Friction Points
Identifying User Friction Points
- Cognitive Overload: The interface presented over 50 data points simultaneously without visual grouping.
- The "Exceptions" Gap: Supply chain management is about managing problems (Exceptions). The old UI treated "Delivered" and "Delayed" shipments with the same visual weight, making it nearly impossible to spot risks quickly.
Information Architecture
Redesigned the IA to move from a Database-centric view to a User-intent view.Design Decision: I implemented a 3-layer hierarchy (Dashboard → List → Details) so users can find "Exceptions" in seconds rather than minutes.Information Architecture
Building the Component Library
OIA Global already had brand rules (colors and fonts). My job was to take those rules and create a Component Library (a toolkit) specifically for this web platform.Why I built this:Building the Component Library
- Consistency: Every button, icon, and text style looks the same on every page. This makes the platform feel professional.
- Speed: Developers can build new pages faster because the "building blocks" (components) are already designed.
- Scalability: If OIA wants to add a new "Customs" or "Finance" section later, they can use these same components to keep the design uniform.
What I designed:
What I designed:
Designed a Responsive Pages:
Link to Live Login PageDesigned a Responsive Pages:
Most logistics tools only work on desktop computers. However, OIA managers are often on the move. I designed the platform to be 100% Responsive, so it works perfectly on phones, tablets, and laptops.
Interactive Prototype
Link to PrototypeInteractive Prototype
To make sure the new design was easy to use, I built a high-fidelity interactive prototype. This allowed stakeholders to "feel" the product before it was even built by developers.
Conclusion: A Smarter, Faster Way to Manage Logistics
Conclusion: A Smarter, Faster Way to Manage Logistics
The OIA Connect redesign successfully turned a messy, confusing old platform into a modern tool that is easy to use. By focusing on what users actually need to do—rather than just showing them a wall of data—the new platform helps people work faster and with fewer mistakes.Main Achievements
- Fixed the "Information Overload": Instead of showing 50 things at once, the new design highlights what’s important (like delayed shipments). This helps users spot problems in seconds.
- Work from Anywhere: The platform now works perfectly on phones and tablets, not just office computers. This is a huge win for managers who are always on the move.
- Better Organization: By building a clear "Dashboard → List → Details" flow, users no longer get lost. They can find the specific information they need without clicking around blindly.
- Built for the Future: I created a "toolkit" of reusable design parts. This means OIA can add new features quickly while keeping the platform looking professional and consistent.
Thank you for taking the time to review my case study — I truly appreciate your interest and attention. 😇
Thank you for taking the time to review my case study — I truly appreciate your interest and attention. 😇
Page updated
Google Sites
Report abuse