2.1 AS IS Study

While preparing this guideline, an exhaustive AS IS study of the existing legacy system was carried out. As part of this study, the major insights pertaining to the UI/UX problems along with the challenges were discovered. An exhaustive system walk-through was conducted by the SME (Subject Matter Expert) to identify complications and glitches prevailing in the legacy system while bringing the imperative information, facts and data related to the problems. It was followed by the study of related modules of which complete list is as follows.

    Java Swing UI

  • OPS
  • Vessel Config
  • Terminal Config


  • Handheld – Reefer, Inspection
  • VMT – Tractor, Crane

    Web UI

  • Booking
  • Gatepass
  • EBS
  • SSR
  • Security Admin EDI
  • Admin Web
  • Notification Admin
  • CII
  • Reporting

    .NET Thick Client

  • Visit Schedule
  • EDI Admin
  • Container Admin
  • Gate Admin
  • Tractor Registration
  • TDA
  • BIS
  • Table Maintenance
  • Reefer WO Admin

2.2 Identification UI Elements and Components

The next phase was comprised of identification of the various UI Elements and Components used in the legacy system. Its intended usage (unique or repetitive) was studied in detail.

As the cardinal aim is to revamp the entire legacy system while performing its modernization, all the identified UI Elements and Components were considered for redesigning.

The final listof UI elements & UI components was discussed &validated by the DPWAH SME.

2.3 Research & Analysis

A profound research was carried out and brainstormed all the related industry practices in order to find out the most relevant best practices that can be adopted for eliminating the key issues of the prevailing legacy system which include maintainability and compatibility.

Main emphasis was on following the industry best practices includes Material Design Concepts of Google, iOS Human Interface Guideline and Various Responsiveness Frameworks like Bootstrap 3.0.0, Foundation v5.5, Skeleton v2.0.1 etc. in order to craft a implementable User Interface Design. Due diligence exercise was carried to validate the feasibility of identified UI elements & UI components using advanced web technology stack.

2.4 Theme Selection

Considering Color combination, Typography, Readability, Icon’s lucidity &sizes,Look& feel as major factors, a theme selection exercise was carried out. During the process various references such as Zodiac application corporate website, DPW Asia pacific corporate websites&DPW Web Design guideline was considered to create various theme options that can cater the need of ZODIAC Web, Mobile APP & OPS. The final theme selection was performed by DPWAH management. The selected theme is as shown in fig 2.4 below..

Final Selected Theme
Fig 2.4 Final Selected Theme.

2.5 Prototyping

Considering the final list of UI elements & UI components selected by ZODIAC SMEs, various prototype options were created, deliberated and finalized. Details of each UI Elements and Components are explained in the subsequent sections.