Frank Houweling presented a case study on how Oracle Alta was used to create a visually attractive data portal for an oil terminal customer. The old application lacked information and was not user friendly, resulting in low customer satisfaction. The new application followed Oracle Alta's 3 step design principle of thinking mobile first, having a "less is more" approach, and strong visual focus. Key screens included a dashboard, orders by transport, alerts, tank details, and usage of intuitive icons, colors, images and charts. An iterative prototyping process involved discussing designs with business users until satisfied.

1. AMIS Oracle Conference
Frank Houweling, June 2016
Case Study: How to Make Confusing
Data Visually Attractive with Oracle Alta

2. Frank Houweling
• Java / ADF / SOA specialist
• AMIS (Netherlands)
• Focus on performance diagnosis/management
• Tech Lead of ADF Performance Monitor

3. 3
Agenda
• Introduction
• Old application
• Why New Application
• Demo
• Implementation Alta Style

4. 4
About VTTI
• Independent provider of energy storage worldwide
• Connects tanks, pipes and vessels to make the world’s oil flow
• Exploits oil terminals around the world in many countries

5. Context
• POC: portal for oil terminal customers
– Give relevant terminal information to customers
– Replacement of old application

6. 6
Why New Application
Current website doesn’t meets customer expectations.
1) Lack of information
2) Not user friendly
As a consequence:
1) Customers are not up to date
2) Terminal was on the phone
‘trouble shooting’ all day
Goal:
To improve
Customer
satisfaction

7. 7
Old Application

8. ORACLE ALTA:
3 STEP DESIGN PRINCIPLE
8

9. 9
Our Approach
• ‘Think’ mobile (mobile first)
– Tablet first page template
• ‘Less is more’
– Glance and Scan pages: only relevant information is present
• Strong visual focus
– Color indicators
– Use intuitive images
– Use ADF DVT charts
– Inspired by Oracle Work Better app
• Prototype
– Discuss prototype design extensively with business and end-users
– Update prototype - in iterations - until satisfied

10. 10
Intuitive Icons of Oil Transport
Types

11. 11
Color of Transport Type
Indicates a Status

12. Glance: DashBoard
• Instant Glance of relevant customer information
• 90% of the key information should be shown here

13. Jetty Occupation

14. Jetty Occupation (Zoomed In)

15. Orders by Transport
• Oil Transport (Read from left to right)
– Unloading/Loading Vessel/Barge to Tank
– Also other transport types (Tank, Train, Truck, Pipeline)
Four types of
status for all
transports

16. 16
Orders by Transport (2)

17. 17
Alerts
Alert when program
is not known

18. 18
Different ‘Stations’ for Different
Types

19. 19
Click on tank or vessel to see
order Details

20. Order Details – Time Sheet

21. Order Details – Time Line

22. Highlights – Current stock
information

23. 23
Highlights – Current stock
information (2)

24. Click on tank to see tank
detail information

25. Tank information – in
detail

26. Tank information – in
detail

27. 27
Alta in ADF
• Tablet First Page Template
• Dashboard:Infolets
• <af:masonryLayout>

28. 28
af:listView
• Excellent for tablet (and desktop); scroll down vertically for more content
• Meant for read-only Scan pages

29. 29
Icons are dynamic
• Icon source name depends on two values
• Could be also done in ViewObject Transient Attribute

30. 30
Clickable Charts
• Clickable pieChart with <af:clientListener> that invokes an <af:link>

31. 31
Conclusions
• Have a strong visual focus
• ‘Think’ mobile (mobile first)
• ‘Less is more’ mindset
– Larger (and fewer) components
• Tip: Make first a prototype
– Glance and Scan pages: only relevant information is present
– Color indicators
– Use intuitive images
– Use ADF DVT charts
– Discuss prototype design with your business in several iterations until satisfied