The graphical design for Visma’s applications and services is called Nordic Cool. The goal is for the user to feel the interface – not see it, so that the interface does not get in the way of the task at hand. Thus we try to use a subtle, yet distinct design. We put a lot of effort on the details of the design to give the user the feeling of world class craftsmanship. Furthermore it should give the impression of being secure and stable, only by how it looks and feels. All of this is achieved through graphical harmony, in particular consistent padding and alignment. Compare this to how cars are designed: every curve and detail is carefully selected, making the whole bigger than the parts.

Visma is working in a vast number of business areas. The more Visma grows, the more areas our design has to cover, and our expriences is that one size does not fit all. Still we need design principles. We need them for the following reasons:

1. Manifest our brand. It’s both valuable and usable that customers and users can recognise Visma products.
2. Facilitate migration of users from many applications to fewer. If we can cater more users on fewer applications we can focus our efforts to make few applications better rather than maintaining a vast amount of similar applications.
3. Making development faster and better by having a standardised design and let developers focus on make features good rather than spending time on graphical design.
4. Generally improving user experience by following standards and avoid re-inventing wheels.

In the end, all of this creates happy customers,  users and loyalty. That is the long term value that really makes our business flourish.

Nordic Cool 3 is our latest framework for these design principles. The principles applies for all Visma’s products and services. It contains a graphical profile (with an together with guidelines. In addition, there is a two-parted web library containing Photoshop templates of all the interface elements, implemented in Bootstrap. Each element in the library exists in a normal size and in a smaller size. Nordic Cool 3 also caters for mobile solutions.

It’s our third generation design – so it uses the cumulative experiences from our previous work and research, together with more contemporary aesthetics. It is also a bigger framework, than what we have had before, covering a wider set of elements, aiming to cover a wider spectrum of applications by including two sets of sizes.

Nordic Cool 3.0 – the color palette (click image to see the complete palette)

One of the more obvious updates from previous design principles is our new color palette. We are now having a slightly brighter saturated blue together with a new green color as complementary color. This, together with different use of space, disposition of pages and sizes – will give a totally new feeling to our applications. It will be generally brighter at the same time as it has become even more distinct since before. Another important feature is that the Nordic Cool 3 color scheme is also fully compliant with WCAG 2.0 on the AA level. We will as such comply with the new laws for accessibility governments demand when it comes to contrasts for weak sighted and visually impaired.

The other main feature our latest design language carries is what is commonly refereed to as ‘flat design’. This phenomenon is constituted by a range of different traits. It is not just flat – it also includes interaction elements characteristics such as larger sizes, larger paddings, more whitespace and other interaction behaviours. One advantage with the new trend is that it puts focus on content, not decorative elements. The disadvantage is generally less good affordance and predictability.

From monitoring the development and implementation of flat design in different areas throughout the industry, we have learnt about the main pro’s and con’s and we have made our own interpretation of it. And, our main conclusion has been that we need to preserve the idea of affordance in Visma products, in order to maintain a high level of “old fashioned” usability, to support efficient use of the products. So we have decided to keep fundamental characteristics of important elements. Take buttons as an example – people has a preconditioned expectation of how a button should look and behave – don’t remove that. Or even worse – remove buttons completely.

To exemplify why and how we are doing this we will build a library of show-cases, that demonstrates how different Visma application can look like with Nordic Cool 3. The image below is one of them. Click on it to see more examples:

—————————

Historical reference:

What you read below is still of essence but refers to our Nordic Cool 2 style. We use the same principles but have an updated colour profile and characteristics of interface design details.

Example of a Nordic Cool 2 design. View the showcases to see various Visma applications that have applied Nordic Cool. 

 

Nordic cool interfaces

We brand the interfaces of our applications with Nordic Cool in order to be in control of the design and the feelings the design convey and we also use the design to distinguish us from our competitors. This is a marketing and branding decision. The main characteristics and keywords for Nordic Cool are:

• crisp
• bright and airy
• calm
• distinct

The design needs to be subtle. You should feel it but not think about it. In many of our applications the users spend many hours per day using them, so we want to make it pleasurable use them for long durations. With Nordic Cool we do not only want to modernise the graphical design, but also improve the consistency between our different applications. This consistency is to a large degree achieved by using the same design for our applications and this will ease the work for our users.

The foundation for the Nordic Cool 2 interface design is a bright silver/grey work surface with darker blue colours for navigation and parts that serve global purposes. The previous Nordic Cool 1 design used a dark/graphite colour as the main contrast element. The main reasons for adopting a more colourful design are:

1. A strong internal and external demand for a more “modern” interface. Adoption rate internally has been quite poor.
2. When having a poorly implemented interface the blue will appear more attractive than an interface completely based on greyscales. This is something we have suffered from historically.
3. We believe we have found a good combination of minimalism and calm that will not be tiresome for lengthy use by using a neutral blue colour with a complementary orange contrast colour. This colour use is quite common for administrative systems, but we have worked hard to create design details that make our applications stand-out in the crowd.

Here are two examples of relatively similar applications functionality wise for travel and expense management. The first one has implemented a design based on Nordic Cool 1 but have made so large adaptations to the design so it no longer follows the keywords and providing the feeling that the Nordic Cool design is supposed to do. The second example applies both the keywords and keywords of Nordic Cool 2 and there is a great difference in the appeal and feeling of these two designs.

Example of an interface not following Nordic Cool. It lacks most of the keywords for Nordic Cool, except ‘bright and airy’. Together with poorly implemented styles, a very cluttered and non-organised interface it gives the user a feeling of poor craftsmanship.

Example of an interface following Nordic Cool. It is using the correct design for global elements such as menus and work area. It is bright and airy, has a proper padding and alignment providing a calm and well crafted impression.

 

Compliance with Nordic Cool

Do you have to follow Nordic Cool? In short: Yes. You are not allowed to apply other brand designs in Visma’s applications. We should not apply operating system related design on our applications either. We have around 300 000 customers and the branding opportunity is huge. There is a usability benefit as well – that our customers recognise our applications and how they work. The reaction should be: ”Ah yes, this is a Visma application”, then I should login here/this way and navigate this way.

 

New versions of Nordic cool

There are constantly new trends showing up which we have to adapt our design according to. However, since we have hundreds of applications we can not constantly change the Nordic Cool design since we will then loose the so important consistency. It is also very time consuming changing the design, both for the UX team who need to update all graphical material and libraries we have as well as for all project teams applying the design to their product and service. What we do is therefore to analyse all new trends and try to incorporate the most useful trends in our design making smaller changes to it. An example can be the new flat trend, removing affordance. Here we have to consider both usability and aesthetics aspects when evaluating if this is a trend we shall follow or not. Making everything flat will generally remove affordance and the user will have a much harder time know what is possible to interact with. This we do not want to do in our Visma applications. However adapting to the flat design aesthetically but still keeping as much affordance as possible is very interesting and something we are looking into.

Example of Outlook in Windows 8. The flat design removes most of the affordance and from first sight the user has a hard time knowing what you can interact with.

 

Nordic cool product icons

Every product and service in Visma shall have a product icon. The main purpose of  the product icon is to visualize the product, guide the user to find it and start the right application. This is traditionally done through a short-cut on the desktop but has also expanded to serve a similar purpose on web and mobile. Product icons are not to be used in marketing material or as a logo, only the Visma logotype is used for these purposes.

The Nordic Cool product icons are designed using the following keywords:

1. Crisp and lustre is achieved by applying subtle and sharp highlights and gradients.
2. Bright and airy is achieved by using less graphical complexity.
3. Calm is achieved by combining A & B.
4. Distinct is achieved by applying contrasts towards backgrounds and surrounding elements.

Example of Visma’s old product icons vs. the new Nordic Cool product icons. As you can see the old design was poorly crafted, with graphics that looks old, graphical metaphors that are hard to see and to understand. 

Example of how the different keywords are being used in the design of the product icons.