Task analysis


Used Media

In order to make proper task analyses, we discussed which media we use in project “Treinkonijn”. The resulting list, with a short explanation to each individual medium, can be found below. All media have been categorized in Printed matter, Digital matter and Physical matter.   

Printed matter

We use two different poster designs. One displays our logo and the website-url www.treinkonijn.nl. The second displays a photograph of the construction area, a fictitious bunny and fictitious commuters all photoshopped together. From now on we will refer to the first poster as Poster Awareness and to the second poster as Poster Photoshoot.   

A small fold-in flyer displaying our logo and website-url can be found inside the Metro and Spits.   

Placarded train
The trains passing by at Delft Central Station are placarded with our logo and website-url.   

Placarded bus
The buses in Delft are placarded with our logo and website-url.   

Physical matter

The rabbits have different sizes, shapes, materials and colours. On the rabbit the website-url can be found if you are really close.   

The viewpoint appears when the rabbit has left displaying our logo, the website-url, taken pictures from the website, posted comments from the website.   

Digital matter

A camera can be both a low quality phone camera and a high quality professional camera or anything in between.   

For smartphone users applications need to be developed.   

The website consists of several pages through which you will also cross, mainly being:  

  1. Finding information
  2. Uploading photos
  3. Discussing with other commuters



Because several media have the same function we will cluster them together in awareness, temptation and participation. The first two media are rather passive, whereas the other media require an active effort and input from participants.   


Media: poster awareness, flyer, placarded train, placarded bus Users should be able to…
… Recognize and remember the logo
… Read http://www.treinkonijn.nl  


Medium: poster photoshoot Users should be able to…
… Be intrigued
… Be tempted to copy  

 Medium: rabbit  

 Users should be able to…
… Recognize the rabbit
… Be intrigued
… Be enjoyed
… Be drawn closer
… Interact with it
… Read http://www.treinkonijn.nl  

Medium: viewpoint Users should be able to…
… Have a good view on the changes
… Read http://www.treinkonijn.nl
… View a photograph of the disappeared rabbit made by another participant
… Read a comment of the disappeared rabbit made by another participant
… Take a picture through the ‘Kodak-hole’  


Medium: camera Users should be able to…
… Take a picture of the rabbit and themselves
… Connect the camera to a facility with an Intenetconnection
… Take a picture of the changes  

Medium: smartphone Users should be able to…
… Take a picture of the rabbit
… Visit the website
… Log in
… Download an application
… View uploaded pictures
… View archives
… Upload pictures
… Comment on rabbits
… Comment on pictures  

Medium: website Users should be able to…
… Recognize and/or remember the logo
… Find information concerning…
… the meaning of the rabbits
… the possibility to take pictures
… the possibility to upload pictures
… the possibility to comment
… the possibility and advantages to register
… View uploaded pictures
… View archive
… Comment on rabbits (and register at the same time)
… Comment on pictures (and register at the same time)
… Upload pictures (and register at the same time)
… Add a title to their pictures
… Add a discription to their pictures
… Check which rabbit they found through an interactive map
… Hyperlink to http://www.spoorzonedelft.nl
… Register (name, e-mail and password)  

Registered users should be able to…
… Receive e-mail updates on rabbits/pictures/comments
… Get a notification when their picture/comment will be displayed on a viewpoint
… Log in and then…
… Grade pictures
… See quickly what they haven’t seen before
… Modify their profile (name, e-mail, password, relation to spoorzonedelft, address, age)
… Review their personal collection
… Edit/remove their photos
… Edit/remove their comments

Task flow








Here is an overview of the wireframe of the treinkonijn.nl website we’re going to build. Download the PDF file for a high resolution version. 

Download wireframe PDF. 

Detailed Visual Design Examples


Here is an overview of the website pages. The orange bar at the top and the grey bars in between are only for illustration purposes, these will not  be visible in the real website. As you might have noticed, we made some minor changes from the wireframe overview. The biggest change is the navigation bar at the top which has moved to the navigation area on the left.

iPhone application

For the lucky iPhone users, we have an iPhone application which allows you to perform the most important functions from the site. You can log-in, view photo’s, view the message threads, upload pictures and place comments. The visual style is more or less the same as the website mixed with some standard iPhone styling.


There will also be an adaptation of the site for people with smartphones. This can be found at http://m.treinkonijn.nl. The iPod application users will be people who already have visited the website and know about the project. Explanation is not needed there, but it is needed with the smartphone users. This allows people who see the poster or flyer to go the mobile site and immediately read about the project and get involved. Of course the iPhone users can also go to this mobile website. The visual styling is more or less the same as the iPhone, but designed to work on different screen sizes and different mobile browsers.

Movie storyboard

Download the storyboard .PDF with the link below.

0 Responses to “Detailed Design”

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

May 2017
« Jan    

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3 other followers

%d bloggers like this: