Razor Dragons Interactive Design Document

Engagement: 8.0 / 10 | Content: 9.0 / 10 | Concept: 10 / 10 |

Rewards: 7.0 / 10 | Technical: 9.0 / 10 | Brand: 10 /10

Soccer Team’s and Interactive WebsitesCompetitive Analysis

!"#$%&'%"($)*

São Paulo F.C. Brazilian Soccer Team

Engagement: 7.0 / 10 | Content: 8.0 / 10 | Concept: 5.0 / 10 |

Rewards: 9.0 / 10 | Technical: 9.0 / 10 | Brand: 9.0 /10

OpportunitiesThe interactive hotsite “Calendário Tricolor” is a amazing

piece and the user always have a good time on it. At first

while you are on the loading page, you have a mini

kick-ups game so you have a nice waiting time. The hotsite

is a calendar and everydate you chose you see events that

happened that specific day, famous players birthdays and

much more.

WeaknessThe simple look of the site also make it look

unprofessional. The layout is strange and have a lot of

blank spaces. The Video section is just a page with one

embed Youtube video. It seems very outdated and don’t

take many advantages of the recent technology. In

general the site is not worth for one of the best brazilian

teams.

StrengthsThe layout is quite simple and there is a really detailed

horizontal menu making the navigation easy. The ads

are small and don’t distracts you from the main content.

On the home page there are illustrated buttons for the

most visited pages on the site. The calendar with the

monthly events on the homepage is a great idea and

very practical too. When you enter the site you get a

splash screen telling abou the new interactive hotsite.

On game’s day there is an option to read live stats and

comments about the game .

ww

w.s

aop

aulo

fc.c

om

.br

WeaknessThe team history section is basically about plain text

and don’t engage the audience. The other sports that

the club has also lacks visuals and there isn’t a good

aproach regarding becoming an associate.

StrengthsThe site has a beautiful layout, everything is really well

layouted, the ads are not agressive and the news have a

great spot with changing images right on your eyesight.

All the design choices are good and everything your

look for is easy to be found. There is a Interactive

section where the team supporters can interact with

each other and share experiences regarding the team.


Rewards: 6.0 / 10 | Technical: 9.0 / 10 | Brand: 10 /10Santos F. C. Brazilian Soccer Team

OpportunitiesThere’s an section where anyone can create a public

profile and shows that he is an fan and tell everyone

about their passion, stories, game matches and

everything. It’s a great way to make the user feel that he

is part of the team and be proud of it.

ww

w.s

anto

sfc.

com

.br

WeaknessThe main concern on this site is about the advertising.

There is a huge advertisement in just below the menu

that makes all the content go down. Also, a small ad on

the top leave a blank area above the header making the

layout look really awkward. Everywhere you look the

ads catches more attention than the content.

StrengthsAs soon as you enter the site you can tell you are on

the right site as it make a great use of green hues (the

team main color). Below the navigation menu there’s

a featured section with scrolling messages. It’s also

possible to change the site language although that site

will be a di!erent and old-fashioned version of it.


Rewards: 6.0 / 10 | Technical: 9.0 / 10 | Brand: 10 /10 S. E. Palmeiras Brazilian Soccer Team



OpportunitiesOn the site’s sidebar there is an gallery with great pictures

showing all the team players. Also on the sidebar, you

can see the current tournament standings with the team

highlighted and a featured videos with a mini player on it.

www.palmeiras.com.br

WeaknessThe footer is too simple and just has the sponsors’ logo.

The homepage font size is very small making the news

di"cult to ve read in computers with higher resolutions.

StrengthsThe visuals here is the main strength. The site is really

elegant and communicates very well. In the middle you

find a great way to show the team members in a gallery.

The team history has a special hotsite with an old look

to reflect the team’s one hundred year. The ads are very

discreet and blends with the site design.


Rewards: 8.0 / 10 | Technical: 9.0 / 10 | Brand: 10 /10S. C. Corinthians P. Brazilian Soccer Team

OpportunitiesA great idea on this site is a interactive hotsite for

children, where they can play games, activities,

download stu! for the computer and much more.

This is good way to make the relationship between the

children stronger, increasing the passion for the team

