Custom ERP · Web + Mobile
YuMen System
YuMen System
End-to-end logistics and distribution platform: web system for inventory, purchasing, sales, and accounting — plus a mobile app for drivers to manage and execute delivery routes in real time.
End-to-end logistics and distribution platform: web system for inventory, purchasing, sales, and accounting — plus a mobile app for drivers to manage and execute delivery routes in real time.
Year
Year
2024
2024
Role
Role
UX/UI Designer
UX/UI Designer
Tools
Tools
Figma · Canva
Figma · Canva
Audience
Audience
Multi-role company employees & drivers
Multi-role company employees & drivers
The Problem
YuMen is a distribution company dealing in commercial boxes. Their operations span inventory management, purchasing from suppliers, sales to clients, accounts payable and receivable, and physical delivery logistics — all previously managed across disconnected tools or manually.
The project required designing two interconnected products: a web platform for office staff to manage the full business cycle, and a mobile app for delivery drivers to receive their routes, mark loaded products, track deliveries to multiple clients per route, and close out their shifts.
YuMen is a distribution company dealing in commercial boxes. Their operations span inventory management, purchasing from suppliers, sales to clients, accounts payable and receivable, and physical delivery logistics — all previously managed across disconnected tools or manually.
The project required designing two interconnected products: a web platform for office staff to manage the full business cycle, and a mobile app for delivery drivers to receive their routes, mark loaded products, track deliveries to multiple clients per route, and close out their shifts.
YuMen is a distribution company dealing in commercial boxes. Their operations span inventory management, purchasing from suppliers, sales to clients, accounts payable and receivable, and physical delivery logistics — all previously managed across disconnected tools or manually.
The project required designing two interconnected products: a web platform for office staff to manage the full business cycle, and a mobile app for delivery drivers to receive their routes, mark loaded products, track deliveries to multiple clients per route, and close out their shifts.
My Role
I was responsible for designing both products in Figma as part of the project team. The web platform covered inventory, purchase orders, sales orders, returns, client and supplier management, truck and route creation, and financial modules for accounts and payments. The mobile app was designed specifically for drivers operating in the field, with large touch targets, minimal text input, and a sequential flow that mirrors how a delivery route actually unfolds — developed in close coordination with the development team for accurate implementation.
I was responsible for designing both products in Figma as part of the project team. The web platform covered inventory, purchase orders, sales orders, returns, client and supplier management, truck and route creation, and financial modules for accounts and payments. The mobile app was designed specifically for drivers operating in the field, with large touch targets, minimal text input, and a sequential flow that mirrors how a delivery route actually unfolds — developed in close coordination with the development team for accurate implementation.
I was responsible for designing both products in Figma as part of the project team. The web platform covered inventory, purchase orders, sales orders, returns, client and supplier management, truck and route creation, and financial modules for accounts and payments. The mobile app was designed specifically for drivers operating in the field, with large touch targets, minimal text input, and a sequential flow that mirrors how a delivery route actually unfolds — developed in close coordination with the development team for accurate implementation.
Process
Role Mapping
Role Mapping
01
Identified all user roles (inventory, sales, admin, finance, drivers) and mapped the workflows and permissions each required.
Identified all user roles (inventory, sales, admin, finance, drivers) and mapped the workflows and permissions each required.
Web IA
Web IA
02
Designed the information architecture for the web platform, organizing complex business functions into navigable, role-appropriate modules.
Designed the information architecture for the web platform, organizing complex business functions into navigable, role-appropriate modules.
Web Design
Web Design
03
Designed all web screens: dashboard, inventory, purchase/sales orders, client/supplier management, financial modules, and route management.
Designed all web screens: dashboard, inventory, purchase/sales orders, client/supplier management, financial modules, and route management.
Mobile Flow
Mobile Flow
04
Designed the driver mobile app: route assignment, product loading confirmation, delivery-by-delivery progress, and route completion.
Designed the driver mobile app: route assignment, product loading confirmation, delivery-by-delivery progress, and route completion.
Cross-product Alignment
Cross-product Alignment
05
Ensured data created in the web platform (routes, orders) surfaced correctly in the mobile app, and vice versa.
Ensured data created in the web platform (routes, orders) surfaced correctly in the mobile app, and vice versa.
Key Choices
Mobile app designed for field conditions
Mobile app designed for field conditions
Drivers use the app while handling physical goods — often with gloves, in varying light conditions. The mobile design used oversized interactive elements, high contrast, and a step-by-step flow that prevents errors rather than asking users to correct them.
Drivers use the app while handling physical goods — often with gloves, in varying light conditions. The mobile design used oversized interactive elements, high contrast, and a step-by-step flow that prevents errors rather than asking users to correct them.
Drivers use the app while handling physical goods — often with gloves, in varying light conditions. The mobile design used oversized interactive elements, high contrast, and a step-by-step flow that prevents errors rather than asking users to correct them.
Route-level and delivery-level views in the mobile app
Route-level and delivery-level views in the mobile app
A single route can involve deliveries to multiple clients. The app was designed with two levels of context: the full route view (all stops) and the individual delivery view (specific items per client) — letting drivers navigate between the big picture and the task at hand.
A single route can involve deliveries to multiple clients. The app was designed with two levels of context: the full route view (all stops) and the individual delivery view (specific items per client) — letting drivers navigate between the big picture and the task at hand.
A single route can involve deliveries to multiple clients. The app was designed with two levels of context: the full route view (all stops) and the individual delivery view (specific items per client) — letting drivers navigate between the big picture and the task at hand.
Modular web architecture for multi-role access
Modular web architecture for multi-role access
The web platform serves users with very different needs across the business. A modular architecture with role-based access ensures each team sees exactly the functions they need — without the noise of unrelated modules.
The web platform serves users with very different needs across the business. A modular architecture with role-based access ensures each team sees exactly the functions they need — without the noise of unrelated modules.
The web platform serves users with very different needs across the business. A modular architecture with role-based access ensures each team sees exactly the functions they need — without the noise of unrelated modules.
The Result
A complete dual-platform product: web ERP covering the full business cycle of a distribution company, and a mobile driver app for real-time route and delivery management — both designed as a coherent, integrated system.
A complete dual-platform product: web ERP covering the full business cycle of a distribution company, and a mobile driver app for real-time route and delivery management — both designed as a coherent, integrated system.
A complete dual-platform product: web ERP covering the full business cycle of a distribution company, and a mobile driver app for real-time route and delivery management — both designed as a coherent, integrated system.
Outcome
YuMen was the most complex project in scope — two products, multiple user roles, and tightly interconnected data flows. It required sustained systems thinking: every design decision on the web side had implications for the mobile side, and vice versa.
The driver mobile app was a particularly instructive design challenge — because the user cannot slow down to figure out the interface. The design had to be so clear that it could be used correctly the first time, under pressure, in the field.
YuMen was the most complex project in scope — two products, multiple user roles, and tightly interconnected data flows. It required sustained systems thinking: every design decision on the web side had implications for the mobile side, and vice versa.
The driver mobile app was a particularly instructive design challenge — because the user cannot slow down to figure out the interface. The design had to be so clear that it could be used correctly the first time, under pressure, in the field.
YuMen was the most complex project in scope — two products, multiple user roles, and tightly interconnected data flows. It required sustained systems thinking: every design decision on the web side had implications for the mobile side, and vice versa.
The driver mobile app was a particularly instructive design challenge — because the user cannot slow down to figure out the interface. The design had to be so clear that it could be used correctly the first time, under pressure, in the field.