A interactive demo showing the ideal online dutch public library

Employer: Info.nl
Year: 2009
Role: creative lead, interaction designer
Deliverables: concept, storyboard, personas, wireframes, functional description
Methods: sketching, brainstorms with client, in-depth interviews with users and their kids

The goal
Showing the potential of a integrated and strongly personal online library platform

Research
The current online exposure of the dutch public library is differentiated and not well integrated. Our mission was to show the ideal online library. ecosystem. To do this we first asked ourselves: what is the state of the information seeking society. What’s going on? How are adults and youngsters getting their information? We combined sharp analysis and research done by the VOB itself together with our in-depth interviews. We questioned singles, parents, their kids and elderly people. This gave us a useful insights we used during concepting, designing and building the final demo.

Sketching the flow of the use cases

The demo
We ended up with a interactive Flash demo illustrating the use cases of our two persona’s: Casper (11) and Vera (59). Both using the library in their own context, with their own purposes and in their own way. The demo demonstrates a future ecosystem in which all online library platforms keep their identity but at the same time are part of a bigger integrated system. A system in which the whole gets better by individual effort. Simple said: stuff you can do on library website X, can be done on library website Y, but with other contextual features and content. On top of that functionality, appearance and content is highly personalized. For example: Vera (59) loves to visit the local library 2 times a week. She is likely to suffer from reduced sight. She has grand kids and she is going to Italy this summer. She scarcely goes online, but when she does, she visits the site of her public library. We offer her a easy to read and use interface, features and books for her and her grand kids, her Italy ‘lists’ and so on. Casper (11) loves the popular Dutch social network Hyves. There he wants his widgets, his alerts and there he meets his friends. 50% of his online time he spends on his iPhone. We offer him site features and apps that help him do his school work, meet his friends and show off with cool stuff/books he read.

The demo is now [2010] being used as a conceptual basis in multiple library projects, executed by Info.nl

Visual design of the personalizing header

Multi dimensional project for international market maker All Options

Employer: Info.nl
Year: 2009
Role: creative lead, interaction designer
Deliverables: site concept, game concept, wireframes, process flows, IxD
Methods: sketching, in depth-interviews with target audience, brainstorms with client

The goals
Being one of three major Dutch players in market making, All Options set 2 goals:
1. Reinforce their (online) position amongst the competitors.
2. Recruit the smartest young eager traders

Corporate site
We held in-depth interviews with employees and the target audience familiar with All Options. Conclusion: the perception of All Options matched the proposition. People already perceived the company as the more personal, informal, transparant and rapid growing Dutch market maker. However, the current site didn’t reflect these values. We inventoried questions and needs of the different types of visitors. We prioritized stuff. In short: we totally redesigned the site. More white space, more adrenaline-imagery, more people. But also: clear structure and circle surfing between the corporate site and the recruitment site…
> Visit alloptions-international.com

The homepage breathing the All Options DNA

Recruitment site + game
There was this recruitment problem. We learned it’s hard to find those ultra bright maths/economy/econometric students. And even harder: find and attract the traders within their personalities. As the Dutch say: All Options and their competitors are all phishing in the same pond. Together with the client we came up with Strike!: a cool game that tests if you have the skills of a trader. The result was a 5 round trembling game that has a lot in common with real life trading. There’s time pressure, calculation, knowledge and focus. To boost the viral effect we linked the game to Twitter and Facebook. Facebook connect Players. The stats: 800 players within 2 weeks, some amazing high scores and….a top winner who was immediately recruited by All Options and who is now working as a trader in the Amsterdam Office.
> Read more about the game Strike!
> Play the game Strike! here

The recruitment site + Strike! game, testing the user's trading skills

Interactive company movie
All Options is known as the informal market maker company. To emphasize that, to tell the company story and to introduce the people of All Options we made a All Options ‘clickfilm’. The clickfilm engine is developed by Info.nl and facilitates a fully interactive movie with in-video crosslinking and personalized view-paths. The movie offers a great look into All Option’s people and the fascinating location of their Amsterdam Office ‘Beursplein 5′.
> Watch the All Options interactive movie here

Interactive movie - meet the people of All Options

All Options – Strike! – a challenging game that tests your trading skills

Employer: Info.nl
Year: 2009
Role: creative lead, interaction designer
Deliverables: game concept, IxD
Methods: brainstom sessions with client and target groups, sketching

The goal
Create brand awareness amongst potentially new traders and test their trader skills.