since the beginning.

ww

w.c

ori

nth

ian

s.co

m.b

r

StrengthsThe strongest thing about this site is the option to

choose among 8 di!erent languages and almost all of

them have the same look. The layout is well done and

very easy to understand. Milan’s website has a section

called Webtv that starts right over when you enter the

site. It is a nicely produced movie mith motions e!ects

that tells some of the news about the team.

WeaknessBrowsing between the several language options located

on the splash page, there is a confusing fact. There are

two links, one with the USA flag and another with the

England flag. When the user clicks the north american

flag, he is redirected to the online store section, and

when clicking on the England flag, the user is redirected

to an english version of the main page. This duplication

can confuse the user and having just one flag

representing the english language and a clear banner

for the american store, would work better.

A. C. MilanItalian Soccer Team





Opportunities

In partnership with the publisher

Panini, the site o!ers the

opportunity for supporters to

upload their photo and create

stickers online which are then

sent by mail to users.

ww

w.a

cmila

n.c

om

StrengthsThe website is well structured and have all sections

organized. basic content such as ticket buying features,

history, shop and news are featured on the main page.

there is also a calendar located on the main page,

where important dates are highlighted such as team

matches and player birthdays. There is also a search

tool and specific place where the most searched tags

on the website can be found.

WeaknessWhen accessing the webpage for the first time, a

splash page appears showing advertisements, besides

the button to enter the website is really small and

hard to see for the first time. Some times the splash

page doesn’t appear, however it must be really an

inconvenience for the fan who wants to get straight to

sport related content.


Rewards: 4.0 / 10 | Technical: 8.0 / 10 | Brand: 9.0 /10Liverpool F. C. English Soccer Team

OpportunitiesThe site’s footer is really great and feature a sitemap

where you will be able to find every section on the

site. This make easier and faster to navigate to specific

sections inside the site.

ww

w.li

verp

oo

lfc.

tv





OpportunitiesThe shopping section of the website is really interesting,

it opens in a new tab on the web browser separating the

content from the rest of the website. The web site has a

variety of merchandise related to the team, and the user

can buy using credit card through the online system built

for checking out.

WeaknessThe team has an youtube channel containing videos

related to them, but very few are found on the

website and there is no specific pages for videos also.

There are no interactive content besides links to the

team’s facebook page or twitter page. the site is not

much engaging, and doesn’t shows creative ways to

communicate with fans. There is no rewards or games

users can play.

StrengthsThe major strenghts of the webpage is the simple layout

making it easier to find important information. News,

and background history of the team are also featured,

The visual identity of the website is based on the team’s

logo which conveys a marine blue color for the

background making it easier to read the letters in white

and vice-versa. There is a built-in section for buying

tickets and merchandise facilitating users who wants

to see the next game live or buying a jersey of his team.

Vanconver Whitecaps F.C. Canadian Soccer Team

wh

itec

apsf

c.co

m

Engagement: 8.0 / 10 | Content: 10. / 10 | Concept: 7.0 / 10 |

Rewards: 7.0 / 10 | Technical: 6.0 / 10 | Brand: 9.0 /10Chicago Fire F.C. USA Soccer Team

WeaknessBesides being a very complete website, there is a lot of

unnecessary information, advertisements and banners

that can confuse the visitor. The title of the site gives

to much weight for the word “Fire“ while the subtitle

saying it is a soccer team is almost invisible. There is no

interactive games or something similar.

StrengthsThe website is very complete, and features a lot of

information regarding the team as well as events,

schedules for next games and additional news. The

color scheme for the website doesn’t a!ect the

legibility and is based on the colors of the team’s

emblem. There is a specific section for videos and

interviews made with team players as well as previews

of future matches. If the visitor wants he can buy tickets

online and acess the online store from the website also.

An option for spanish language is featured as well.

OpportunitiesOne of the sections of the website features community

news and projects which the team foundation and

team players are involved with local schools, donations,

sustainability and local people revealing a humanitarian

side of the brand and foundation, in a good way to

promote the team as well as the sport.

ww

w.c

hic

ago

-fire

.co

m

WeaknessThe main website page repeats three times the news

for team’s updates not featuring other important

