Vanderpol

In this post, we are going to talk about the redesign of inexor.se. As usually, I start answering a series of questions before going into the design.

Who is the client and what are they doing ?

Inexor, which is the company I work for, is a swedish webbagency, delivering webb solutions like intranet, webbsites, consulting strategy and design, and they are specialised in Episerver CMS.

Strenghts of Inexor

Proximity, specialists, expertise.

The target ?

B to B. Prospect customers and current clients.

Profile : From small-sized businesses looking for a pro CMS tool to multinational and NGO.

Goal of the website:

The website is a source of information about us and sustaining brand image. It is supposed to portray Inexor expertise in webb based application, show the huge level of attention and care we provide to customers.

Additionally, Inexor expertise is illustrated by many exemples of past projects. The website is an invitation to have an interaction (digital or in real-life) with the team.

Former website screenshot:

A content page…

Issues with the former design

To start the design update, I had a list of suggestions from content editors feedback during from an internal meeting:

• On the standard page template (upper picture), the page looks lame and loses the balance and vintage feel /energy of the start page (lower screen shot). This is particulary true when the pages contain long texts.
• Acess to the project protfolio can only be done from the startpage (the big TV screen)
• No social medias, no communities
• No “rss”, or “add this” visible function
• No hyperlink to the new communication material (new brochure…)
• No visual link to the new brochures and new print brand identity – need to adapt the print color palette to digital medias

Benchmark / what the competition is doing:

I also performed a benchmark of 20 different webagencies sites and blogg to see what was up there, and find their “best practice” we could adapt in the design (remember that design is first function, above visual appearance).

• The strategic message is displayed clearly and evidently.
• The webbdesign tend to be minimalistic, with clarity, easy navigation but also eye catching layout (original fonts, vivid colors, beautiful and high-resolution background / header picture).
• Content : regular tutorials from profs, tips, design trends, new artists presentation, and the service the agency provide, portfolio with image/video galleries.
• Two columns design, social medias like facebook, twitter, blogg.

I also had an initial meeting with my boss and  the head of marketing, who wanted to add a thumbnail navigation system

• “what we do”
• “What we have done”
• “News”
• “Your goal”, as a sort of role-play for the visitor.

Three values to describe the company profile:

The new brand identity will be based on three values : strategy, design and technics.

Below an extract from the new brochure (november 2009) :

Another brand image issue to solve:

A die-hard stereotype: higly-technical companies are often identified as being uncapable of any artistic creativy and of being boring. And my task is to prove the contrary, as we started to do with our magnificent brochure !

Mood board

To help me along the way, I very often collect everything I found inspiring on a mood board in Illustrator, as soon as I know the company´s values and profile.

This can be done through browsing pictures (flickR, Getty…), design magazines, articles from the press. Anything can be potentially interesting, so I keep a lot of magazines and pictures around me.

Below a part of the mood board focusing on architecture, futurism, high technology, cleaness and efficiency.

Technical requirements:

Three words : accessibility, accessibility, accessibility. So no Flash, and we´ll go for 770 px wide (so that it fits easily in a 800 * 600 screen resolution). And of course, graceful degradation (if JavaScript is switched off, the website is accessible and usable). But we´ll use some enhancement for those who can display more modern webbrowsers too.

About the future content / editorial feeder :

They are used to manipulate Episerver CMS, so there is no problem on their side. We are just deeling with new functions and graphic design.

Initial sketches and wireframing…

I always start with a good old sheet of paper and pencil… this allows you to go through the list of functions to implement in the design. Collage are also possible if the project has many templates and many functions. I did not went this time into wireframing program or into Illustrator to finalize the sketches, due to time contraints.

So this is about laying the bricks of the projects on the design grid…

Graphic design

Once the zoning and grid have been set, one has to harmonize or use the color palett of the brand design profile, use the right combination of fonts, that must clearly show that this is Inexor.

This is why the logo is to be placed on the top right corner for instance, and in black color. As it was shown in the brochure, Inexor is pro, technical AND creative.

I´ll use a ligth grey in the background, as it was used in the pages of the new brochure, and a few vivid colors here and there… I have decided to keep the links blue, since it is the oldest habits available on the net, and leads to no confusion in the mind of users. The slight touch of vivid colors (yellow, magenta, cyan and saturated green) will reinforce engament, passion and inspiration. The different boxes will have square corners to show stability.

Regarding fonts

I want to use a serif font for the normal text, as used in many bloggs. Georgia is elegant, easy to read, widely spread on both PC and Mac and will be the counterpart of Bodoni MT, that was used in the brochure.

Gill Sans is a font that Inexor has been using since the start in printed material, so there is no need to change it. It is a beautiful Sans Serif font that we are going to use for rubriks, titles and small text too (easier to read in small size than serifs).

So we have a good matching combination of serif / sans serif font, that makes the text more interesting to read. We just need a CSS3 trick, and it will even work on Internet Explorer 6, the diplodocus of webbroser (luckily on its way to exctinction).

My first attempt was also to preserve some of the funny icons we had before… I wanted to keep the vintage feeling as well, with some wavy patterns, to illustrate the zen motto: “be the water, not the rock”. In a word, that we are flexible. Emerged from that two variations.

However, with further discussion with the client (my boss and also the head of marketing), some adjustments were to be made :

• The navigation icons have to be removed (too far from the printed brochure).
• And colors still have to be adjusted to the new visual identity, because of a lack of clarity.
• The “wave” pattern is trendy now but that might not last in time…

The general layout, font combination, arrow shapes were validated. So I made some further modification in photoshop to get closer to our color palette, and decided to include some of the brochure pictures in the header, that would switch when clicking on one of Inexor values.

A project portfolio was added in the right column, that would be running on Jquery (JavaScipt plug-in). We had implemented such a tool on a previous website, for Inexor Integration.

The 2 chosen fonts rendering looks pretty good with one another :

A view of the general design :

We also needed an illustration to represent ass well our new triptic strategi/design/technics, so I modified some graphics I had, and added some creativness here and there in Illustrator, the software I prefer for vector graphics.

And the winner is…

After those modification, the mockup was accepted and could be sent to the production team and a few days later we had a new skin on the homepage, with wonderful typefonts and pictures. You can see it below or online

I hope you liked this post, and there will be more case study to come, so stay tuned.

Related posts:

1. Webdesign case study #03
2. Inexor integration version 2 is live !
3. KonfaStockholm webdesign case study
4. Logo Case study #01
5. Web Design Index 9. I´m in twice !

Tags: Webbdesign Case Study

This entry was posted on Friday, November 20th, 2009 at 16:42 and is filed under Webbdesign Case Study. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.