SIGURFREYR.COM: E-Magazine, Video-Gallery, Forum, Blog & Survey

SIGURFREYR.COM: E-MAGAZINE, VIDEO-GALLERY, FORUM, BLOG

& SURVEY

2010 Students: Anna

Jakobsdóttir, Friðjón Veigar Unnarsson, Guðmundur Sigurfreyr, Johnny Lund-Hansen and Saikou Marong Teachers: Anni Grøndal, Lars Haahr, Morten Jul Petersen and Trine Falben Larsen

[3RD SEMESTER, MULTI MEDIA DESIGN PROJECT, NOMA] The task is to construct strategic and tactical ways for Sigurfreyr.com to create an interactive relationship to it’s target audience. Develop four fully functional digital multi media productions. Upload the productions to a server and test them. Here is a documentation of the development, the work flow and ingredients of these four databases.

June 1, 2010 [3RD SEMESTER, MULTI MEDIA DESIGN PROJECT, NOMA]

2 | Students: Anna Jakobsdóttir, Friðjón Veigar Unnarsson, Guðmundur Sigurfreyr, Johnny Lund-Hansen and Saikou Marong

TABLE OF CONTENTS

Databases .............................................................................................................................. 4

Introduction ........................................................................................................................... 4

Background of the problem ........................................................................................................... 4

Problem definition ......................................................................................................................... 6

The Medium Used .......................................................................................................................... 6

Delimitation .................................................................................................................................... 6

Report Outline ................................................................................................................................ 7

Model and Methods Used ..................................................................................................... 7

Methods Used .............................................................................................................................. 10

Defining the User Group ..................................................................................................... 10

Communication Strategy ..................................................................................................... 12

Jan Krag Jacobsen's 24 Questions ................................................................................................ 13

Social Media Marketing ................................................................................................................ 14

Facebook and Twitter ................................................................................................................... 15

Blog ............................................................................................................................................... 17

Design and User Interface ................................................................................................... 18

Themes and Web 2.0 Design ........................................................................................................ 18

Repeated Elements ...................................................................................................................... 23

Gravatar ....................................................................................................................... 23

RSS (Real Simple Syndicate)......................................................................................... 24

Links to Sigurfreyr.com sites ........................................................................................ 25

Social Media Buttons ................................................................................................... 25

Favicon ......................................................................................................................... 26

Logo and Psychology of Color ...................................................................................................... 26

Interaction: Plugins and Widgets ........................................................................................ 28

Akismet ......................................................................................................................................... 28

Google Analytics for WordPress ................................................................................................... 29

Yet Another Related Post Plugin (YARPP) .................................................................................... 29



SexyBookmarks ............................................................................................................................ 30

All in One SEO Pack ...................................................................................................................... 30

Hyper Cache ................................................................................................................................. 31

Simple:Press Forum Plugin ........................................................................................................... 32

ISS Survey ............................................................................................................................. 34

What is LimeSurvey? .................................................................................................................... 34

Token system ............................................................................................................................... 35

LimeSurvey User Interface ........................................................................................................... 35

Logo, Colors, Fonts ....................................................................................................................... 36

The Logo Design ........................................................................................................................... 36

The survey layout design .............................................................................................................. 37

Applying the layout to LimeSurvey. ............................................................................................. 37

Videos as Good User Experience ......................................................................................... 38

Video ............................................................................................................................................ 39

Inspiration .................................................................................................................................... 39

Concept ........................................................................................................................................ 40

Music ............................................................................................................................................ 40

Intro .............................................................................................................................................. 40

Narrator ........................................................................................................................................ 41

Text ............................................................................................................................................... 41

Color ............................................................................................................................................. 42

Kitty Kat ........................................................................................................................................ 42

Emotional design .......................................................................................................................... 43

Camtasia: Our Working Tool ........................................................................................................ 43

Business strategy ................................................................................................................. 44

Conclusion ........................................................................................................................... 45

References ........................................................................................................................... 46

Books ............................................................................................................................................ 46

Internet ........................................................................................................................................ 46



Databases

E-MAGAZINE: Greinasafn Sigurfreys (Sigurfreys Articles):

http://www.sigurfreyr.com/nyrvefur

VIDEO-GALLERY: Netvarp Sigurfreys (Sigurfreys Videos): http://netvarp.sigurfreyr.com

FORUM & BLOG: Spjallsvæði Sigurfreys (Sigurfreys Forum): http://spjall.sigurfreyr.com

SURVEY: ISS Survey: http://sigurfreyr.com/iss

Introduction

We have chosen Sigurfreyr.com, an online company one group member wants to start

up, as our exam project task. This involves a redesign of existing Icelandic website

Greinasafn Sigurfreys (Sigurfreys Articles) that was launched (peculiarly enough) on 11.

September 2001 (9/11). It has published over one hundred articles on various topics,

ranging from politics, psychology, pedagogy, judicial matters, history, to drugs and the

drug war. The website (http://www.sigurfreyr.com) was coded in basic HTML and CSS at

the time Netscape was the major browser. It has not been updated (or any content

added) now for more then three years.

Background of the problem Our task is to bring Sigurfreyr.com back to life, so to speak, in accordance with the

technological web development that has occurred since it’s launch. Also come up with

strategically and tactical ways to monetize it. Monetization means simply implementing

methods of making money from the content it produces. Some kind of financial income is

necessary in order to sustain a website if it is to renew it’s content on a regular basis.

Sigurfreyr.com is the only website in Iceland that has concerned itself with drug policy.

When people talk about “drugs”, they are generally referring to illegal substances such as

marijuana, cocaine, amphetamine, LSD and heroin. These are not the only drugs that

http://www.sigurfreyr.com/nyrvefur�

http://netvarp.sigurfreyr.com/�

http://spjall.sigurfreyr.com/�

http://sigurfreyr.com/iss�

http://www.sigurfreyr.com/�



make you high. Alcohol, cigarettes and many substances you get from the doctor (like

sleeping pills) cause intoxication of some sort. The fact that one drug or another is illegal

does not mean one is better or worse for you. All of them temporarily change the way

you perceive things and the way you think.

Some people will tell you that drugs feel good, and that’s why they use them. But drugs

are not always fun. Cocaine and amphetamine speed up your heart. LSD can make you

feel disoriented. Alcohol intoxication impairs driving and can lead to violence. Cigarette

smoking leads to addiction and sometimes lung cancer. People die sometime suddenly

from taking heroin. Marijuana does not often lead to physical dependence, but it does

alter the way people think, behave and react.

Drug taking, of one kind or another, has become integral part of human society. Probably

always has. The question is what are we going to do about it? There are two basic ways

people want to respond to what has been termed “the drug problem” of our times.

Prohibition and severe punishment for violation of using or selling the drugs that are

illegal (Drug War American style). Or some kind of harm reduction (European approach)

or even legalization of the substance in question since the present drug war doesn´t seem

to be working. Another respond is of course just to look the other way. Not concern our

self with this sticky issue. Drugs and drug use are in many ways the great taboo of our

times (just like sex was during the Victorian times). So why bother?

Sigurfreyr.com view is that such “look the other way” approach can have serious

consequences in the long run. We just have to take a look at what is happening in the

United States. Every year about 800.000 people are being arrested for possession of

marijuana. They have the largest jail population behind bars in the world. About

2.000.000 people in jail, about 25% for drug violations. Americans are serious about their

“drug war”. If their kids are caught, they can be arrested, expelled from school, barred

from playing sports, lose their driver’s license, denied a college loan and/or rejected from

college. It has actually contributed to a high school drop-out rate of 30% in the country. A

variety of methods, from scare tactics to resistance techniques to zero-tolerance policies



and random drug testing have been used to try to persuade, coax and force young people

to abstain. Despite this United States has the greatest instance of drug use in the world.1

Problem definition

Sigurfreyr.com wants’ to prevent Iceland from following the same path.

How do we create an online multimedia production that: 1) Draws solid traffic from our

