UX UI Shorts

Two distinct entry points — industrial and CHILL HOME residential — so each visitor sees only the story relevant to their roof. High-contrast stat strips and repeated WhatsApp/audit CTAs keep the decision path short.

Static-first, mobile-optimised build with lazy images and clear heading hierarchy. Handoff included UI tokens and packaging dimensions so marketing updates stay low-friction.

I mapped competing analytics products and in-field review sessions to find where operators got lost. The UI prioritises at-a-glance health, trip and geolocation, and clear drill-downs from fleet → vehicle → pack — aligned with how admins and drivers actually work during incidents.

Delivered as a Figma system: grids, table density, filter patterns, and responsive breakpoints for the monitoring views. The production stack stayed on the client side; I handed off component-ready frames and redlines for the internal app team.

We sketched a product with two logins that mirror how work actually happens. Admin owns the people and the map: they onboard and manage loadmen, see who put cash into which ATM, and can switch between two or more machines in different areas without juggling separate notebooks. Loadman works at arm’s length: they record denominations they received from the bank, fill what they are about to put into the machine before a deposit run, then cross-check what they typed against the bank’s figures, confirm the drop, and that signal goes straight back to the admin — a closed loop, no extra phone tag. The client was explicit: no bottom nav, no hamburger of mystery screens, no enterprise density. The speciality of this app is that it feels like two clean doors (Admin vs Loadman), shallow screens, and as little touching as we could get away with — one primary action per moment, and the rest stays out of the way. That’s how we kept it simple, fast to train, and hard to use wrong in a rush.

I translated the flows into a tight Figma system — spacing, type, and a single primary action pattern — then into build-ready screens for a mobile app so engineering could implement without re-interpreting the field logic. NDA/ops constraints mean the build stays in the client’s environment; the deliverable on my side is the interaction model, UI, and handoff that matches how they work on site every day.