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.
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.
The key aims for writing these guidelines subsume
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.
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.
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 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.