Designing the Kongsberg universe

Kongsberg Maritime's Subsea division has developed a vast portfolio of applications over the years. Many of which evolved at different times, and in different offices. Some were even acquired from external companies. Because of this, consistency and user experience have both suffered in the past. EGGS’ objective throughout this project was to create a common philosophy - aligning the universe of layouts and graphical interface elements into a rich, professional Kongsberg subsea suite.

Main takeaways

If you are looking for a lean way of aligning your application portfolio, here are four recommendations:

Overview: kick-off the project with experts representing all applications in your portfolio. Map out and categorise all the commonalities and differences.
Iterations and sharing: focus on communication and sharing between all teams. The process will require a great number of iterations and changes, so it will be a challenge to keep everyone up to speed.
Flexibility: keep the guidelines flexible enough to be adoptable and relevant for all the applications.
Design-driven alignment: use designers to facilitate the process, and keep them involved for every new application that needs redesigning. Each solution will contribute with new complexity and require specific detailing.

Lightweight approach to complex guidelines

Making GUI guidelines for large application portfolios can be extensive in scope, expensive to develop and almost impossible to maintain. This story demonstrates how it's possible to approach this issue in a more lightweight manner.

The starting point was 12 applications with various styles and functionality. The goal was to align the applications - finding a simple philosophy that would eliminate the need for heavy documentation and major thresholds.

We began this project by mapping out the 12 applications’ functionality, layout, look and feel. This allowed us to find the common elements across the applications.

Bottom-up spiral

We started the process by mapping the common denominators across all the different applications. This allowed us to create a framework that could make KONGSBERG'S applications recognisable at the most basic level. It included a few minor rules, such as logo placement, colours, fonts, menus and iconography.

Besides developing these guidelines, we made three examples of re-skinned applications, which demonstrated how the guidelines could be implemented, and allowed us to test the basic principles that we had developed. These examples would act as inspiration for all future re-design processes across the 12 applications.

Starting with the bare minimum allowed all the environments in Kongsberg Maritime's Subsea division to get involved, and would gradually allow us to develop a richer ecosystem of elements. Once a new application had been redesigned, it would simultaneously serve as inspiration, as well as a source for recycling elements into new projects.

Allowing these guidelines to be built in a bottom-up fashion made them more practical - a recipe that was easy to understand, flexible enough for everyone to adopt and promoted synergies along the way.

The designed guidelines expand beyond the digital domain - the new look and feel was also used to design the physical products of Kongsberg Maritime's Subsea division.

Bonus tip

We used a cloud service called Zeplin to share both Guidelines, GUI elements and application designs between all teams. This also served as specifications for the developers and required very little extra documentation.