The research & the game
Obviously we needed to find out what a trader does in his job. What does he do all day while staring at 3 or 4 screens filled with numbers? What makes a good trader? What makes them tick? What are the traders like at All Options? To find out we held dozens of interviews with junior, medior and senior traders as well as trader trainees. These sessions helped us identifying five skills a potential trader must possess: mental speed, superb memory, basic trading knowledge, the right attitude and great numeracy. There you have it. Next step was to translate these five to game play elements. One important thing: the game had to be one hard son of a b**** to play. Because we were dealing with smart (mostly) fellas here. After testing the first release amongst traders we heard it was too simple. No problem: we auto generated harder math questions and speeded things up a bit. The result is a game I can’t play myself but which has received great critics from the target audience.

Facebook integration
To boost the viral effect and make life easier for our players, we used Facebook Connect to challenge your friends. Posting scores to Facebook walls, adding extra features when doing so and showing your friends-ranking greatly helped to raise Strike! awareness around the web. And of course adding a ‘Post to Twitter’ option wasn’t a bad decision either.

A cool fact: the winner of the first prize period had such a outstanding high sore, All Options offered him a job. The dude is now a trader at All Options.

Visual design

> Play the All Options game Strike!

Vandaag in Den haag, a online magazine giving daily agenda highlights of the Dutch Parliament and the cabinet ministers

Employer: Info.nl
Year: 2009
Role: interaction designer
Deliverables: Axure prototype, wireframes
Methods: brainstom sessions with client

The goal
Offering highlights of the daily agenda of The Hague, the Dutch political centre.

The information covers today’s cabinet meetings, working visits of ministers, presented rapports and the agendas of the House of Representatives (‘Tweede Kamer’) and Senate (‘Eerste Kamer’).

The right format
First we had some sessions with the client, discussing the available content. What were we offering the users and what would users be looking for? Since SDU is a publisher familiar with governmental releases, they had this information about their audience. The challenge was to plot the daily data in a comprehensive interface, taking all levels of perceived relevance into account. One wish of the SDU site-editors was to be able to quickly move around items between the different levels of relevancy. Looking at the needs and nature of the content, we chose WordPress for this project. The result is a bright, fast scanable/readable magazine.

Wireframes

> Visit www.vandaagindenhaag.nl

A product selector tool for Robeco’s ‘Zakelijke Zekerheid’ that answers the need for financial certainty

Employer: Info.nl
Year: 2009
Role: creative lead, interaction designer
Deliverables: concept, sketches
Methods: sketching, brainstom sessions with product owners and marketing managers

The goal
Give people fast and fun insight in Robeco’s products that that fit their personal need for financial certainty.

Sketching and thinking out loud
Together with the client we first analyzed the products we were talking about. What were the exact specs? How did these products differ in terms of certainty for the target audience? Which ‘certainty’ dimensions could we identify? We needed the answers to design a product selector that actually makes sense. To both the business and the user. We came up with two dimensions: return on interest and withdrawal hold-time. To come up with a intuitive interface we started playing around with these dimensions.

Many sketches, brainstorms and discussions later we agreed upon the best interface. Click the image below to see the process and results.

Sketching interface ideas

> View Robeco’s Zakelijke Zekerheid page

From offline to online: the account registration process of dutch investment banker Robeco

Employer: Info.nl
Year: 2009
Role: creative lead, interaction designer
Deliverables: concept, wireframes, IxD
Methods: sketching, requirement sessions with the client’s technical and business stakeholders

The goal
Increase registration conversion by making it a easy and fast online process.

Research
Online forms are getting more intuitive and smarter. Before designing the registration flow and steps, we did a small inventory of the best form practices out there. We presented the possibilities, pros and cons to the client and defined interaction principles.

The registration
In close collaboration with the client we designed the needed registration steps. We analyzed the offline form, did some ‘CSI investigation’ on every single field and delivered the interaction and visual design. Please note: for unknown reasons the current online form is different then the original visual design.

Wireframe

> View Robeco’s registration process

Showcasing ‘Talent Act’: the first online role play game. For the Human Company

Employer: Info.nl
Year: 2009
Role: creative lead, interaction designer
Deliverables: concept, storyboard, wireframes, IxD
Methods: Undergoing real role plays for good reference, sketching, brainstorms with client

The goal
Showing the potential of a online role play tool for training and recruitment purposes.

