Vanderpol

In this post, we are going to talk about the design of konfastockholm. As usually, I begin with going through a list of questions.

Who is the client and what are they doing ?

konfastockholm is a group of several congregations (more or less group of churches) in the region of Stockholm, Sweden. Every year, they organise seminars and confirmation session for teenagers.

This is a branch of the Swedish Church, a religious and non-profit driven organisation.

The target ?

Teenagers interested in becoming confirmed, and their parents too. People interested in getting more informations about the activities and details of coming/current/past confirmation sessions. The content will be in swedish, so no multilingual option is to be planned in the design.

In addition, the level of modernity of computer equipment is very high, so we can go for a 1024 px wide screen resolution.

Goal of the website – client brief:

The visitors are already interested in being confirmed. So this is not going to be about why or why not should a teenager confirm. Is is rather about getting info about seminars and extra activities (soccer, skiing…) and “easy booking”, as well as community oriented.

Perceived brand image

In Sweden, churches are perceived as being traditional, for “old people”, out of fashion and not really fun. Aditionnally, teenagers tend to divide the world into two categories: what is fun and what is not. Hence, our issue is to create a visually attractive and functional website. We will have to show that the Swedish church is a modern institution using modern tools, and that the seminars and activities proposed can be a source of fun and inspiration for the participants.

The targets

Teenagers tend to be impressed by graphic design/special effects more than by the content itself. Parents tend to be the opposite, and be irritated by fancy stuffs filling the screen.

So the challenge is to find a good balance between the two.

Mood board

A mood board is sometimes usefull to present and justify your creative routes to the client, or helping you in the creative process. I´ll just show here an excerpt from it, but basically, I collected many pictures from the Internet, about music, religion, youngsters activities labelled as “cool” (surfing, skating, …). You can see, among others some Jerome Bosch (14150-1516) art in the collage, famous for his imaginative and visionary religious paintings. If you are interested to read further information about mood boards, I suggest the article “mood boards are an essential step in design” by Ross Johsson. You could also look at examples of mood boards here.
Smashing Magazine posted recently a great article about collage.

Wireframing

Meetings with developpers and project leaders make the navigation flow clear. Then, transposing the flow and functionalities  into wireframing sketches (in illustrator, word, paper sheets or whatever suits you best ) will make your graphic design task much easier, since you know where you are going.

An example of hand drawn wireframe done simultaneously during a meeting.

And the Illustrator version for the team, showing the navigation flow /process between the pages. This is very usefull to know embrace the different steps of an online inscription at once.

Inspiration

There are many websites aiming at teenagers, like video games, clothes or gear brands dedicated to surfing, snowboarding, extreme sports, comics and mangas, mobile phones, scooters, etc. Below a quick collage for inspiration.

KonfaStokholm had printed a very lively leaflet, with lots of abstract shapes, rainbow, stars, flowers,  exploding in all kind of directions.

Graphic design

I really wanted to reuse this idea of explosion of colours and shapes, since:

• It is coherent with the client´s ongoing print communication

• It portrays inspiration, creativity, freedom which are important values for young people.

In Photoshop, I started playing around with my brushes and layer mode, to change the intensity of lights. I also used my vector collection to ad waves and threads. After a couple of hours, I finally had a result that was eye-catching.

Adding more “fun” to the design

The team got really enthusiastic about the visual design and the client too, so the idea was to go further with the concept and transpose it to other parts of the site, like in the footer, on the error page, or on the profile page and here and there as you can see below.

The title typefont was also changed, according to the client´s feedback, to go to the regular Aaschen-Shop bold, and not the curly one.

Flowers and bright colors were used to guide the eyes all along the selection and registering process, to avoid a dull page.

Another idea we discussed together with the developpers was to use expanding / retracting effect to show the form currently being used and hide the inactive ones, to avoid long and user unfriendly pages.

You can also notice that the orange title indicate the active form, while the inactive ones stay grey, to focus attention.

After a few adjustments with the client, we had our grafic design ready to go :

You can see also see it live or online

Thank you for reading this post and stay tuned for more design tips and case studies.

Related posts:

1. Webdesign case study #03
2. Inexor Case study
3. A webdesign based on a magazine
4. Logo Case study #01
5. Inexor integration version 2 is live !

Tags: Webbdesign Case Study

This entry was posted on Wednesday, December 9th, 2009 at 16:49 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.