information, the middle section has an “scroll“ hability

by clicking on the arrows in each corner, however it’s

quite di"cult to notice this feature in the first minutes

browsing the site. There is an option which the visitor

can see live webcams of the stadium, however it takes

to long to load and sometimes it doesn’t work.

StrengthsThe legibility of the website is really good, making

good use of contrast between dark blue and white

colors similar to Vancouver Whitecaps’s website. The

interactivity between the site and visitors is highlited

showing big facebook and twitter icons on the main

page. Essential menus also appear in the website such

as news, schedules for next games and a link to buy

tickets and to buy team’s merchandise.

Kansas City Wizards USA Soccer Team



OpportunitiesThe online live camera to see the stadium on the

website is a nice interactive piece and works to make

visitors interested in the days where the team is playing.

Options include a interior and exterior view of the

stadium where the visitor can zoom in with the mouse

to see details. There is an option to click right down the

video to buy tickets for the game.

ww

w.k

cwiz

ard

s.co

m



OpportunitiesA really interesting feature on the website is the Jersey

design contest, where users can participate and share

ideas about a new design for the 2012 Supporters kit

for the team. This helps to promote the team and also

works as an e!ective interactive tool.

WeaknessThe first complaint about the website is the amount

of time to load. Even refreshing three times the

loading time wasn’t better, it’s also noticeble kerning

problems in some of the frames where some texts

are not contained in the area that they should be. The

top menu has a bad font for legibility and the options

highlited in red used a really strong color tone that is

too bright.

StrengthsThe web page has a similar structure from the Kansas

Wizards’s website, however the information is better

distributed between the frames, highlighting other

features such as a Pool which visitor can vote and

interact. The Brand follow a similar structure from

other sports websites using colors which represents the

team’s emblem. The essential menus are also included

such as ticket buying, and shopping

Toronto F. C. Canadian Soccer Team

ww

w.t

oro

nto

fc.c

a

WeaknessDue to the amount of content featured on the website,

it takes a long time to load completely. There is also a

considerable amount of advertisements on the main

page and sub menus. Besides the fact the content is

well organized, the massive amount of content can

leave the visitor with a sensation the website is too

“heavy”.

StrengthsVisually, the website is really engaging, the colors

applied in the interface were well combined using the

colors of the team’s emblem. The typography for the

headlines and menus were also well used. There is a

distinct separation between menu items, and it’s sub

categories. All Essential options are included such as

ticket buying and an online shop. There is also an

option available for Spanish language.

Seattle Sounders F.C USA Soccer Team



OpportunitiesWhile the page is loading, it is shown, typographic, and

visuals which entertain the user avoiding him to get

frustrated for waiting a long period of time. This adds

to the idea of making an animated introduction for the

website.



ww

w.s

ou

nd

ersf

c.co

m



OpportunitiesThe multimedia section of the website is really

compelling, the ability to make content available to

users such as wallpapers and icons is a good way to

engage fans with the team.

WeaknessThe structure of the main page looks not balanced , a

black color without any information at all predominates

on the right area of the site (The space could be used

to include relevant information). It is also important to

state a lack of typographical identity on the website

containing a mixture of di!erent fonts.

StrengthsThe website shows information in an organized way

making the use of frames. The majority of important

information is located on the top menu. There is a

built-in twitter and facebook page on the index page,

which also features a login field for ticket seasons and

a search engine to find news and player names. It is also

included a multimedia page where fans can find music,

videos images, among other features..

New England Revolution USA Soccer Team

ww

w.r

evo

luti

on

socc

er.n

et



OpportunitiesThe UT Loop application brings an interesting concept

for a possible interactive piece on a sports website

where the user can record himself with a camera

singing the team’s anthem assuming the character

of a team player and sharing on social websites, like

facebook or twitter

WeaknessThe weak point of Uniqlo design for a sports brand is it’s

minimalistic and multi-color designs. which could not

fit well into the sports category,

StrengthsUniqlo’s website features a lot of interactive content

one of the most famous applications include the uniqlo

calendar which shows date and time with music and

tilt shift videos giving a nice feel to the viewer, another

recently released application is the UT Loop, where

the user can mix voice tones creating and sharing

