Shiplog
Project from 2022
Shiplog is a software program developed by Grieg Connect (at the time called Shiplog AS) many years ago, it helps workers in ports all around Norway to get an overview over vessel traffic in surrounding areas, and plan mooring for arriving port calls.
Our team decided that it was time to refresh the core functionality of this program, and align it together with the rest of our web app suite. My role as the only designer on the project was to understand as much as possible about Shiplog and its users, and come up with solutions for a redesign.
Project kickoff
We kicked off the project with an in-person meeting at Grieg Connect’s offices in Gjøvik, where we went through the current state of Shiplog and its core functionality, what map services our developers have been working on recently which we would end up using for the new web app, and scoping out the core functionality that was needed.
Learning about Shiplog
I spent a lot of time analysing Shiplog. Its main navigation, the way the search works, and most of the other functions available. I had extensive discussions with our domain expert Trond about the ways different functions worked and are being used.
We spent some time with the end users, visited Kristiansund Port and took a look at their daily operations. They showed us how they use Shiplog and what’s most important to them, in their case it was mooring planning and overview of quay plans in a timeline.
I also contacted other known Shiplog users to get a general feeling about what Shiplog means to them and gained some useful insight from that as well.
Wireframes
After I felt confident about the core functionality and the most important features of Shiplog, I took another look at our scope and started sketching some wireframes in the Concepts app on my iPad. That helped me find a direction we would like to go in, and after having several rounds of discussion with other team members and our Head of Design I landed on the alternative everyone was most satisfied with.
Final designs
It was quite easy to start setting up higher fidelity designs in Figma since we’ve used similar components before (our navigation wrapper, map component and tables). I’ve tried different variations and kept dialog with the team through our weekly meetings, presenting the solutions and asking for feedback.
Figma’s auto layout made working and iterating very convenient and less time consuming. I could easily copy and paste sections and elements we previously used in other projects, edit the properties and content, and it would work perfectly, instead of having to make the whole thing from the ground up every time.
The design handoff was separated into sections for a better structure, and documentation was provided as comments in selected areas of the design right in Figma, to give a clearer picture to the developer of the idea. I have also created prototypes where needed and provided the links and explanation to developers via Slack.
