NCC digital brand identity and design of responsive web

12/22/2014

NCC is one of the biggest construction companies in the Nordics. They have around 18.5k employees and prides themselves with the fact that they can construct entire sustainable societies. They can build everything from roades to production facilities and homes for people. This of course adds to the complexity of creating digital services for them as you have to take into account that at any given point you could be addressing the purchaser at a huge industry complex or a private citizen looking to acquire a new home.

We started with trying to figure out how large the range of NCC customers really was, and also how they would behave in certain situations. We also studied the visitor statistics and found out an intriguing fact. Most B2C customers never really saw the first page of NCC. They came from Hemnet, which is a housing listing service in Sweden, and landed directly on a specific unit within a housing project NCC was developing.

This presented us with the possibility to build two distinct different first page templates. One was aimed at customers from the B2B segment that surfed to the first page. And then a page within the site that would show up via search engines for any phrases along the lines of “New home”. This also presented us with other challenges, given that from a B2C customer perspective in the user journey, the unit page of a housing project would usually be the first page they saw at NCC. The unit pages could therefor not really be designed as a final destination which really turns the traditional user journey on it’s head.

Wireframe

NCC also had quite a complex information architecture. The main problem they had was that a lot of their articles could fit in both B2B and B2C areas of the site. This meant that they had to keep two identical articles at different locations which meant a ton of administration. We designed a system where we tagged articles so that they could exist in different places at the same time without all the overhead administration.

Visual design

We decided early on that we would separate the process of designing the visuals and creating the user experience design. Given the complex nature of the information NCC wanted to present to the visitors, we wanted all the stakeholders to focus on solving the user journey rather then discussing individual colors or shapes of buttons.

In order to solve this, we had two divided tracks running at the same time, one being the UX process, and the other was to work with their brand material in order to update it from a traditional print heavy origin to a new more contemporary digital version.

I started by tweaking the color palette in order to optimize it for digital channels. The original was intended for matte paper, but the colors was a bit washed out on a display. NCC has a fantastic brand department to work with, they pretty much accepted every suggestion I had in a spirit of positive collaboration and we went for a warmer version of the original colors.

NCC brand colors

Style tiles

This is great way to sell in new concepts with clients. You can use Style tiles when a mood board would be to vague, and a complete mockup would be too precise. The tile is basically an image containing the building blocks of for example a web page. I.e. buttons, headlines, form elements, paragraphs etc. But they are presented in a way that no one could ever mistake it for finalized design. This way you can have clients give feedback on specific elements and how well they convey the brand look and feel. Read more about style tiles.

Given that we had a separate track where we developed the UX and information architecture closely together with the clients, once we had a final click prototype ready, and an approved style tile, it was almost as easy as adding one plus one.

NCC Style tile

Final design phase

As the clients was heavily involved from the start of the project, after we got the click prototype and style tiles approved, it was some what of an easy ride just detailing the mockups and moving on to front end development. The result was an elegant mix of flat design and some sense of depth with small distinct shadow elements.

Section page

Conclusion

I think this is probably the most interesting case I’ve had throughout my career as I was able to work on the whole chain from start to finish. It was an intense year, but still filled with positive and creative opportunities. Personally, I think what I will take from this project is the great work we did with style tiles and how well it worked out with the client.