own tunes composed with voices. Those interactive

applications are really creative and inspiring.

UNIQLO Japanese Clothing Store

Engagement: 10 / 10 | Content: 8 / 10 | Concept: 10 / 10 |

Rewards: 10 / 10 | Technical: 9 / 10 | Brand: 8 /10

ww

w.u

niq

lo.c

om

OpportunitiesEmphasizing the qualities of the website, we can find

a really clean and nice way to show content, which

could be applied to a video section on a soccer website,

displaying information right to the video saying what

the video is about and additional information to it.

WeaknessThe website has a really characteristic visual expression

that can not be applied to a sports website, the color

pallete of the web site is darker compared to the

majority of sports websites. The logo for the site is not

well defined as well.

StrengthsThe portfolio pieces are shown in a really interactive

way. The sound design incorporated into the website

really contribute for a better user experience. The

information is organized in a creative yet methodical

way. Each section of the website has di!erent kinds

of animation making the pages really diverse and

innovative. The handicraft section has a very clean and

creative way of showing content.

CMISCM. Interactive Designer Online Portfolio

Engagement: 10 / 10 | Content: 8.0 / 10 | Concept: 10 / 10 |


cmiscm.com

WeaknessTo search the stickers on the page is really painful.

As the site is horizontal, you are supposed to scrol all

around to see the virtual stickers. The page is made in

flash so it lacks the sidescroll bar and don’t allow you

to use the keyboard’s arrows. So, you need to keep

clicking and draging till you find the sticker you want.

StrengthsThe main page has a nice intro and explains what the

project is about on a way that you get excited to start

as soon as possible. The quality of the images are really

great and being made by many artists around the world

it has a nice blend of styles working together with the

site’s layout.


Rewards: 10 / 10 | Technical: 8.0 / 10 | Brand: 9.0 /10

OpportunitiesThis is such an impressive interactive experience with

a great concept. The first virtual world cup “stickers”

album has 67 “Stickers” made by 33 artists from 10

countries. The sticker number one was made by an

artist selected from the public on a contest. This way

beside just browsing other related sites to get the

stickers, people could also participate on it creation.

Also, the ten first people that completed the album

have won prizes.



www.plakker.net

Plakker Album Virtual Stickers Album

WeaknessThis site works really well and is di"cult to find

weakness about it. One concern that we have is being

based on flash and having many hi res images, would

make it be slower on some machines.

StrengthsThe website for this strong brand has a very clean

and organized structure. It is successful applying a

minimalistic visual style related with sports, and does

a great job selling their products as well, being a good

reference for sports shop sections of a website. at first

there are very few products visible making the visitor

more curious to browse further on the catalog which

has appealing pictures and a great way to list products.

the entrance features sevral languages as well.

OpportunitiesEverything about the store site is worth the attention.

The layout is clean, so the focus is all about the

products. Each item has a preview with great zoom that

shows the details about it. The pictures are all in high

resolution and people can comment about the product

on its page.

Nike Sportswear Online Store



Soccer Team and Interactive WebsiteCreative and visual strategy

!"#$%&'%"($)*

Concept “I’m part of the Dragons, and i am proud of it“Being a fan of a soccer team is a sensation that brings

great experiences, there is nothing better than seeing

your favorite team winning. Having this concept as a

base, our intention is to make our visitor feel as part of

the team. All the interactive experiences featured on

the website will make our visitors feel like they are in

the middle of the field interacting with other fans of the

team. The rewards given by the online experience will

make the users compelled like winning a championship

and raising the trophy proudly of being a dragon

fan. Our website is also a fan of the Razor Dragons,

reflecting in how we feature the informations and also

the voice tone used.Beatboards How the experience is going to be

Mood BoardPersona motivations and aspirations

Our target has a youth spirit , loves soccer and spend good times with his friends watching matches and playing

games. He really wants to be part of the team, and using data gathered by our competitive analysis we were able

to design a conceptual mock-up mixing two concepts: the customization used on Uniqlo’s interactive website and

the sports scene resulting in an idea which will make possible to the user to use his web camera to film his face and

apply in several soccer player templates, and even be able to share it with his friends on facebook!

VITAR #01 Visual Target

Webcam

