Andreas Hellqvist

Digital creative from Stockholm

Social

DeviantArt Dribbble Google+ LinkedIn Twitter

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.

iOS 7 GUI PSD

06/12/2013

So Apple just introduced iOS 7 and it sported a new look. I decided to create an iOS 7 PSD mockup with some of the GUI elements. It’s all in vectors and nicely grouped in various views. Will probably do an update when Apple releases the OS to the general public in the fall. Until then you can download it at my Deviant art page. Use it freely for private and commercial projects. However don’t try to sell it. Make something amazing! :)

KPA Pension – Mobile web

12/10/2012

KPA Pension manages occupational pensions for those who are employed by local authorities or county councils. They had a very complex online environment so a quick fix to make their website more accessible via mobile was to create a unique experience in that channel rather then trying to make the entire website responsive.

Based on the customers most wanted services in combination with the business demands I created a wireframe prototype. After testing it and iterating the concept, I created a design that incorporated all of the brand elements as well as look and feel of the desktop channel.

Webb

Stockholmsmässan web page

02/06/2012

Stockholmsmässan is the largest meeting place in Scandinavia hosting around 70 leading exhibitions and hundreds of national and international congresses, conferences and corporate events every year.

Stockholmsmässan wanted to create a new fair schedule on their main web page so that the users could “browse around” and discover new exhibitions. I helped Stockholmsmässan create an immersive experience for the users that improves their abilities of both finding exactly what they are searching for and discovering new and exciting experiences to attend.

I wanted to display three primary exhibitions, editorial content followed by list view. The user can also do a text search, order by date, choose by category and list the exhibitions alphabetically.

Case-mobil

Stockholmsmässan mobile app

11/25/2011

Stockholmsmässan is the largest meeting place in Scandinavia hosting around 70 leading exhibitions and hundreds of national and international congresses, conferences and corporate events every year.

Stockholmsmässan wanted to create a mobile experience framework for their exhibitions. The user can search for exhibitors and look up activities. Since one of the functions was indoor mapping we felt that an app would be best in regards to performance rather then making the web page responsive. Another reason was that we wanted to create a focused experience that should be enjoyed on the exhibit floor and made it possible to pre download all data incase there was spotty coverage inside.

stofair-iphone2

The app had to be designed in a way that it would be easy to “reskin” to work with a number of different fairs and exhibitors.

Stockholmsmässan wanted to display a lists of all the participating companies. There were also some filtering options. The user could mark a company as an favourite, or star them inside their profile page in the app.

These companies should really stand out in the different listings so instead of just adding a tiny little yellow star I came up with the idea of inverting the entire list item.

marked-favourite

Case-Rejta1

Rejta

06/08/2011

Rejta is a rating service where users can voice their opinions regarding everything from restaurants to car service specialists. Rejta is part of Eniro which is one of Swedens largest companies in local search. The greatest benefit with Rejta is the user created content that brings an added value to local search.

Rejta wanted to expand into mobile with apps for both iOS and Android. After market research we found that users who like to participate and voice the opinions, more commonly do so in a mobile environment. They want to rate the company immediately after the transaction or service is completed. We also identified a large group of individuals who use Rejta to find new great companies, for example restaurants on the go.

rejta3-maps

We started with creating a wire frame and rapid visual prototype. Then we divided all the functionality into “Need to have” and “Nice to have” groups. We felt that iOS was the premiere platform to initiate on, because it had the largest user base and most potential of reaching critical mass. It would also be a great way to verify our findings in the initial market research.

After a successful launch of the iOS app we started to create the app for Android. Both platforms has it’s pros and cons, but one of the biggest for me as a designer was the fact that Google hasn’t really set a standard for their applications UI. This was a huge challenge for us as we had to identify some kind of a design pattern through out the Android app store.

rejta4.android

Download here: Rejta for iPhone, Rejta for Android

Case-ipad

Eniro sea charts

05/26/2011

Eniro is one of Swedens largest companies in local search. Eniro was originally very heavily invested in print as they were responsible for the telephone book. The concept of searching for “name” and “number” is a heritage that influence the perception of the services the company offers today. We wanted to distance our self from this idea and started to develop the concept of packaging our existing data about local business in new ways.

pa-sjon1

Sweden has a large archipelago with a serious amount of islands. The marine life is a huge part of the population and it’s estimated that there’s over a million leisure boats. That means that one in six people spend part of the free time in a marine environment.

We came up with the idea of pairing free charts with the ability of searching for various products and services. Fuel, guest harbors and hotels were some of the categories.

Initially we started with an app designed for iPhone. One of the limitations of the device in that environment was that the screen really is too small to get a favourable sense of direction when viewing the map. We solved this by implementing an augmented reality function so that the user could hold the screen up to the horizon and actually see the direction of the target.

After completing the phone apps for both iOS and Android we continued to create a more immersive experience for iPad. Here I felt that we had the opportunity to express our self a bit more and create a product that not only solved a problem but also gave the user a more pleasurable experience. I designed a user interface inspired by classical 50’s racer boats with analog indicators, leather and a feeling of luxury.

pa-sjon-ipad2

 

pa-sjon-ipad

Download here: Eniro på sjön HD, Eniro på sjön, Eniro på sjön för Android

Older Posts