top of page

Shipyard
Application Development

Summary

  • We proposed an Intelligent Shipyard Management System designed for a Shipyard to optimize various aspects of their operations. 

  • ​Our application can streamline shipyard's operations with a flexible, scalable system for manpower, materials, and production tracking.

  • Starting with QR-based manpower tracking, it lays the foundation for future integration of technologies like RFID and GPS, enhancing productivity and adaptability.​

Business Objectives

  • Increase manpower utilization rates by 20% within the first year of implementation

  • Reduce idle time of skilled manpower by 10%

  • Improve cross-departmental collaboration and resource sharing

  • Enhance project completion rates by xx% through optimal resource allocation

  • Reduce overtime costs by 20% by efficiently distributing workload

​This proposal primarily focuses on the Smart Manpower (Workforce Tracking System) module, which will allow shop managers to track manpower availability, skills, and current assignments, facilitating efficient allocation of resources and increasing overall productivity.

Pain Points

  • Lack of a centralized system to track real-time progress of Shipyard Operations

  • The current identification system (ship number, block number, part number) doesn’t integrated with digital tracking, leading to difficulties in monitoring at every stage of the process

  • There's no predictive analysis to forecast delays or contractor inefficiencies (Manhour Tracking) , which could optimize schedules and resource allocation.

Role

UX-UI Designer​

Tools

  • Figma

  • Miro

  • Jira

  • Adobe Photoshop

  • Adobe Illustrator 

Duration

3 Months

Scope of Work

Unique QR Codes for Each Manpower / Vendor

Each user has a QR code, scanned upon entering/exiting any factory location.

Tracking Manpower Location

Track manpower current locations based on their most recent scan.

QR Code Scanners at Key Locations

Scanners installed at key entry/exit points and stations (e.g., departments, machinery).

Each scanner is tied to a specific factory and station ID for accurate location logging.

Real-Time Dashboard

Displays users' current locations by querying recent scan data from all factories.

Movement Between Factories

Users scan QR codes at entry/exit points between factories, enabling transition tracking.

Backend for Multiple Facilities

Centralized database stores all scan data across factories (QR code, factory, station, timestamp).

System Architecture

​Design Considerations

​​​​

  • Common Architecture Framework

  • Flexible and Scalable

  • Ability to Incrementally add new application with less effort

  • Fasttrack Process and Development

  • Serverless First Approach

  • Enhanced User Experience

  • Leverage Open-Source Tools

  • Reduced Maintenance Cost

​Technology Landscape

​

  • Frontend/UI - Next JS

  • Backend  - Node.js V16

  • DataBase - MySql DB

  • AWS Cloud environment

  • Reporting - Grafana/Jasper

  • CloudFormation template - YAML

  • S3 Bucket - For hosting Static Website and JSON Data storage

  • API Gateway - For API Management

  • Lambda - Computation Engine

  • Cognito - Authorization/Authentication

  • Route53 - DNS

  • Cloudwatch - Logging/ Metrics

  • SNS - Notification

Design Process

Empathise
Define
Ideate
Prototype
Test & Deliver
Component 4.png
Collaborated with the client and our technical team, to understand day-to-day operations. Worked out the user flows and incorporated the brand theme to design a seamless, efficient app.
Identified the challenge: transforming shipyard operations by integrating advanced technologies for efficient management, real-time tracking, and data-driven decision-making. The goal was to automate processes, reduce manual errors, and improve collaboration across departments, leading to better outcomes and fewer delays.
Visited the client’s office to observe daily workflows and spoke with staff to understand operations, while interviewing the client to align with their vision and brand identity. Combined these insights with online research and case studies to design a user-friendly app, creating wireframes for testing and refinement.
Created mockups, UI layouts, and interactive prototypes in Figma, Miro, and Photoshop to give the client a clear look and feel of the application and demonstrate each user flow. Drew on case studies and additional research to design intuitive user flows and UI layouts that are easy to understand.
After testing and refining each user flow based on feedback, the final design—aligned with the client’s requirements and offering a seamless experience—is now awaiting approval.

Final UI Screens

bottom of page