Having as a basis our “I am part of the team and i am proud of it” concept, the idea of the interactive jersey was created, where each

fan signed to the website has a profile to play a game and can buy an exclusive jersey with a QR code. The website contains a

reward system which allows each fan to try his best to prove his/her love for the Dragons. Being thus , it is only necessary to scan

the QR code on the jersey to see the status of each fan with a jersey and even star challenges between fans . The jersey would only

be available on the online store of the website boosting the online sales.

.

VITAR #02Visual Target

Language used Our tone of voice

We say:

“Good results drag on for the Dragons. We’re still on top! sections inside the site”

We don’t say:

“Razor Dragons is in the first position of the tournament”

We say:

“If you can’t take the heat, don’t mess with the Dragons…We won again!”

We don’t say:

“Razor Dragons wins another game”

We say:

“Don’t let our flaming embers fade. Next time we’ll do better!”

We don’t say:

“Razor Dragons lost the game”

We say:

“I’m proud to be a Dragon, and you? Share your love on Twitter!”

We don’t say:

“Join us on Twitter”

We say:

“Follow the way of the Dragons. Join the crowd on Facebook!”

We don’t say:

“Join us on Facebook”

We say:

“Dragons 7 x 1 Lorem Ipsum. Dragons turned the opponents into ashes, as always!”

We don’t say:

“Razor Dragons win by 7”

We say:

“5 game winning streak. The dragons are on fire!”

We don’t say:

“The Razor Dragons win their 5th match without losing”

Soccer Team and Interactive WebsiteInformation Design

!"#$%&'%"($)*

Research & site structure diagram

Based on some of our research data we were able to find some of the necessary information that we should include in our

website. Some of the most important sections include, news, tickets and online shop. We also included some of our own

sections based on the interactive content located on the website. The sections showed with a lock represent content that are

exclusive for registered users.

Razor Dragons Website

Home

Club

History

Facilities

Razor Dragons Foundation

Media

News

Game Notes

Dragons TV

Media Policy

Interactive

ISJ - Interactive Soccer Jersey

Shout It Out Loud!

Virtual Cards

Dragon's Predictions

Dragonettes

Meet the Dragonettes

About the Dragonettes

View our Pictures

Fan Corner

Personal Profile

Status RewardsVirtual Pins

Exclusive Downloads

Wall & Comments

Contests

Messages

Dragons Store

Men

Jerseys

Hoodies

Tees

Acessories

Women

Jerseys

Hoodies

Tees

Acessories

Youth

Jerseys

Tees

Infant

Tees

Headgear

Caps

Beanies

Souvenirs

Pins & Buttons

Clocks

Soccer Balls

Calendars

Water Bottles

Cups & Mugs

Plushies

Decals

Albums

Buy Tickets Login

Sign In Sign Up

Create a Site Path Diagrams and user navigationScenarios and path diagramsfor primed, naive and exploratory users.

Naive User:Sean wants to see the results for the latest Razor Dragons game. He is a big fan

of the team but couldn’t watch the last match. He didn’t know Razor Dragons

had a new website until now, and he is going to use this tool to find the

information.

End Goal:Sean wants to go exactly to the section where he can find results for matches

and see the result of the latest Dragons Game which he missed.

Experience Goal:Feel welcomed and familiar going through the sections of the site despite of his

unfamiliarity with it.

Tasks he will need to perform to meet his end goal:

How does he find the results for games at the website? .

How can he find the result in the most e!ective and fast way? .

How can he check results for other matches if he wants?

How can he know about other sections of the website in the case he wants to find additional information about the match or other games?

How can he can memorize the steps necessary to get there if he needs to see this information again or look for updates?

The Story:Sean has been a fan of Razor Dragons since his childhood, now that he is 19 years

old, he got very busy with university, assignments, his personal life and also his part

time job. The latest match of the Razor Dragons agains Seattle Sounders was just

last wednesday, however he was really concentrated on his job at the o!ce, and

couldn’t watch the game. His colleague Paul in his classroom said that there is a

new website for the Razor Dragons released in a few weeks ago and that he could

find related information in it, Sean asked Paul if he knew the result of the game

but he also had no clue. When Sean got back home from university, finally he had

