Izzan Bacharrudin Soedarsono
User Experience and GamesDesigner / Researcher
Home
Sketchnotes
About
Contact
Article
Resume
Have any feedbacks?
Situational Awareness Platform for Harbor
UI UX Design
Type
Experience Driven Design Course, as UI UX Designer
Date
6 Week Project
Experience Driven Design Course, as UI UX Designer
Date
6 Week Project
Design Goal
How might we create a digital platform as a new ways to merge data sources and provide information in intuitive, powerful and visually impressive manner.
Solution
Design a high fidelity and interactable digital prototype that provide real time situation of harbor and increase trust among manager, worker in harbor, and stakeholder
Solution
Design a high fidelity and interactable digital prototype that provide real time situation of harbor and increase trust among manager, worker in harbor, and stakeholder
Client
Rolls Royce Ship Intelligence -
Turku, Finland
Team Member
Nina Lukin, Izzan Soedarsono, and Agnesa Vavrinova for the Experience Driven Design Course 2018
Rolls Royce Ship Intelligence -
Turku, Finland
Team Member
Nina Lukin, Izzan Soedarsono, and Agnesa Vavrinova for the Experience Driven Design Course 2018
Experience Driven Design Course
This project comes from one course that I took in Aalto, which is Experience Driven Design class. The aim of this course how we develop digital experience based on client given task by putting XGoals (Experience Goals) as the main design drivers.
We were given a task by Rolls Royce Marine, to design a platform to increase situational awareness or intelligent awareness in harbors combining new and existing data sources in a creative way. The platform would be an user interface providing all important information as well as new interesting data types which help to see harbor operations from different viewpoints and offer new insights on operations. Shared, well presented data is the bridge to increasing awareness of one’s surroundings.
We were given a task by Rolls Royce Marine, to design a platform to increase situational awareness or intelligent awareness in harbors combining new and existing data sources in a creative way. The platform would be an user interface providing all important information as well as new interesting data types which help to see harbor operations from different viewpoints and offer new insights on operations. Shared, well presented data is the bridge to increasing awareness of one’s surroundings.
Goals
Rolls-Royce Marine is currently developing a new solution for various stakeholders working in harbour area, to increase their situational awareness on shore. It was our task to help imagine and visualize ways that would support such vision by developing a user interface that would provide dynamic data in an attractive and accessible way. The inspiration for this ambitious project comes from ship situational awareness, a product which Rolls Royce Marine has been developing previously.
The goal of our UI is to showcase new ways to merge data sources and provide information in intuitive, powerful and visually impressive manner. The prototype expected to increase exchange of data between stakeholders and it will act as an objective and reliable source for knowledge. It would also act as an trust building element inspiring future data experiments for the harbor stakeholders.
![Project Plan Visualization]()
The double diamond structure provided a base to our project plan.
The goal of our UI is to showcase new ways to merge data sources and provide information in intuitive, powerful and visually impressive manner. The prototype expected to increase exchange of data between stakeholders and it will act as an objective and reliable source for knowledge. It would also act as an trust building element inspiring future data experiments for the harbor stakeholders.
The double diamond structure provided a base to our project plan.
Discover - Gathering Insights
The context study in which we conducted interviews with the harbor management as well as with a researcher and two operator representatives provided us with strong evidence. When designing with Experience Goals in mind, it is crucial to understand how people feel and why they currently feel this way. A way of pinpointing such feelings would help to set the experience goals, we mapped insights from interviews by using affinity diagrams.
These are the insights that not only supported the importance of introducing new technologies to the harbour environment but also clarified where are the weak spots and opportunities to design for better experiences:
There is no real data share nor exchange of it between the operators because of business reasons
At the moment there is no accurate information about the container location and time is wasted looking for specific containers in the exchange area.
It is crucial to know about the actions going on in the harbour in real time.
Synergy between operations is important.
There are multiple stakeholders to share data with every day
Based on the insights that we found, we define the persona of the target user in order to understand what the possibilities ideas can be generated and develop.
Persona that we used as reference for building the concept we want to develop.
Case Scenario of the concept, explains what kind of interaction that can be happened.
Define - Experience Goals
Based on the insight that we found from our research, we decide to choose 2 Experience Goals that become our anchor or target on what kind of experience concept that we want to deliver from our prototype.
Trust rise as a Experience Goal early on out of our research. As data is not shared widely, misunderstandings happen and communication can be a challenge. An objective, shareable information source would increase trust in the harbor site and beyond. Trust is also very closely related to confidence, believing you can achieve and accomplish set goals. More accessible information in a convenient form helps to get new insights about your surroundings and help make better decisions.
XPLORATION
Xploration chosen as our secondary Experience Goal because we want to provide user capability to get known and understand on what happened in real time in harbour. By providing a UI with new ways to show and share information, we aim to evoke the mindset for exploring - everything is possible when you implement new data types and algorithms.
TRUST
Trust rise as a Experience Goal early on out of our research. As data is not shared widely, misunderstandings happen and communication can be a challenge. An objective, shareable information source would increase trust in the harbor site and beyond. Trust is also very closely related to confidence, believing you can achieve and accomplish set goals. More accessible information in a convenient form helps to get new insights about your surroundings and help make better decisions.
- Info for common good.
- Sharing & having access to valuable data.
- Objective data sources help building trust towards other stakeholders.
- Trust encourages to free exploration.
- Trust builds over time.
XPLORATION
Xploration chosen as our secondary Experience Goal because we want to provide user capability to get known and understand on what happened in real time in harbour. By providing a UI with new ways to show and share information, we aim to evoke the mindset for exploring - everything is possible when you implement new data types and algorithms.
- Using & fusing data in a new and creative way
- Exploration of new possibilities that users didn’t know existed
- Curiousness, what could this system provide for user.
- Exploring new opportunities, being curious and excited.
Develop - Low Fidelity Prototype & Wireframing
My role in this project is making the interactable UI prototype by using Sketch and Flinto. Before developing the interactable prototype through screen, it started by creating mock up using pen and paper because it can speed up the ideation process. Starting the process from low-fidelity enable us to visualize and test the idea that we have and find out the flaws behind on it. With this way of process able us to generate more ideas.
![]()
Low Fidelity Prototyping to figure it out the flow
After we decide on which direction we want to develop into digital phase, the development start by creating wireframe of the ux flow. We decide to start with wireframe because we can be more focused on the experience of the product itself rather than the looks and styling. Also it will give us a room for improvement.
![]()
Low Fidelity Prototyping to figure it out the UX flow
Low Fidelity Prototyping to figure it out the flow
After we decide on which direction we want to develop into digital phase, the development start by creating wireframe of the ux flow. We decide to start with wireframe because we can be more focused on the experience of the product itself rather than the looks and styling. Also it will give us a room for improvement.
Low Fidelity Prototyping to figure it out the UX flow
Deliver - Delivering High Fidelity Prototype
The prototype aims to provide information in intuitive, powerful and visually impressive manner where ensure user to find all important information as well as new interesting data types which help to see harbor operations from different viewpoints and offer new insights into operations
. It also enable information exchange between stakeholders and it could act as an objective and reliable source for knowledge.
By providing a lot of information, it’s help user to see the condition from multiple viewpoints and get a good overall view of what is going on accomplish tasks and optimize operations.
![]()
User able to check information about the status of particular area.
![]()
User able to check status about the vehicle information and track it real time in the harbor.
![]()
User able to check the weather realtime and also check the forecast
Prototype Interaction video
By providing a lot of information, it’s help user to see the condition from multiple viewpoints and get a good overall view of what is going on accomplish tasks and optimize operations.
User able to check information about the status of particular area.
User able to check status about the vehicle information and track it real time in the harbor.
User able to check the weather realtime and also check the forecast
Prototype Interaction video
Check other related project