target audience, 2) Encourages involvement from it’s readers, 3) Is monetize able, i.e. can

create income, and 4) Is inexpensive to implement and easy to update.

The Medium Used

Our idea from the very start was to use WordPress in our digital

multimeda production. WordPress is an open source Content Management

System (CMS) often used as a blog publishing application. It is powered by

PHP and MySQL on the server side and XHTML and CSS on the client side.

WordPress is a templating system. There are numerous free themes you can download

and install allowing you to change the look of your blog. There are also thousands of

plugins and widgets that provide extra functionality.

Since it is open-source the PHP, CSS and XHTML code in themes, plugins and widgets can

be edited for more advanced customizations. WordPress also features integrated link

management; search engine-friendly, clean permalink structure; the ability to assign

nested, multiple categories to articles; and support for tagging of posts and articles. This

is very important for the user or reader when it comes to finding the particular content

he/she is looking for.

Delimitation

At first we planned to have the whole web site in Icelandic since that is obviously the

target audience Sigurfreyr.com is aiming at. Our student group consist of people who will

1 See Drug War Facts, http://www.drugwarfacts.org/cms/



be working in the Danish, Finnish or Icelandic labour market. It is therefore important for

all of us to learn how to localize WordPress, it’s widgets and plugins to our own language.

This will be an important learning experience for us since most CMS are developed by

English speaking programmers for English speaking markets. Localization of the language

is a necessary skill. The teachers pointed however out that this would make evaluation of

our production at NoMA more difficult. So we changed our plan even though we made a

study of the issue and know how to do it.

We also had planned to create a Flash banner for the website. Even though Flash is not

Search Engine Optimization (SEO) friendly2

we still think it has future in web site design.

But we didn´t consider it important enough compared to other tasks we had to fulfill in

the limited time we had. So that was also put on ice.

Report Outline Rest of the report will be structured as follows: 1. Model and Methods Used, 2. Definition

of User Groups, 3. Communication Strategy, 4. Design and Interface, 5. Interaction:

Plugins and Widgets 6. ISS Survey, 7. Videos as Good User Experience, 8. Business

Strategy, 9. Conclusion, 10. References.

Model and Methods Used

In every web and software development a structured, coherent

workflow is necessary. Many working frameworks have been

developed, the Stepping Stone method, the Waterfall method,

Plane methodology etc. to name a few. In our first semester at

NoMA we were introduced to the Core Process Workflow. We decided to adhere to the

Core Process Workflow in the development of Sigurfreyr.com to give our work process

necessary structure and keep it on track. We also incorporated the Core Process in our

project time plan with descriptions of activities and milestones.3

2 GOTO, Kelly and Emily COTLER. 2005. Web Redesign, p. 193–194.

3 For Core Process elements we included in our timeplan, see Timeplan.doc in CD.



Core Process Workflow is a well-defined plan to website design and redesign. It is divided

in to five distinct phases:

1. Defining the project; research and information gathering. At this stage a project

plan and timetable is created . Site goals are determined. This is considered the

most important phase of the Core Process and can be time consuming. In our case

we had to research for the best themes, plugins and widgets to use. It is very

important to choose well because even though a theme might look beautiful at

first glance it can be faulted in practice. Many plugins are also not updated and

best is to use the ones that have been around for a considerable length of time

and are supported by other plugins. Some of the ones we tried out actually

crashed the whole system because they conflicted with other more important

plugins used (“PHP Conflict”). Other plugins and widgets are basically coded badly

in such a way it loads it’s code at all times instead of as and when it is needed.

2. Developing site structure. This phase typically involves organizing the structure of

the web site. Site mapping and wire framing are important elements. When it

comes to WordPress this stage is taken care of in many cases by the theme or

themes you use. However at this stage in our work we had to decide on the many

elements to use. Among them the content in the navigation, sidebar, footer etc.

Also the plugins we used to interact with the readers, such as Contact Form, RSS

subscriptions, Social Media Plugins (Twitter, Facebook and other sharing

functionality).

3. Designing visual interface. At this stage in our workflow we did all the necessary

changes in the themes we had chosen, in some case changes in the plugins and

widgets functions also. This involved both changing image elements (.gif, .png)

when it came to color as well as making changes in the basic layout or structure of

the theme. For example making the header bigger, taking it ,,out of the box” in

accordance with Web 2.0 style of design etc. We also had to do more changes in

the CSS and even the PHP code then we anticipated. Even though Wordpress.org

is fond of saying that it´s users don´t need any prior knowledge in PHP, CSS or

XHTML this might be true for amateurs but does certainly not apply to multi

media designers. Here Anni’s teaching on CSS, XHTML and PHP certainly came in



handy. Since WordPress was originally developed as a journal (with blog-style

structure) but is increasingly used as CMS (page-based structure) many of it’s

standard features don´t apply. One example. It is very common to see something

like: ”Posted by admin April 4th 2010”. When you see this again and again for each

new post in a blog written by one and the same person it becomes rather

pointless. In order to change this you will need to do it in several PHP files and be

able to recognize the right code. This stage involves also of course logo design and

other image work. It has also a lot to do with taking in to consideration user

experience design (UX design).

4. Building and integrating is the next phase of the Core Process. At this stage we

concentrated on populating the pages. This involves also the frequently forgotten

,,invisible content” – ALT, META and TITLE tags. It also involved internal testing.

Internal testing means for example trying it out on different computer screen

sizes, web browser compliance (working around the infamous Internet Explorer

Creep) and general fine-tuning that assures everything works as it should.

5. Delivering or launching is the last phase of the Core Process. This means for

example uploading the production to a server. In our case the websites were

actually developed from the start on the server. Or almost so. At the very

beginning we set up WordPress and a MySQL database on our laptops hard disk

(with XAMPP) but soon found out that doing that barred the group members from

seeing the development of the production. At this stage one of the most

important development factor was SEO (Search Engine Optimization). Here we did

our user testing. If not fixed by now this is also the time to resolve all issues that

might slow down the uploading of the website. Uploading time is very important.

It has not only to do with positive user experience (or lack of it) but it also SEO.

Google has recently announced that site speed will figure in it’s ranking.4

4 “Site Speed is Now a Ranking Factor“, http://yoast.com/site-speed-ranking-factor/



Methods Used

When it came to choosing themes and layout styles, how we represented the videos and

the written content, and generally how to a find effective solutions to our problems we

used the following methods: • Mind mapping • Jan K. Jacobsens 24 Questions • Eye

Tracking Research • CRAP Methodology • SWOT Analysis • Social Media Marketing • User

Experience Design (UX design) and • Concept and User Testing.

Defining the User Group

When we were viewing the lessons that Trine taught us this semester

about user research, personas and user experience design we came

across a study about what people are actually doing online. This

study was done in the United States, but we think it is safe to assume

that similar results would be with internet users in any other parts of

the world.5

1. Creators who publish web pages, write blogs and upload videos to sites like

YouTube.

The study divided users in to six groups according to how they spent their

time online:

2. Critics who comment on blogs and post ratings and reviews. They are also active

on Forums, where they exchange ideas and discuss various topics.