sometime to access the website Paul told him about. When he first entered the

website he had a really good sensation when he saw the logo that the logo and all

the colors of his favorite Jersey were used, he also noticed at the main page a clear

menu bar where he could see match results. When he clicked on it a new page

opened at the same window where he could check all the results from the recent

matches. He just found out that the Razor Dragons won by 4 and felt really proud

of his team. Right next to the results he could find a headline saying “Good results

drag on for the dragons, we’re still on top” and a button saying “check out more

about the ravaging blaze” making him want to see more information regarding

that game even though his main goal was accomplished. When he clicked the

button, he was redirected to a new page where he could see several pictures of the

latest game, an article written about the outcome of the match, some testimonials

of players and a video showing highlights of the game , he felt proud of being a

Dragon got his Razor Dragons jersey just before he started to watch the video.

When he finished watching, he saved the website on his bookmarks so that he

can access the website again if he needs to find results of other matches in the

future. Sean found the website to be a very e!cient tool and he has a feeling

of accomplishment because he found the information he was looking for right

when he entered the website, after he closed the website, he can finally finish his

assignments for next week.


Home

Media

News

Game Notes

Exploratory user:Janet works at a local advertisement agency, and she received the task of

looking for soccer website references to the release of the new perfume called

“Goal” campaign and needs to find visual and historical references about soccer

teams in Vancouver. She isn’t a great fan of sports and doesn’t know exactly

where to start.

End Goal:Janet needs to find reliable soccer resources of canadian teams to gather visual

elements for the conception of a advertisement campaign for the new perfume

called “Goal”.

Experience Goal:Feel welcomed and familiar going through the sections of the site despite of his

unfamiliarity with it.


How is she going to easily find the Razor Dragons website? How can she find historic background and reliable information at the website ? How can she find new ideas based on the visuals displayed on the website?

How can she have a good time doing her research despite her unfamiliarity with soccer?

How can the website provide a easy navigation for first time users?

The Story:Janet works for the Herman & Merman advertisement agency, they do several

campaigns for new released products and the organization of events and shows.

During the work time just after lunch, she received the task to conduct a research on

the internet to find references in soccer websites that can be helpful for the campaign

of the new perfume called “goal”. The brief came all of a sudden for her and she was

really surprised, because she doesn’t really like soccer, and the deadline to finish the

task was really short. When her boss left the room she started to look for canadian

soccer websites on Google. When she typed “Canadian soccer” on the search bar,

several websites appeared including the Razor Dragons website. She found the

description of the website really appealing and the voice tone used in the description

really called her attention. When she clicked on the link showed on Google she was

redirected to the Index page of the Razor Dragons’s website. Despite of the clear

sports look of the website, she noticed the information was really organized and the

visual style of the main page was really appealing, on the main menu located on the

top of the page she could find a section called “history and tradition” and got curious

to learn a little bit about the sport before she started doing her analysis. When she

clicked on it, a new page appeared with interesting animations on it talking about

Razor Dragons background and history and also some basics about soccer. After she

learned a little bit, she started exploring the website and clicked on the interactive

section where she found a cool app that she could use her webcam to take a picture

of her face and place on a Soccer player template, where she could say whatever

she wanted and share it on her Facebook, she also found that one of her friends

was listed as one of the application fans on Facebook in the same page. By seeing

this Janet felt really convinced to give it a try and give a better performance than

her friend. she soon turned her camera on and started to say the main quote for

the perfume’s campaign: “Goal will make you look like a winner!” when everybody

looked at her, and her boss entered the room. She soon hide the application and

said to her boss that the research was going perfect. Her boss walked away from the

room saying “Janet, please show me what you got in 2 hours” and she said “alright!”,

when he left Janet posted her customized webcam recording on Facebook, closed

the page , and started to write about the features she found interesting about the site

to show her boss.


Home

Club

History

Interactive

Shout It Out Loud!

Exploratory user:Paul is Sean’s friend and he is really addicted to Razor Dragons, since the release

of the new website he is really happy that he could find everything he needs in

the website and went through almost all sections. Almost everyday he wants to

find new features in the website.

End Goal:Get to know the new updates about his favorite team and check some of the

