Tom Bakker, Director, Product Management Navis
CONNECT.
COLLABORATE.
INNOVATE.
Building a New User Experience in N4
SPARCS and XPS Today
24
266
1,632,948
1
 Years since SPARCS first
went live
 Terminals using SPARCS
or XPS
 Lines of code in the N4
Bridge, XPS Server and
XPS client
 Number of operating
systems SPARCS and
XPS run on
Agenda





Picture Size
1.41” x0.94”
Why build a new planning and control UI in N4?
Features of the N4 planning and control UI
How the new UI impacts N4 architecture
Customer engagement
Proof of concept application
The Evolution of User Experience
Goals for N4 Planning and Control
For Operations
Modernize user experience
Support mobile platforms
All-in-one system
Customization & extension
For IT
Fewer components
Thin/zero footprint client
One set of users
Improved reliability, scalability
To Build N4 Planning and Control…
Re-build the XPS User Experience
On N4
View it with a browser
Graphic Views On N4 w/ Browser
Picture Size
1.41” x0.94”
Live Update On N4
Picture Size
1.41” x0.94”
Zoom In/Out
Picture Size
1.41” x0.94”
9
Change Colors and Contrast
Picture Size
0.875” x 2.25”
All In One
Picture Size
0.875” x 2.25”
N4 Workspaces
Picture Size
0.875” x 2.25”
Touch Interactions, Platform Independence
Picture Size
0.875” x 2.25”
Customization
Picture Size
1.41” x0.94”
N4 Planning and Control UI Takeaways
A Unified User Experience
•
The new live updating and graphic views will be integrated with the
existing N4 user interface
N4 Viewed on a Browser
•
•
Provides usability improvements – zoom, view modes
Provides options for deploying on different OS and devices
Greater Flexibility
•
•
Workspaces to configure multiple view sets to match your work style
Customize views to suit your needs
N4 Planning and Control…
Solidifies N4’s Architecture
By Removing Complexity
Removing Complexity - N4 2.x
JMS
N4 N4 Center Center Nodes
Node
XPS Planning and Control
Bridge
N4 Cluster Nodes
JMS
XPS
JMS
Expert Decking
Prime Route TT
Prime Route SC
Statistics
Vessel
Autostow
Rail
Autostow
JDBC
Crane ASC ASC
Schedulers
ECN4
HTML
JDBC
N4 DB
ECN4Web
ECS DBF
VMT
VMT
VMT
VMT
VMTs
Java Enterprise Architecture
17
Non‐clustered
Removing Complexity – N4 Automation
JMS
Crane/AHT Schedulers
N4 N4 Center Center Nodes
Node
XPS Planning and Control
Bridge
N4 Cluster Nodes
JMS
XPS
JDBC
JDBC
JMS
Expert Decking
Prime Route TT
Prime Route SC
Statistics
Vessel
Autostow
Rail
Autostow
Crane ASC ASC
Schedulers
ECN4
ECN4Web
HTML
N4 DB
JDBC
ECS DB ECS DB
VMT
VMT
VMT
VMT
VMTs
Java Enterprise Architecture
18
Non‐clustered
HTML
ECN4Web
HTML
JDBC
JDBC
ECS DB
ECN4
JMS
JMS
Crane/AHT Schedulers
JMS
N4 N4 Center Center Nodes
Node
Bridge
N4 Cluster Nodes
N4 Planning and Control
Removing Complexity – N4 Equipment Control
ECN4
VMT
VMT
VMT
VMT
VMTs
ECN4Web
VMT
VMT
VMT
VMT
VMTs
Java Enterprise Architecture
19
XPS
Expert Decking
Prime Route TT
Prime Route SC
Statistics
Vessel
Autostow
Rail
Autostow
HTML
N4 DB
XPS Planning and Control
Non‐clustered
Prime Route TT
Prime Route SC
Statistic
Vessel
Autostow
Rail
Autostow
Crane/AHT Schedulers
XPS
Expert Decking
Prime Route TT
Prime Route SC
Statistics
Vessel
Autostow
Rail
Autostow
HTML
ECN4Web
JMS
XPS Planning and Control
HTML
JDBC
JDBC
ECS DB
ECN4
JMS
N4 N4 Center Center Nodes
Node
Bridge
Expert Decking
N4 Planning and Control
Removing Complexity – N4 Optimization
VMT
VMT
VMT
VMT
VMTs
N4 DB
Java Enterprise Architecture
20
Non‐clustered
Prime Route TT
Prime Route SC
Statistic
Vessel
Autostow
Rail
Autostow
Crane/AHT Schedulers
VMT
VMT
VMT
VMT
VMTs
N4 DB
Java Enterprise Architecture
21
JMS
XPS Planning and Control
XPS
ECN4Web
HTML
JDBC
JDBC
ECS DB
ECN4
JMS
HTML
N4 N4 Center Center Nodes
Node
Bridge
Expert Decking
N4 Planning and Control
Removing Complexity – Unified Application
Benefits
• Zero‐footprint User Interface
• Scalability and Reliability
• Configurability and Customization
• Open APIs and Optimization SDK
N4 Planning and Control Architecture Takeaways
Fewer Disparate Components
•
Less to deploy, less to monitor, less to upgrade
All on the Cluster
•
•
Losing a node <> system downtime
Add capacity by adding nodes
One Application
•
One technology stack, one set of tools, one set of users
Where are we now?
Customer Engagement
 Site visits
 Observe users
 Validate new UI concepts
 Get input
 Webinars
 Demonstrate
 Get feed back
Picture Size
1.41” x0.94”
Implementing N4 in HTML 5
Picture Size
1.41” x0.94”
Presentation Agnostic
UI Definition
UI Connectors
N4 Business Tier
Presentation Agnostic Conversion
ULC
ULC Client
DART
HTML Client
ZK
???
???
Building a Proof of Concept (POC)
 Live updating yard and vessel views
 Workspaces
 Recaps
 Planning Tools
 Gate
Demonstrate simple end to end process
POC: What should it prove?
 The new UI is visually compelling and easy to use
 The new UI performs
 Performance and scalability testing from the start
 The co-existence of old and new UI
 Allows low risk, time independent adoption of new UI
Q3 2015
Picture Size
0.875” x 2.25”
CONNECT.
COLLABORATE.
INNOVATE.
Questions?
In Conclusion…
Re-THINK the XPS User Experience
Build it on N4
Make it compelling, lightweight and
scalable
It’s a Journey…
Picture Size
1.41” x0.94”
CONNECT.
COLLABORATE.
INNOVATE.
Thank you!