3. Collectors who use Really Simple Syndication (RSS) and tag web pages to gather

information.

4. Joiners who use social networking sites like Facebook and MySpace.

5. Spectators who read blogs, watch videos and listen to podcasts.

6. Inactives who are online but don´t yet participate in any form of social media.

These type of users are found in all age groups, but the most active users are in the age

group 17-26. This is the same age group that you would expect to be interested in a

change of drug policy since they are the most common victims of the drug war. The age

group 27-35 are also generally active online, specially people with higher education,

5 “What are people doing online“, http://www.businessweek.com/magazine/content/07_24/b4038405.htm



professionals and business owners. They are exactly the same people that you can expect

to have some influence when it comes to change in social policy.

This study shaped the direction we took with our multimedia production. We decided to

cater to all these six different types of online users. The best way to do that was to

produce an E-Magazine (Greinasafn Sigurfreys) with a comment system, Video-Gallery

(Netvarp Sigurfreys) with rating system and a Blog and Forum combined in one (Netvarp

Sigurfreys). These kind of web applications fit WordPress perfectly. We would make sure

that critics could express their views, collectors gather information with RSS, joiners be

involved in social networking like Facebook and Twitter and spectators provided with the

opportunity to watch video.

These three websites would also link to each other, have

a common thread (same sidebar elements, word mark

logo with same font etc.) and most importantly be

populated with plentiful opportunity for social

bookmarking and sharing (“Share this”, “Subscribe to”,

“Connect with”, “I like” etc.). To encourage and help

inactives to use social media we decided to have video

tutorials in Help section on how to use the various

functions of the websites (how to use a Gravatar, RSS, how to Share content etc.). There

would also be a written description for the same purpose, for those with little band-with

and those that simply prefer to read the instructions. All this should improve user

experience of Sigurfreyr.com.

When doing SWOT-Analysis6

6 SWOT Analysis is a strategic planning model that evaluates the strengths, weaknesses, opportunities and threats involved in a project, a product or a business venture.

we realized Sigurfreyr.com could not overlook the fact that

there are people who abuse drugs and get in to serious problems because they can not

control their drug consumption. They not only hurt themselves but can do serious

damage to others. This of course applies to legal drugs, like alcohol and sedatives, as well

as the ones that are prohibited today. Since Sigurfreyr.com wants a drug policy based on



reason, compassion and justice (as the respected Drug Policy Alliance7

The Health Ministry of Iceland issued a report some years ago about drug use and abuse

among young people (alcohol, cigarettes, cannabis and amphetamine mostly) and

concluded that the most common element among youngster that get into trouble

because of their drug consumption was lack of positive relationship with their parents

or/and other grown ups.

advocates) it can

not overlook this unfortunate group of people.

This study found also out that youth from broken homes, and who are nevertheless able

to use alcohol and other drugs responsibly, participate in some competitive sports. It has

been suggested that by doing so they can vent (or express) their pent up aggression

towards their parents, society etc. in a constructive manner through “militant” sport,

instead of turning it against themselves.

Sigurfreyr.com wants to try out this hypothesis, and if it turns out to be true found ÍSS

(Íslenska sjálfsvarnarsveitin; Icelandic Defence Brigade ). In order to explore this

hypothesis and generally see if there is any interest for this kind of organization in Iceland

the third database (LimeSurvey) was added to our multimedia production. It’s main

purpose will be to run surveys and when all the data has been collected it can be used as

a foundation for deciding the next step. There is also another supportive element in the

ISS Survey. Since the people who participate in the survey have to register their e-mail

before answering the questionnaire, it has the extra bonus of collecting e-mails which is

an important part of the business strategy of Sigurfreyr.com.

Communication Strategy

In order to devise an effectual communication strategy we used Jan Krag Jacobsen's 24

Questions as an analytical tool.

7 See Drug Policy Alliance, http://www.drugpolicy.org.



Jan Krag Jacobsen's 24 Questions

Jan Krag Jacobsen's 24 Questions is based on a famous formula coined by the sociologist

Harold Lasswell: "Who says what, in which channel, to whom, with which effect?" Jan

Krag Jacobsen's framework for planned communication helps define your target group

accurately, keeps the message lucid and prevents it from being decoded erroneously. We

formulated answers to six of Jan Krag's most imported questions.8

The target group of Sigurfreyr.com are 1) people (laymen as well as professionals) who

are critical of the present drug policy, 2) young people who want to see a change in the

stigma surrounding illegal drug use and 3) people who use cannabis (hashish, marijuana)

or other illegal drugs (MDMA, amphetamine) as self-medication and want to see it

become part of legal pharmacopoeia again.

The message to our target group is: ”Drug prohibition, zero-tolerance policies and war

against people who use illegal drugs is not working and we should try other approaches.”

The medium used is a E-Magazine (i.e. Sigurfreys Articles which is collection of articles,

sometimes scholarly), Video-Gallery (documentaries with short articles pertaining to their

content) and finally a Forum (online discussion about drug policy) and a Blog with short

comments, preferably updated daily.

Added to this we will use the social media networks Twitter and Sigurfreyr.com Facebook

Fan Page. The purpose of Sigurfreyr.com content is to inform and promote discussion

about drug policy and awareness of the consequence of the drug war. The intended effect

of the website is to have our target group demand change in present drug policy which is

based on punishment and marginalizes drug users instead of helping them. The sender is

Sigurfreyr.com, the empathize should be on the brand name Sigurfreyr.com, not on the

author himself, or even individual parts Greinasafn (Articles), Netvarp (Videos),

Spjallsvæði (Forum), ISS (Survey) etc.

8 JACOBSEN, Jan Krag. 2009. 24 Questions for planned communication, p. 16.



Social Media Marketing

We remember when Lars mentioned social media and

Twitter to us for the first time last semester he was met with

skepticism. “What bogus passing fad is that?”some asked.

Little did we know. Since then we have come to understand

that social media is probably among the most important

evolutions in web development. Strength of social media, like

Twitter and Facebook, lies in the fact that people are increasingly publishing their own

material on the web. Web users have changed from being primarily passive viewers to

becoming active contributors. Some believe this will not only transform human

relationships but also have great impact on economic and political systems of nations.

The new emerging social media marketing (SMM) will be an important part of the

communication strategy of Sigurfreyr.com. For the past two years the importance of social

media networks, such as Twitter, Facebook and LinkedIn, has become obvious. Web blogs and

social media sharing (YouTube, Flickr) have become part of peoples life. The digital measuring

service ComScore reports that in May, 2009, 734.2 million or two-thirds of the world’s 1.1

billion Internet users, 15 and older, visited at least one social networking site.9

SMM has become important marketing tool and companies are using it and with good result.

A study measuring the impact of social media in 2008 showed this without doubt.

10

9 COMCORE, http://www.comscore.com/.

Here is

the data reflecting responses to the question, “Are you using some form of social media for

marketing?”

10 Workbook: Measuring the Impact of Social Media, http://www.omniture.com/offer/429?s_osc=24051.



When it came to the question in the same study what social media was good for the

response was:

Facebook and Twitter As was mentioned before, Sigurfreyr.com will have presence on Twitter and a Facebook

Fan Page. Facebook offers exceptional, low cost marketing opportunities for business,

promotion and campaigning. Facebook has now over 400 million users and offers a very

powerful platform on which to build a presence. In Iceland it is the most popular social



media with more than 70% of the population having a Facebook account. In order to build

a Facebook community Sigurfreyr.com needs to put up fresh content on a regular basis.