awesome new features added to the site.

Experience Goal:Feel like a team player and that he is contributing to expand the Razor Dragons

community.


How can he get to know the latest news daily?

How can he get rewarded with special content just for fans ? How can the voice tone used in the website communicate directly with him?

How can the site boost his love for Razor Dragons and give him a feeling of proudness?

How can he feels as part of the Razor Dragons team?

The Story:Paul was so excited for the Razor Dragons match this weekend. On saturday he

went with his friends to the bar to watch the epic game of Razor Dragons against

Vancouver White Caps. He really had a good time watching the match while drinking

beer, and was also happy that Razors won by 2. All of his friends are part of the

Razor Dragons community and bought the interactive jersey on the online store

located on the main page of the website, after the match he took pictures of the

QR code located behind their jerseys. When he got home, he entered the main page

of the Razor Dragons website and noticed that all coverage about the recent game

was already updated a few hours after the game highlighted on the news area. On

the same page Paul logged in his Dragon fan profile, and saw notifications of new

comments on his page, then he clicked on the notifications and saw comments from

his friends about the match, after he replied the comments he uploaded pictures

he took of him and his friends at the bar on his profile. After that he reviewed his

personal status and found out that he has the highest score in quizzes regarding his

knowledge about the team compared to his friends and just got rewarded with an

exclusive wallpaper with the autograph of all players of the team in high resolution.

He soon got really excited, and commented the fact on his Facebook page, when all

of his friends asked him if he could send the picture for them. After that he got back

to the main page of the website and clicked on the online store icon located at the

top menu bar of the website. When he got there he took a look at the recently release

Razor Dragons Sports water bottle. When he checked out he received a message

“Congratulation! being a team player can make you spend a lot of energy! make sure

to use this great water bottle to kill your thirst and recover your energy! be sure to

keep the flames blazing!”. Now Paul is really excited waiting for his bottle to arrive

and continue playing soccer with his friends on Sundays.


Home

Media

News

Game Notes

Sign In

Fan Corner

Personal Profile

Wall & Comments

Pictures

Rewards

Exclusive Downloads

Dragons Store

Watter Bottles

Soccer Team and Interactive WebsiteUser flows,wireframes and mock-ups

!"#$%&'%"($)*

Start/ Stop Point (Index page)

Game Notes

User logged in?Log in PageNo

le Page(Comments/ Wall)

YesRegistered?

No

Yes

Pictures Page

Upload Finished?

Yes

No

Rewards Page

Exclusive contentDownload / Virtual Card

Received Page

Yes

No

Dragons Store

Souvenirs

Water Bottles

Fan Corner

Check Out

Buy Item?

No

Yes

rm Paymentand Shipping method

Select Paymentand Shipping method?

Yes

Print Receipts?

No

le(printable version)

Yes

Sign up page

rm Membership?

YesNo

Upload Pictures?

cient for new reward?

Share content?

Yes

No

User FlowExample of an experience on the site.

Club sectionHistory, facilities and foundation

Legend:1.0 Rollover drop down menu

2.0 - 3.0 Slide changing image

4.0 Interactive flash animation where users

can view Razor Dragons’ historic events

5.0 Facebook/Twitter Feed

Season tickets

Image link to “Buy tickets“ section

Next game

Image showing Razor Dragons’ next game

Standings

Shows current posion on the tournament

1.0

2.0

3.0

4.0Flash animate timeline

5.0

Season tickets

Next game

Standings

Twitter & Facebook Feed

Legend:1.0 Rollover drop down menu

2.0 Slide changing image

3.0 Image Gallery

Season tickets


Next game


Standings


1.0

2.0

3.0

Season tickets

Next game

Standings


Legend:1.0 Image title banner

2.0 Video showcasing some of the

foundation’s charities

3.0 Image Gallery1.0

2.0

3.0

News sectionHeadlines, Game notes, Dragon TV, Media Policy

Legend:1.0 Dropdown menu

2.0 Image related to the headline content

Season tickets


Next game


Standings


Season tickets

Next game

Standings


1.0

2.0

Legend:1.0 Image related to news content

2.0 Link to the page of the article

Season tickets


Next game


Standings