The demo
In the traditional role play the participant is put in a physical setting where he has to deal with real people (actors). So our client asked us to create a online role play mechanism which pretty much resembles a real role play. In order to fully understand the question we (our developers, our project manager and myself) underwent a real role play ourselves. This confronting situation learned us important things about the user experience we had to shape. Amongst other things we needed to create:

• a real human feel to the interaction
• a sense of pressure to react in the ‘game’
• subtle audible and visual cues to drive the reacting motivation

The final demo we delivered satisfied us, the client and the people we tested it on. We used real video combined with Flash Papervision for a living and quickly adaptable contextual surrounding. Furthermore, a solid script, personal flows and perfect interaction timings did the trick.

Sketching the admin interface

A new B2B site for recruiter Yacht showing rich cases and knowledge blogs

Employer: Info.nl
Year: 2010
Role: creative lead, interaction designer
Deliverables: concept, sketches
Methods: brainstorm sessions with the team and the client

The goal
Increasing contact-conversion by clearly communicating the new proposition: Yacht delivers result driven solutions.

Yacht’s usp
While other recruiters just outsource professionals, Yacht really makes a difference. Together with their clients Yacht analyzes the problem at hand. Then, a (team of) professional(s) is put together that know the branche, the business, the problem and each other. Our challenge was to come up with a site-concept that breathes this proposition. As with all concepts some ideas are harder to realize and maintain then others. Key is to go for the idea that will kick ass (read: helps, persuades the user) and is feasible at the same time. So we held workshop sessions with the client to pitch and discuss our ideas. Several Yacht acountmanagers, with daily client contact, discussed and helped us shape the best concept.

The result
To show the power of Yacht we decided we needed rich cases. Personal and factual cases that explain how Yacht helps clients. On top of that we introduced Yacht knowledge blogs. For fast and easy maintenance we chose to build the site in WordPress.

Visual design

A storytelling new site for Dutch hospital Westfriesgasthuis

Employer: Info.nl
Year: 2008/2009
Role: creative lead, interaction designer
Deliverables: concept, Axure prototype, wireframes, IxD
Methods: sketching, brainstorms with client, interviews with users and hospital employees

The goals

- Offering the patients, their visitors and the medical professionals of the Westfriesgasthuis a clear, informative site.
- Give the Westfriesgasthuis an online identity

Research
What information do (soon to be) patients look for? What is their mindstate? What does a potential, orientating patient wants to know? When visiting someone in the hospital, where is your mind at? Before our sketch pens hit the paper and far before starting op our wireframing/prototyping software, we asked ourselves these questions. Plus we asked them to our colleagues, friends and family.

Also, we went looking for that one thing that makes the Westfriesgasthuis special. It turned out to be that warm, personal ‘Westfriese’ mentality and circles. Yes round circles. They form the architectural concept for the hospital. And we walked through the hospital. We talked to doctors and staff, patients and cleaners. When we fully understood and felt the Westfriesgasthuis vibe, we started designing.

The result
In Axure I protoyped the entire website. Presented and finetuned it several times until it was good. This resulted in a site where the story is key. On top of the factual, structured and clear information we added a personal layer. The Westfriesgasthuis story is now told by imagery and real personal experiences of the people directly related to the hospital.

Visual design - homepage

> Visit www.westfriesgasthuis.nl

Heineken – Know the Signs – a Facebook game that aims to encourage more responsible drinking habits

Employer: LaComunidad
Year: 2008
Role: interaction designer
Deliverables: game concept, game process flow, wireframes, IxD
Methods: brainstorm sessions with the team and the client

The goal
Create a viral effect within Facebook to boost the ‘Know the Signs’ campaign.

Know the Signs
Through global research Heineken has learnt that people tend to transform into one of 5 embarrassing characters when they have one too many drinks on a night out. And although people might reluctantly admit it for themselves, they definitely see the transformation in their friends. These embarrassing characters have been identified as: The Crier, The Fighter, The Sleeper, The Exhibitionist and The Groper. These 5 characters were the central theme in the global campaign consisting of a site+game, games on popular social networks like Facebook, MySpace, Netlog and Hyves, an Oddcast application, a mobile site, online advertising and In-bar promotion. At LaComunidad we designed the Facebook game.

Facebook game
Within the game the player can watch Heineken’s short movies in which the transformation of the characters is shown. Next step is to match each of your Facebook friends with one of these embarrassing characters. Your friends receive messages like ‘Hi Jonathan, I bumped into this Know The Signs campaign. It’s about what people become after one too many drinks. Here it comes: I think you become a Sleeper after one too many drinks!. Let me know if I’m correct or not!’.

Visual design