It needs to have a Fan Page where members can easily interact and provide them with

compelling content. It isn´t enough just to post on the Sigurfreyr.com Fan Page new blogs,

videos, article etc. in a mechanical manner but also introduce content (videos, photos,

links etc.) from other sources. Also respond quickly to all wall comments (supportive or

negative) and give it’s members the feeling they are part of a living community.

Twitter is an online communication tool that combines the best elements of blogging,

social networking and messaging. Twitter allows people to post concise 140 character

messages, which are published on their publicly viewable page. Posting a message is quick

and easy, it can be done from any internet connected computer or a mobile phone with

SMS text message. In order to follow tweets from others you become their follower.

Likewise if somebody wants to follow what you publish he/she become a follower of you

or the brand/ company/ institution that uses Twitter.

One of the things that makes Twitter so powerful from a communications perspective is

that you can “re-tweet” something you find interesting from a person you are following

to your own followers, which can re-tweet it to his/hers followers and so on. Popular re-

tweets can reach a large audience very quickly. Even though the use of Twitter in Iceland

is quite uncommon (about 4% of the population) many Icelandic intellectuals and some

politicians are tweeters. The use of it will certainly grow in the near future. As with

Facebook using Twitter stream as nothing more than a redirection service to point people

to Sigurfreyr.com sites is sure to be considered nothing but spam. If we want to build a

strong presence on Twitter, we must engage with users.

Studies have shown that up to 50% of the traffic to some web sites comes from the social

news sites subcatergory of the social media. That is why an important focus of every site

that want´s to increase it´s traffic should not only be Facebook and the micro-blogging

site Twitter but also the social news sites. Today Digg, Reddit and StumbleUpon are the

most popular social news sites.



Digg is based on letting people submit links and stories, and encourage them to vote and

comment on their submission. Many stories get submitted every day, but only the most

Dugg (voted on) stories appear on the front page. Reddit is basically the same. People

send links to Reddit. Other users may then vote the posted links up or down, causing

them to become more or less prominent on the Reddit home page. StumbleUpon works

in the same way. StumbleUpon chooses which Web page to display based on the user's

ratings of previous pages, ratings by his/her friends, and by the ratings of users with

similar interests.

Social Bookmarking sites have also become popular. Delicious (formerly del.icio.us) is a

social bookmarking web service for storing, sharing, and discovering web bookmarks. In

Iceland there is little use of these social news sites, as of today. That will certainly change

in the future. Sigurfreyr.com provides share buttons on all it´s sites so readers can

bookmark and send the various content (articles, video and blog) to these and other

social media sites.

Blog Blogs are typical feature of what has been called Web 2.0 in the development of the

world wide web. A blog is a special kind of website that allows people to interact with

your content in the form of writing comments in

response to whatever you publish. Whenever you visit a

blog, you can read the original post by the author of the

blog, and then you can also submit a comment expressing your own thoughts on what the

blog post was about. When other people join the "conversation” you could end up with a

very exciting collection of thoughts. So, it's quite different from the old “static” websites

that do not change their content as a general rule of thumb. Blogs are a lot more fluid and

interactive than the normal “old school” websites. An average blog is said to entice

approximately 55% more visitors than a website.

Blog is an important element of Sigurfreyr.com. It is implemented together with the

Forum (Spjallsvæði Sigurfreys). Even though the content in Sigurfreys Videos (Netvarp



Sigurfreys) will not be updated as frequently as a blog should be (preferably daily), and

the long articles in Sigurfreys Articles (Greinasafn Sigurfreys) even less, both of these sites

contain a blog-style element when it comes to the comments system. The Blog in the

Forum is however meant to be updated daily, and will as such be only short but hopefully

informative. It will revolve around the basic message of Sigurfreyr.com that the war on

drugs is a war on ordinary people and does more harm then good.

In short: The basic communication strategy of Sigurfreyr.com is to run three sites

(scholarly article site, documentary video site and a forum that includes a blog) that are

tailored to common types of online users (i.e. critics, collectors, spectators). Also create a

Facebook Fan Page community and a Twitter page to collect followers (for joiners).

Creator type of online users are given the opportunity to embed high-quality

documentaries and films (from BBC, ABC etc.) to their own homepage. Inactives are not

forgotten. They are encouraged to use the social media distribution that is available on

the sites and join the Sigurfreyr.com Facebook and Twitter community. They can also

send content with email and print a friendly version of articles and help tutorials. Help

videos are also provided that can assist the inactives to take their first baby steps in to the

big world of social media.

Design and User Interface

The design and user interface of all Sigurfreyr.com sites (except the ISS Survey) is meant

to drive traffic back and forth, not only between the related sites, but also to and from

Twitter, Facebook and other social media distribution tools (i.e. StumbleUpon, Reddit,

Digg etc.). This is done by common elements in the sidebar and sharing tools above and

below each content, whether it is an article, video, blog post or a fixed page.

Themes and Web 2.0 Design The concept, style and tone of Sigurfreyr.com sites is mostly based on Web 2.0 Design.

The main features are a large logo, central layout, 2 columns (except on front page),

separate top section (the main branding and navigation area), serif fonts, bold text

introductions, strong colors, gradients and general simplicity in presentation.



Sigurfreyr.com design should be focused, clean and simple. Another thing about Web 2.0

design is that it takes the header out of the constricted ,”box‘‘, so to speak, and gives it a

liquid and elastic quality. The central layout is there but the header is not contained or

