Vessel Application
MY FOCUS
UI/UX Design
Service Design
Brand Design
PRODUCT Format
Mobile - Tablet
Design a mobile application to streamline vessel turnaround processes within a marine terminal, reducing idle time by at least 25% through optimized resource allocation, real-time communication, and data-driven decision-making.
The weight of paper
//vs.//
The heft of digital
Ever wonder how all that stuff you buy gets to your doorstep? Clothes, toys, fancy gadgets – a lot of it travels the world in giant metal boxes. And the places where these containers land and take off? Those are the shipping container terminals, the real workhorses of global trade. They handle millions of containers annually, keeping that global shopping spree rolling!
However, many terminals continue to rely heavily on paper-based processes for managing the complex task of loading and unloading container ships. Creating a multitude of challenges:
- Inefficiency
- Data Errors
- Limited Visibility
Design Considerations
HUMAN
STAKEHOLDER REVIEWS
PROTOTYPE FEEDBACK
FIELD TESTING
OBSERVATION
CONTEXTUAL INQUIRIES
RESISTANCE TO CHANGE
ENVIRONMENT
PAPER INVENTORY SHEETS
WEATHER EXPOSURE
NOISE POLLUTION
HAZARDOUS MATERIALS
ERGONOMIC FACTORS
HIGH TRAFFIC VOLUMES
MOVING EQUIPMENT
SOLUTION
ENVIRONMENTAL SUSTAINABILITY
EFFECTIVE IN ALL WEATHER
PAPERLESS PROCESS
REAL-TIME DATA
INCREASED ACCURACY
Embracing Constraints
Driven to Gather User Insights (Without a Budget)
I was strapped for resources, and while there was a ton of knowledge floating around internally, it wasn't exactly written down anywhere. So, I decided to take matters into my own hands and dig up some real user insights.
Cultivating Relationships
I wasn't just glued to my design screen! I teamed up with the product and development crews and actively hunted down chances to meet customers. Giving me the inside scoop on their experiences and their problems.
The Challenge of Diverse Fleets
Different ship classes threw a wrench in the design process! So, I grabbed the dev and product teams and we brainstormed twice a week to workshop solutions that could flex for all ship sizes.
Shrinking the paper footprint.
Auditing paper-driven operations
It wasn't just about throwing new tech at the problem; we had to think about the people using it, too. Switching from the old paper bay sheets, everyone knew like the backs of their hands, to some fancy new gadget was going to be a monumental change.
Wireframing to First Concept
Combined Intelligence Shapes Product Design
Over 80% of the information I gathered paid off in understanding the business needs. This real-world intel helped ensure that the product design was exactly what people needed and how they actually worked.
Balancing Usability and Efficiency
I wanted the app to feel as familiar and easy to use as those old paper forms, but way faster and more convenient. Having all the info they need at their fingertips.
Final Product & Design System
From Fiction to Function
This UI design was completely inspired by a sci-fi show I was binging. Before I went too far out of the box, we got real people to try it out and chatted with the folks who sign the checks. I ended up with this super clean, modular, and modern design.
Large, Clear, and Bold
Forget about fumbling with tiny buttons on a tiny screen. I made sure the targets on the app were nice and big so users could hit them easily, even if they were wearing gloves in the freezing cold. Clean layouts and bold colors keep everything clear as day, no matter how bright the sun gets.
Building the Future:
A Minimal UI Fuels a Scalable Design System
Six other mobile applications were slated for design while I worked on this one. I recognized the need for reusable components, guidelines, and resources across our mobile apps, so I spearheaded the need for a design system with executive buy-in.
This fostered collaboration with product and dev teams, guaranteeing alignment with business goals and user needs.
Design Thriving on Restrictions
Saving Even More Time
Connecting directly to a central data hub wasn't just about going paperless. Tests showed this could cut another 7% off the time it takes to complete tasks, on top of the predicted 15% efficiency gain!
Decoding User Needs from a Distance
The stakeholders were on board with the new tech, but there was a catch. I couldn't speak directly to the people using the application.
While I voiced my concerns, the business plan was clear, so I kept moving forward. But that didn't stop me from observing the workforce's interactions and finding ways to make a great application.
Focus, Not Fancy Features
With a few gaps in the data I was working with, I had to make some educated guesses about what features would be most helpful without adding too much complexity.
