Getting Started

Getting Started

This UI/UX Guidelines paper is aimed at introducing the ZODIAC's Port Management Information system while setting a new bar for consistency and simplicity for the modernization of the ODIAC legacy system.ZODIAC has titivated its comprehensive integrated enterprise level port-management information system with redesignedUI/UX components.

1.1 Executive Summary

ZODIAC is a next generation Terminal Operating System (TOS). As part of the Zodiac Architectural Revamp Assessment (ZARA) exercise, one of the critical requirements identified was to revamp its UI and UX Design to support various accessibility options such as desktop, tablet and mobile and with a purpose of modernization, responsiveness & seamless user interface design. This document provides the UI Design Guidelines for the intended audience to solve this purpose.

1.2 Aim

The key aims for writing these guidelines subsume

  • Create a visual language for ZODIAC users and other stakeholders including UI designers, UI developers, Business analysts, and System Integrators while outlining the UI design best practices to ensure comprehensive and avant-garde UI development for ZODIAC.
  • Synthesize the classic principles of a good design while highlighting the proven methodologies that can be followed for the modernization of the UI and UX elements of ZODIAC.
  • Development of a single underlying guideline that allows for a unified experience across varied platforms and devices.

1.3 Usage

This document has been intended for audiences that includes Business Analyst, UIDesigner, UI Developer, Mobile APP Developer, Quality Assurance Engineers & System Integrators.

How to use this guideline for Web, Mobile APP & OPS explained as below.

  • WEB & Mobile
  • Business analyst & UI Designer

While creating actual wireframe/design for the Zodiac Web UI or Mobile APP UI, Business Analyst & UI Designer shall consider the guideline with respect to its Logical & Visual structure.

Visual Structure compiles of various design principles, UI elements and UI components which is detailed in the subsequent sections 4 & 5.

Logical Structure related parameters are detailed in section 3.9 under Layout Structure.

  • UI Developer

While converting to HTML from Wire Frames, UI Developer shall consider the parameters defined in this guideline, including behaviour of different states for various UI elements & UI components as detailed out in section 4 & 5. As the revamp progresses, various libraries and code snippets shall be added in section 4 & 5 for the reusability purpose.

  • OPS

OPS UI shall only be revamped in terms of its visual look and feel. Any changes in the functional elements of OPS are excluded from the scope of this guideline. The usage of this guideline for OPS UI revamp shall be limited to following visual elements only

Buttons, Icons (only application related icons/ no business specific icons), Labels, Navigational Menus, Modal/Non Modal Popups, Typography and Panel.


Copyright © 2015 DP World. All rights reserved.