Season tickets

Next game

Standings


1.0

2.0

Legend:1.0 Main video player

2.0 Menu to choose channels

3.0 Gallery showing latest videos

1.0

2.03.0

Legend:Season tickets


Next game


Standings


Season tickets

Next game

Standings


Dragonettes SectionRazor Dragons’s Cheerleaders

Legend:1.0 Carrousel Gallery

2.0 Navigation controls

3.0 Image gallery showcasing main

Dragonette

4.0 Interactive flash animation where users

can view Razor Dragons’ historic events

5.0 Facebook/Twitter Feed

Season tickets


Next game


Standings


Season tickets

Next game

Standings


1.0

2.0

3.0

4.0

Dragon Store sectionMain page, Product listing, My cart page, check-out page

Legend:1.0 Link directing to the cart section showing

products added to the cart.

2.0 Search field

3.0 menu showing main categories available

on the online store

4.0 Gallery showcasing new products

1.0

2.0

3.0

4.0

Legend:1.0 Buttons to filter products by type

2.0 Sorting products option

3.0 Sub section of the main category

4.0 Link redirecting to checkout page.1.0

2.0

3.0

4.0

Legend:1.0 Description showing how many products

are in the cart

2.0 Link redirecting to previous shopping

page

3.0 Frame showing information and pictures

of the product

4.0 Field to type promo codes

5.0 Gallery showing related products

6.0 Shipping method selector

7.0 Final price with shipping

1.0

2.0

5.0

4.0

3.0

6.0

7.0

Legend:1.0 Picture featuring acquired product

2.0 Gallery showing options of di!erent

styles and colors for acquired product

3.0 Dropdown menu to select the size

4.0 Checkout button to do the purchase

5.0 Gallery showing related products2.0

3.0

5.0

1.0

4.0

Buy Ticket sectionOnline Ticket and seat selection

Legend:1.0 Banner

2.0 Picture of the stadium seats

3.0 Rollover gallery that changes the picture

in 2.0 and shows values for the seats1.0

2.0

3.0

Personal ProfileProfile wall main page

Legend:1.0 Profile picture (avatar)

2.0 User Level meter

3.0 Stars and trophies earned

4.0 Text input field

5.0 Comments left for the user

6.0 Messages left by friends on the wall

7.0 Friends added to the profile

8.0 Messages left by the user

8.0

6.0

2.0

7.0

5.0

4.0

1.0

3.0


Soccer Team and Interactive WebsiteVisual explorations, Visual guides and Mock-ups

!"#$%&'%"($)*

Visual explorationsConceptual visual mock-ups of for the website

Visual GuidesWebsite logo

Description:Blue indicates Clear Space. The blue area must be kept

free of other elements. Grey padding indicates Safe Zone.

Magenta indicates type and element alignment and

boundaries.

The minimum required Clear Space is defined by

the measurement ‘X’

(equal to the height of the uppercase letters,

known as the ‘cap-height’. The width is equal to

the height.)

Color specificationsColors used for the Razor Dragons

Font specificationsFonts used for the Razor Dragons franchise

Suggested Colour Splits

R217 G255 B0C3 M0 Y0 K100#d9!00

R10 G0 B107C100 M100 Y29 K28#0a006b

R0 G88 B178C93 M70 Y0 K0#0158b2

R149 G193 B2C48 M0 Y100 K0#95c102

QuickExpress

Verdana

FONTS USED IN LOGOTYPE

FONTS USED IN WEBSITE

!"#$%&'()*+,-./

0123456789:;<=>?@ABCDEFGHI

JKLMNOPQRSTUVWXYZ[\]^_àbc

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_àbcdefghijkl

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQR+STUVWXYZ[\]^_àbcdefghijkl

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQR++STUVWXYZ[\]^_àbcdefghijkl

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQR+STUVWXYZ[\]^_àbcdefghijkl

Font size:Body: 10pt

H1: 14pt

Mock-ups

Razor Dragons Online TV pageMain page

Headlines pageMedia Policy page

Shout it out loud! pageDragonettes page

Ticket buying pagePersonal Profile page

Shop display gallery pageOnline shopping main page



Documents

Razor Dragons Interactive Design Document