framed in as the content area. Same applies sometimes with the footer (as can be seen in

Sigurfreys Forum (http://spjall.sigurfreyr.com). With Web 2.0 style the footer takes a life

of it’s own. It becomes huge and and almost like a homepage by itself.

The WordPress theme we used in Sigurfreys Articles is WhosWho by Elegant Themes. It

had to be changed considerably to accommodate our Web 2.0 design requirements. We

chose WhosWho theme for the Sigurfreys Article (the E-Magazine) because it is great for

organizing a lot of information while still maintaining a stylish and elegant design. The

articles that we need to accommodate are more then 100 already (and will increase in the

future) so it is necessary to have a theme layout that can handle a lot of content.

WhosWho theme is however “old Web 1.0” style so we had to change the header

considerably, make it bigger and take it ,,out of the box”, change to a serif font and spice

up the sidebar which was rather dull and colorless.

The logo was also made much bigger then in the WhosWho theme and that applies

actually to the other two WordPress themes we selected. Since Sigurfreys Articles

(Greinasafn Sigurfreys) is a redesign of the original web site (http://www.sigurfreyr.com)

we felt it important to use similar color scheme as before. The changes made can seen

here below.

http://spjall.sigurfreyr.com/�



Old Greinasafn Sigurfreys (E-Magazine) front page:

Greinasafn Sigurfreys front page after redesign:



WhosWho theme, front page:

WhosWho theme subpage:



Example of subpage after redesign:

The Eyetrack III Research Findings When we were choosing from the numerous themes we could use we had one basic

criteria in mind: It had to comply with the findings of eyetracking research. Eyetracking

studies eye-movement of web users across multiple homepage designs. 11

11 THE BEST OF EYETRACK III, http://www.poynterextra.org/eyetrack2004/main.htm.

It gives

designers and web developers valuable information how they can steer or direct the

attention of the users. Eyetrack III research found out that dominant elements most often

draw the eyes first upon entering the page — especially when they are in the upper left

part of the page. For this reason Sigurfreyr.com logo is located there. Text rules on the

computer screen – both in order viewed and in overall time spent looking at it. This is

good news for our web site because it´s purpose is to inform, persuade and convince. It is

heavily based on written material. Even Sigurfreys Videos effectiveness is reduced if the

viewer doesn’t read the text that comes with each documentary.



Smaller type encourages focused reading, while larger types promotes lighter scanning.

We use this fact by having the font of the main text small and at the same type adding

excerpts and headings with much larger font. This is of course only done when the length

of the article requires it. We use the stylish Georgia (Arial came with the WhosWho

theme) and later added New Century Schoolbook and Nimbus Roman No9 L to the serif

font-family in the CSS after we found out that there is 0,62%

probability that Georgia is not found on Mac operating systems.

According to eyetracking research web readers look typically at

text elements before their eyes land on an accompanying photo.

The bigger the image, the more time people took to look at it.

Shorter paragraphs performed better than longer ones.

Navigation placed at the top of a homepage performed best. When testers encountered a

story with a boldface introductory paragraph, 95% of them viewed all or part of it. These

are all findings that are assimilated into Sigurfreyr.com design.

Repeated Elements There are many functional elements repeated in all the three web sites. Among the most

important ones are social media distribution, “I like” Facebook button, RSS button, Email

this option, Printable version button, sidebar elements that give links to all Sigufreyr.com

sites and Facebook and Twitter Pages, Contact Form and Help that consist of video and

written instructions. We put also a favicon in the URL bar of all the sites (including the ISS

Survey) and encourage our readers to use a Gravatar.

Gravatar

When it comes to users interaction it is very

important to encourage all visitors of the web sites

to comment on it’s post or articles. This can be

done by ending the post with a direct questions to

the reader. For example: ‚What do you think?‘



and empathize the question by having it in a bold type. This way we are more likely to

revoke a response to the post or video and hopefully invoke a long and heated discussion.

Another way is to encourage Sigurfreyr.com readers to use their own personal Gravatar.

Gravatar (short for Globally Recognized Avatar) is a service that provides a globally-

unique avatar. On Gravatar (http://en.gravatar.com) users can register an account based

on their email address, and upload a image to be associated with that account. When the

user posts a comment on Sigurfreyr.com the service checks whether the e-mail he/she

registers has an associated avatar at Gravatar. If so, the Gravatar of that person is shown

beside the comment. This gives comments on the sites a more personal feel and look. It

might also motivate guests to comment more frequently.

RSS (Real Simple Syndicate)

It is also important to use Real Simple Syndicate (RSS) to collect

subscribers to web material of Sigurfreyr.com sites. RSS is a web

feed format used to publish frequently updated works such as blog

entries or news headlines in a standardized format. An RSS

document (which is called a "feed" or "web feed") includes full or

summarized text, plus metadata such as publishing dates and authorship. Web feeds

benefits our site by letting it syndicate content automatically. They benefit readers who

want to subscribe to timely updates from favored

blogs or collect feeds from many web sites into one

place. Users can also subscribe to new articles at

Sigurfreys Articles through e-mail. Every time a new article is added the subscriber gets a

copy of it in to his e-mail box. All the user has to do is enter his/hers email address in a

box which can be found on the navigation bar on the front page. The subscription service

FeedBurner is used for this purpose.

Another important bonus of using RSS is the fact that it provides the basic format that

makes developing a mobile or podcasters application for web sites easy. Basically all that

is needed is simple XHTML, CSS and web feed with RSS.



Since it has been estimated that in few years around 50% of internet users population will

access the web through podcasters and mobile phones this is a very important factor.

Links to Sigurfreyr.com sites

Links to Sigurfreyr.com sites (including ISS Survey) are put on all

sidebars. Both in the form of banners and as a simple hypertext.

There the reader can also find links to the Twitter and Facebook

Pages of Sigurfreyr.com under the heading “Connect to

Sigurfreyr.com”. In Sigurfreys Forum similar links can also be found in the footer.

Social Media Buttons

As we have mentioned social media are internet-based tools for sharing and discussing

information among people on the world wide web. Below each post, and in the case of

Sigurfreys Articles above it also, the web sites readers have the opportunity to share

content they like to friends and co-workers. They can also post a link to a particular

article, video or blog on their Facebook Wall with clicking on a “I Like” button, which has

become a common sight on many web sites recently. Each click increases the possibility

that other Facebook friends are redirected

to the web site to read an article or view a

video.

Web sites guest can also send a copy of all articles and blog post to family and friends by

e-mail. This can be important for those that don’t use social media of

any kind and a helpful feature for all readers that want to send a copy of the article to

him/herself to read later.



Sigurfreyr.com provides the user also with the opportunity to print a printer friendly

version of an article to save ink. This is very important, we think, since it contributes to a

positive user experience. It can be quite surprising (and quite common) to read a “how to

do” blog about user experience design, and when you print it out, you get all the

advertisements (full color of course), header, links, comments etc., about 20 pages with

an article that is about 1 1/2 page itself. Even when you want to print out instructions

about how to do a printer friendly version of a webpage, explaining how important it is

for your site!

Favicon

Another feature we added to the websites is a favicon. A favicon (short for “favorites

icon”) is an icon associated with a website or webpage intended to be used when you

bookmark the web page. Web browsers use them in the URL bar, on tabs, and elsewhere

to help identify a website visually.

A favicon is typically a graphic 16 x 16 pixels square and is saved as favicon.ico in the

root directory of your server. You can use a favicon with any WordPress application on a

web server that allows access to the root directories. Sigurfreyr.com uses the Nordic rune

FÉ (meaning wealth, prosperity, fertility), the first rune in the FUTHARK Viking alphabet,

as a favicon. It stands also for the letter F which is of course the first letter in FREYR.

Logo and Psychology of Color

The logo of the Sigurfreyr.com websites is a simple word mark using a font named District

Thin. The font is said to be the thinnest font in the world, but we are not sure about that.

We like it because it is quite different from most fonts. The idea is to use the same logo

design in all sites grouped under Sigurfreyr.com but only with different colors.



The primary colors of Sigurfreyr.com web sites are maroon (#96000), orange (#F3650B)

and blue (#315B87), or to be more precise different versions of these basic colors. The

,,cool“, „sober“, „serious“ and „responisble“ color blue is a good choice for the Forum

because online discussions tend to get out of hand, heated and even abusive, specially

when young people are concerned, which will most probably be the most active users of

the Forum. Blue color recedes or goes away from the viewer compared to orange, red or

other warmer colors that advance towards the viewer.

Maroon stands for religous senitments, compassion and wisdom in color psychology. This

color can be seen for example in clothings of Jesus Christ in paintings from Middle Ages

and in the monk frocks of Tibetan lamas. We think that is fitting for Sigurfreys Articles,

which calls for reason, compassion and justice when it comes to changes in drug policy.

The one problem with maroon is that it takes on a much redder and agressive tone in

Macs then PC‘s because of a different monitor resolution. Since 97% of web sites are

viewed on PC‘s this should not be a problem.

The Video Gallery has more space and a lot of white color. The blue is also a lot lighter

(#0096E4) then in the Forum. White is a neutral color, does not attract much attention,

which is perfect for Sigurfreys Videos since we want the viewers to concentrate on the

videos and documentaries and not the surrounding space of the web site.



Interaction: Plugins and Widgets

WordPress has amazing range of inbuilt functionality when it comes to search, taging and

organizing content in categories. But basically when it comes to other features we need

to look elsewhere. The fact that WordPress is Open Source Software means anyone can

look at the code and modify the program. Consequently there are thousands of PHP

programmers all over the world working to make WordPress even better then it already

is. And they do it for free — just for the good of the software and their fellow man. These

add ons are called plugins and widgets.

When it comes to installing plugins it is important to do a lot of research and not over do

it. We install and use only the plugins that the website really needs, since too much of a

good thing can drag the performance of Sigurfreyr.com down.

We have chosen different plugins and widgets for each of the three databases. Some of

these plugins we might uninstall in the future, or add new ones. We have mention before

several plugins we added to our site. Among them “I like” Facebook button, ,,Printable

version”, “Send with e-mail”, “Subscribe” buttons to our Facebook and Twitter pages and

a special contact form (Contact 7) which has a link to it in the navigation bar of all the

Sigurfreyr.com sites.

Here is a list of few others that we consider also important and helpful.

Akismet

Spam or ,,sblog” as it is called in blog logy is quite common. Usually

with links to some sleazy product’s website. Akismet plugin is a

perfect spam catcher. It has an option to “Automatically discard spam

comments on posts older than a month” which means that spam

comments for the early posts won’t even be added to the Spam section of blog

comments, they will be deleted automatically. It is probably the most common plugin in

the world and comes with every WordPress installation.



Google Analytics for WordPress

Google Analytics for WordPress is an important plugin that we added to our websites in

order to enjoy a variety of tracking options available with a Google Analytics Account

(http://www.google.com/analytics). Such an account gives you an Analytics Account ID.

The service is free. Once we uploaded and activated the plugin we went to the Settings

section in the main menu of WordPress and looked for Google Analytics. Here we found

the place where we could make all necessary Google Analytics’ WordPress configurations.

All we had to do was enter our Analytics Account ID and click on save.

After that we can go to our Google Analytics account and track visitors, if they are new or

returning, where they come from, find out what are the most popular search keywords

on Sigurfreyr.com web site, most popular article, videos, blogs etc. All very important

information, specially at later stages when Sigurfreyr.com starts to market itself.

Yet Another Related Post Plugin (YARPP)

It is highly important to keep visitors on the web site as long as possible, especially if you

want them to read or see other earlier material that might not be visible. This is where



Yet Another Related Posts Plugin (YARPP) comes

in handy. It allows us to show links to related posts

at the end of the article, video, blog etc. We can

set this relatedness by a number of options, such

as keywords in the text, titles, tags, categories etc.

We can define the number of links to show and the

period of time to check on related articles from

our previous posts. We use this plugin on all the three sites.

SexyBookmarks

Don´t let the name fool you. SexyBookmarks is a very robust social media distribution

plugin. SexyBookmarks adds keen social network icons below and/or above posts that get

bigger on roll-over. There are 70 bookmarking site you can choose from. You can define

where the bookmarks are shown on the site, i.e. on the index, posts or pages. With it

comes a URL shortener which is helpful if you want to tweet very long URL’s since Twitter

allows only 140 character messages. You can also decide whether the icons should open

in the new window or not. We think it is important that it opens in a new window,

because then the reader is less likely to leave our site.

All in One SEO Pack

All in One SEO Pack plugin is used to enhance web sites

in terms of search engines friendliness. It allows us to

set the titles structure of blog pages, use noindex

attributes for the sections we’d like to close from the search engines and set meta title

and meta description for the sites front pages without going into the blog code. This

plugin will also automatically optimize our blog category and post URL structure. It auto



generate title tags and avoids duplicate content issue by restricting search engines from

accessing pages that have duplicate content on them.

All in One SEO Pack is highly recommended by all WordPress professionals. It is however

by no means the only search engine optimization that has to be done. We did a detail

research on the subject and found out there are many other things that should be done in

order to gain favor from Google. Due to lack of time we will not go in to that in any great

detail but just want to mention briefly 4 things we did to enhance SEO friendliness of

Sigurfreyr.com sites.

1. Created permalinks. This means that instead of the websites URL looking for

example like: sigurfreyr.com/?p=123 it looks like sigurfreyr.com/drug-warriors-

pray which of course is more SEO friendly.

2. Installed Google XML Sitemap Generator, a plugin that automatically generates a

XML sitemap of our posts that is formatted for Google, Yahoo, Bing, and

Ask. Sigurfreyr.com sitemap will be sent to all of the search engines every time

the plugin rebuilds the XML sitemap. Having this plugin, ensures that the search

engines are aware of all of our posts and will help with the overall crawling of the

sites.

3. Have the title of each post/page written in Heading 1 and try to use important

keywords in h2 if possible.

4. Use rel=”nofollow” attribute in outgoing or less important links in our site. We

have for example many links to different social media and there is no reason we

should have Google or other search bots follow those link.

Hyper Cache Load time is becoming an important factor in search engine algorithms. Not to mention a

page that loads fast makes a visitor much happier and is more likely to stay on our site

longer. Hyper Cache will help speed up the page load times by caching pages, removing

white space and comments, and compressing CSS and js files. This plugin is said to

increase the site performance at least 8-10 times. By enabling caching only the first visitor



will go through the process of processing the PHP code. The caching mechanism will save

the data and then serve every subsequent visitor the final result.12

We tested Hyper Cache efficiency by putting a special PHP code in the footer of each of

Sigurfreyr.com websites: <?php echo get_num_queries(); ?> queries in <?php

timer_stop(1); ?> seconds. This code tells us how many

queries the database makes and how long it takes. The time

went from about 8-9 seconds to less then 1 seconds after we installed the Hyper Cache.

You can see this measurement in the left corner of each website. This code will of course

be removed as soon as Sigurfreyr.com opens to the public.

Simple:Press Forum Plugin

Since its creation in 2000, phpBB has become the

most widely used Open Source forum solution. When we heard however there was a

special forum plugin for WordPress: Simple:Press we opted for that. We have not been

disappointed. It is new forum solution, not really well known, but we think it has a great

future.

Simple:Press is a huge and feature rich plugin. It fully integrates into your WordPress

based site utilizing the same user records and database and displaying on a single

WordPress page. It is fully customizable and comes with a number of skins (theme) and

sets of icons. Current users have shown it to be fully scalable whether your site

membership numbers the tens or the thousands. Through it’s powerful and flexible

permissions system it is suitable for those who wish to run private, specialist forums with

invited members but is equally able to accommodate open, public forums that allow

guest posting.

Simple:Press offers also a Private Messaging sub-system, the ability to link blog posts with

forum topics, the capability to extend the forum display with custom code, a number of

12 “WordPress Caching. Casching Solutions Compared, http://www.tutorial9.net/web-tutorials/wordpress-caching-whats-the-best-caching-plugin/



template tags for use outside of the forums, extensive online help that explains every

option and full language support.

The Simple:Press skin (or theme in WP terminology) we chose is called “Detroit”. It fit’s

perfectly in to the color scheme of the WordPress theme we had decided to use in

Sigurfreys Forum. The only problem was Detroit has some pink colored boxes which we

quickly changed into yellow. We decided to have the Forum as light as possible so we

don´t allow any private messages, upload of photos, video etc. in to posts. We turned off

a lot of default features in Simple:Press in order to slim it down. We think it is important

that uploading time should be as short as possible. Sigurfreys Forum is in most ways

structured or planned (with social media sharing, gravatar, contact form, help videos etc.)

as the E-Magazine and Video Gallery.



One of the major differences lies in the web design. The Forum is 100% Web 2.0 in style.

Big header, big footer etc. In order to get rid of the sidebar (which is a standard feature of

WordPress) in the page where the Forum itself appears we use a Widget Logic Plugin. The

plugin adds a field to all widgets which allows us to decide where the sidebars shows up.

By adding the WP’s conditional tag !is_page('forum') that the sidebar widgets should

appear everywhere except in the page named ‘forum’.

ISS Survey

A survey is method of gathering information from individuals or groups. The goal is to find

out where people stand or what

opinion they have on certain matters.

Companies often create client surveys

to get a better picture of how the clientele sees their service. This kind of survey can be a

powerful analysis tool and help a company improve it’s service.

ISS (Icelandic Defence Brigade) is a by product of Sigurfreyr.com. Before Sigurfreyr.com

commits to founding such an organizations it needs more information about exiting

needs. We need to investigate our target audience to make sure our plans line up with

what potential members want. An online survey can offer practical information for

planning and decision making. We can learn better what our users think of our current or

planned service and what they want to see from us in the future.

What is LimeSurvey?

LimeSurvey is an open source online survey tool. LimeSurvey offers twenty different

question types and has multilingual features. Before we start our survey we need to plan

it in advance. We have to choose the topic of the survey, style of presentation and the

attribute questions being used. When it comes to presentation there are three different

options: Page by page, question by question or group by group. In the case of the online



survey done by ISS having questions in a group suits our needs best. Here is a graphical

representation of our survey structure in a hierarchical order.

Token system

We will want to keep track of who has completed the survey, and ensure that each

person can only participate once. The use of tokens allows this. If you initialize the tokens

table and have chosen to allow public registration in the survey setup, people who visit

your survey’s URL without a token will be given the opportunity to register.

If they provide an email address that is not in the current survey’s table, an entry in the

tokens table will be created and they will be emailed an invitation containing their unique

token. This feature comes in handy because we will know who takes part in the survey

and the number of participants. We can also collect their emails and use for direct

marketing.

To protect the survey from robot registration the captcha feature is used on all

registrations.

LimeSurvey User Interface

The LimeSurvey software we used has features that allow us to use its default template or

choose and copy one of their standard one.

We decided to make our own interface. Personalize the look and feel of the pages. That

way people will differentiate ISS surveys from any other LimeSurvey.

ISS Survey

Group 1

Questions Questions

Group 2

Questions Questions



Because LimeSurvey’s templates are dull visually and boring, we want to prevent our

users from experiencing it. One good reason among others is that LimeSurvey has their

logo in all their templates and using it will certainly not help ISS in the eyes of our users.

Logo, Colors, Fonts

The initial idea is to create a logo and look for a

survey. Basically the name ÍSS is the name of the

rune from the FUTHARK alphabet. It stands for

protection in rune magic. It is also an abbreviation of

Íslenska sjálfsvarnarsveitin (Icelandic Defence

Brigade). LimeSurvey is easy to manage as a

questionnaire but one has to have good

understanding of XHTML and CSS to be able to

manage and create the look and feel of the survey.

The Logo Design

In light of the Old Nordic connection to the name and the idea behind the name we

decided to try and implement that into the design. Initial idea was to try to use a Viking

theme so some sketches where made (see Appendix). After some consideration it was

made to look vector-like, clean and simple.

Our hypothesis is that young people in Iceland are proud of their heritage, their Viking

past. We think that a logo that reminds them of that period of history will appeal to them.

A Viking shield, a sword and axe from the same era were chosen. After some tests we

finally settled on using rune like font for the ISS. First it was placed to the right side of the

logo. But after careful consideration it was put underneath the shield (see Appendix).



A second version of the logo was also made with the Icelandic flag on the shield itself. It

was however decided to use that as a banner on Sigurfreyr.com other websites. Also on

the ISS web site (when it will be made) but not with the survey itself.

The survey layout design

The idea was to make a real simple layout for

the survey and to make it not look like a regular

webpage to make sure that there was no doubt

that this was not a information page but a

survey only. So we started on making a Web 2.0

style page with a striped background and a

rounded corner place for the survey. Because

the logo is quite heavy black and white, a subtler

color scheme was applied to lift it up, brown and yellow, for the striped background and a

old paper texture for the survey. Everything was first made in Photoshop to establish

alignments and size and then put into XHTML and CSS.

Applying the layout to LimeSurvey.

The template and layout of LimeSurvey is not the easiest system to customize. In the

output the source shows a lot of <div> tags being used, but when we looked for them

inside the template, there was no to be found. This means there is some basic source that

LimeSurvey uses that is not easily editable. It does not use one HTML file as a template

but rather constructs the one output HTML from a file that are parts of another HTML file.

For example in one case the HTML page might be made from three files; start page,

survey, and end page. So making the layout come together like we wanted proofed to be

a challenge. But after a lot of trial and error we where able to customize the template to

fit our layout.



Videos as Good User Experience

User experience design (UX) is an important element of modern day web development.

Lack of attention to user experience can result in a otherwise considerably good web site

failing to reach it’s goals. Web developers have come to recognize that providing a quality

user experience is an essential part of any online, software and product development.

When our group was discussing this we were reminded of the fact that for years and

years we had seen the RSS logo, but not web site owner or developer had taken the time

to explain to us what this was for. It was yellow we knew, and something do with the

letters RSS, but what the heck was it for, few of us had any idea.

One thought this was some kind of a counter for the web site to see how many clicks or

visit it got.

How should we have known? Nobody told us anything.

This little true story of people who considered themselves (and were considered by

others) to be rather computer wise shows us that we as developers can´t take anything

for granted. Just because we know what a Facebook or Twitter button stands for, doesn´t



mean every body does. And even if they did. We can´t assume every body knows how to

use it, where to go to register etc. Why they should even bother using it.

UX considerations is the prime motive behind the group deciding not only to have written

instructions on how to do certain things (we today take for granted) but also produce a

short help videos for the users of Sigurfreyr.com web sites.

Video People are visual or text preferable, with this in mind, we´ve added these visual helpers. A

simple short guide, that explains recommendations, options and directions to achieve

their goals.

Giving the user the choice of, images included sounds or the basic clear text description of

the walk about, is a part of the user centric design and content.

The tutorial videos are based on the text, in the help section of Sigurfreys Video, Forum

and Articles. Basic idea was to have a visual version of these recommendations/

roadmaps. Sticking to the written word, the timeline was more or less set, same goes for

the tempo and flow of the video.

Inspiration

First attempt for styling the tutorial motion pictures, was inspired by MailChimps support

videos.

Mailchimp videos have images sliding in various directions, strong zoom effect, with a tilt

to the camera angle, enthusiastic narrating and up-tempo soundtrack.

Trying this concept on our material, it soon turned out not to fit in. The inspirational

videos had different content, also the length and tempo was far from ours. Doing the

storyboard for the tutorial video “SIGURFREYR RECOMMENDS FIREFOX”, it came clear that there

were not enough screen cast to fill in, since this is more a “propaganda” against IE and

not the usual tutorial material, with lots of screenshots and “then you click this and then

this …”



Concept

We use a smooth minimalistic style, not overdoing the tilts and slide ins, this seam

suitable for the “recommends” videos, where there is a lack of screen cast and mouse

action. Well known icons and text underlines the voiceover and the steam/pulse of the

storyline is in synch with the keywords of the tutorial.

Music

Music for the videos was considered but left out, thoughts was to have an ambient

hidden background sound with very little change in chords. Copyrights, is an issue too.

Leaving out the music in this production is not a loss.

Intro

Logo is used as an intro and an outgo, that tells the origin of the video. It´s also there as a

smooth opener, before the actual info. Bringing the mascot Kisa in the product, is an

appeal to the emotions of the viewer, make them feel good and comfortable, to ease

their real-time struggle.



Narrator

Anna’s nice voice is used as narrator. Considering which way to go, we felt it would fit,

with a strict and informative voice, mute the enthusiasm and stick to formality. Not

overdoing the punch lines, have it as a clean info. This decision came out of watching

different style tutor videos. Often the voice on these has a tendency of silly, random, avid

and a little to human.

Text

Adding text (keywords for the story) to the video, fills the empty spaces, where there is

no reason for an image. This maintains the viewers attention and the steam of the story/

the flow.

As a bonus you can, almost, get the story without sound, with this in mind, awareness is

on not to have a keyword followed by another keyword, that would give a different

meaning than the actual story. The story and the visual product gets a stronger impact,

when using the keywords, and equally important, it adds a visual thread.



Color

The orange color (#FF9C00) used for text/keywords and Kisa (the mascot kitten) is

adapted from the logo of Sigurfreys Videos (Netvarp Sigurfreys).

Orange is vibrant and demands attention, stimulating the emotions and even the

appetite. The orange color should work as very noticeable without screaming. This softer

orange, which we use, is even friendlier and more soothing.

White as a background and continuous color, keeps the production clean and

minimalistic.

Kitty Kat

When watching the first video Anna found it to be, dry, plain and boring. She thought a

lot about how we could make it more user friendly and interesting from a design design

perspective. It came clear to her that we would have to make some sort of emotional

design. She suggested we added some warm and cozy creature, then Friðjón later drew.

Having a cute little animal in the production, should have an emotional appeal, so we´ve

been told. Not every body agrees, Johnny feels for example it´s a matter of taste.



Emotional design, should be about the combination of aesthetics and functionality. When

things look good and works well at the same time, people tent to get a good experience.

Implementing a mascot to the tutorial videos, gives a recognizable value. Most people like

cute little animals, this would soften

them and leave them more open and

receptive.

Emotional design

Aesthetics and function works together.

We use beauty and design rules to

enhance good user experience and

thereby concludes user friendly design.

Perceived as beautiful, clarifies the

function and the way to work around the

product. People react on good experience, this affects their psyche and the mind will

reward this feeling with optimism and gumption. This should be the outcome for every

watched tutorial.

Camtasia: Our Working Tool

When working on the video tutorial some questions arose? What screen cast product

should we use?

We wanted a screen cast that had a lot of good features such as a timeline, a audio and

video effect, this was important so we would be able to edit the video and audio in one

program, importing and exporting videos takes time. That would save a lot of time using

only one program. Therefore we choose Camtasia.

Camtasia was new to us but as it turned out to be wonderful to work with.



Business strategy

As has been mentioned before. No web site can be updated on a regular basis without

drawing in some kind of a income. Professional bloggers who make a living from blogging

or maintaining a web site have not been reluctant to advise others how do go about it.

The formula is basically very simple:

Content + Marketing = Traffic Traffic + Direct Ad Sales + Recursive Affiliate Programs = Income

A professional blogger works to attract attention and then sells that attention to

advertisers for a fee or uses the attention to profit from their own product and/or service

sales. This means he has to find his particular type of reader – his or hers niche as it is

called – give them constantly good content so they keep coming back and ultimately,

monetize that traffic.

A good and successful blog or web site can never be better that it´s content. While design

and user interface is queen content is certainly king. The key here is selecting a topic that

you love doing. A topic where you enjoy the process of getting engaged in it as opposed

to the result. Of course, the ideal is to get enjoyment out of both the process and the

result. When you can achieve that, you'll be on a winning streak.

Some of the best blog subjects were discovered by people who immersed themselves in

a specific field, worked in it for a while, and then figured out all the ins and outs about

that topic. Before long they’d stumble upon some “gaps” in that topic, normally in the

form of problems that do not have solutions, and then make a business out of providing a

solution to that problem.

After some research we have decided that the business strategy for the first 6 months in

order to gain traffic will involve:

1. When Sigurfreyr.com launches’ it’s websites it will start creating an email list. To

do this, we will use an email auto-responder service. We have decided that

MailChimp http://www.mailchimp.com is the best choice. They offer free service

for the first 500 subscribers on the mailing list.



2. In order to build a emailing list we will create a email newsletter and a report (in

pdf format) where we discuss issues related to our main blog topic: drug policy.

3. We will update content; articles, videos, blog etc. at least weekly.

4. We will update content regularly to our Facebook and Twitter Pages.

5. We will encourage users to participate in the ISS Survey and take necessary steps

as soon as the data is in.

Professional bloggers say one needs to give away premium content for at least 6 months

before a sustainable traffic has been established. After six months we will review our

plans.

Conclusion

So what is our answer to the basic question that we asked in the beginning of this report?

How do we create an online multimedia production that:

1. Draws solid traffic from our target audience,

By adding premium content daily, at least weekly

2. Encourages involvement from it’s readers,

Use social media sharing on sites and interact with Twitter and Facebook Pages

3. Is monetize able, i.e. can create income

We can first expect that after 6 months

4. Is inexpensive to implement and easy to update.

WordPress and other Open Source web applications



References

Books DABNER, David. 2004. Graphic Design School: The Principles and Practices of Graphic Design. London: Thames and Hudson.

JACOBSEN, Jan Krag. 2009. 24 Questions for Planned Communication. Roskilde: Roskilde University Press.

GOTO, Kelly and Emily COTLER. 2005. Web Redesign: Workflow That Works. Berckley: Peachpit Press.

MELICH, Rolf. Brugervenligt Webdesign.

NORMAN, Donald A. Emotional Design.

WEINBERG,Tamar. 2009. The New Community Rules: Marketing on the Social Web. USA: O’Reilly Media.

WILLIAMS, Robin. 2004. The Non-Designers Design Book: Design and Typographic Principles for the Visiual Novies. Beckley CA: Peachpit Press.

Internet

Eyetrack III: Online News Consumer Behaviour in the Age of Multimedia, http://www.poynterextra.org/eyetrack2004/index.htm.

Web 2.0 How-to Design Guide, http://www.webdesignfromscratch.com/web-design/web-2.0- design-style-guide.php. Writing for the Web, http://www.sun.com/980713/webwriting/

Roadmap to Become a Blogger: http://www.becomeablogger.com/roadmap/

Blog Profits Blueprint: http://www.blogmastermind.com/ Google’s Search Engine Optimization Starter Guide: http://bit.ly/bAMpFE Setting Up WordPress for SEO: http://bit.ly/duZL8O 10 Important Tips to Optimize WordPress for Search Engines: http://bit.ly/ckDlMW WordPress Tutorial: http://www.siteground.com/tutorials/wordpress/

http://www.becomeablogger.com/roadmap/�

http://www.blogmastermind.com/�

http://bit.ly/bAMpFE�

http://bit.ly/duZL8O�

http://bit.ly/ckDlMW�

http://www.siteground.com/tutorials/wordpress/�



GROUP MEMBERS INPUT:

We decided to devide the works between us as follows: Anna Jakobsen and Johnny Lund

Hansen produced the videos. Friðjón Veigar Unnarsson and Saikou Marong developed the

ISS Survey. Guðmundur Sigurfreyr developed the E-Magazine, the Video-Gallery and the

Forum. Each group member wrote about their particular project which was then edited in

to the report by Guðmundur Sigurfreyr.



Education

SIGURFREYR.COM: E-Magazine, Video-Gallery, Forum, Blog & Survey