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

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

[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]

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

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


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

Saikou Marong


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
Saikou Marong


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

Saikou Marong


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
Sigurfreyr.com wants’ to prevent Iceland from following the same path.

Problem definition

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/
Saikou Marong


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) friendly 2 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.

Saikou Marong


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
Saikou Marong


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/

Saikou Marong


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 The study divided users in to six groups according to how they spent their
time online:

1. Creators who publish web pages, write blogs and upload videos to sites like
YouTube.
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
Saikou Marong


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-Analysis 6 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

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.
Saikou Marong


reason, compassion and justice (as the respected Drug Policy Alliance 7 advocates) it can
not overlook this unfortunate group of people.

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.

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.
Saikou Marong


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.
Saikou Marong


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 Here is
the data reflecting responses to the question, “Are you using some form of social media for
marketing?”

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


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

Saikou Marong


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.

Saikou Marong


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

Saikou Marong


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.

Saikou Marong


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.

Saikou Marong


Old Greinasafn Sigurfreys (E-Magazine) front page:

Greinasafn Sigurfreys front page after redesign:

Saikou Marong


WhosWho theme, front page:

WhosWho theme subpage:

Saikou Marong


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 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.

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


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?‘

Saikou Marong


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.

Saikou Marong


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.

Saikou Marong


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.

Saikou Marong


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.

Saikou Marong


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.

Saikou Marong


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

Saikou Marong


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

Saikou Marong


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

Saikou Marong


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/
Saikou Marong


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.

Saikou Marong


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

Saikou Marong


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.

ISS Survey

Group 1 Group 2

Questions Questions Questions Questions

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.

Saikou Marong


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).

Saikou Marong


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.

Saikou Marong


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

Saikou Marong


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 …”

Saikou Marong


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.

Saikou Marong


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.

Saikou Marong


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.
Saikou Marong


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.

Saikou Marong


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.

Saikou Marong


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

Saikou Marong


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/

Saikou Marong


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.

Saikou Marong


Saikou Marong

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

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

Similar a SIGURFREYR.COM: E-Magazine, Video-Gallery, Forum, Blog & Survey (20)

Más de Gudmundur Sigurfreyr

Más de Gudmundur Sigurfreyr (9)

Último

Último (20)

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