* 2'* * ;'&G !&, *5 ,!. +! & ' -% &,
!"#$%&'%"($)* Soccer Team’s and Interactive Websites Competitive Analysis
Engagement: 7.0 / 10 | Content: 8.0 / 10 | Concept: 5.0 / 10 | Rewards: 9.0 / 10 | Technical: 9.0 / 10 | Brand: 9.0 /10
São Paulo F.C.
Brazilian Soccer Team Strengths The 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
www.saopaulofc.com.br
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 .
Weakness The 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.
Opportunities The 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.
Santos F. C.
Engagement: 6.0 / 10 | Content: 9.0 / 10 | Concept: 5.0 / 10 | Rewards: 6.0 / 10 | Technical: 9.0 / 10 | Brand: 10 /10
Brazilian Soccer Team Strengths The 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
Weakness The 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.
Opportunities There’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.
www.santosfc.com.br
each other and share experiences regarding the team.
Engagement: 5.0 / 10 | Content: 8.0 / 10 | Concept: 5.0 / 10 | Rewards: 3.0 / 10 | Technical: 8.0 / 10 | Brand: 10.0 /10
S. E. Palmeiras
Brazilian Soccer Team
Strengths As 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 different and old-fashioned version of it.
Weakness The 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.
Opportunities On the site’s sidebar there is an gallery with great pictures
www.palmeiras.com.br
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.
S. C. Corinthians P.
Engagement: 8.0 / 10 | Content: 8.0 / 10 | Concept: 7.0 / 10 | Rewards: 8.0 / 10 | Technical: 9.0 / 10 | Brand: 10 /10
Brazilian Soccer Team Strengths The 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 discreet and blends with the site design.
Weakness The footer is too simple and just has the sponsors’ logo. The homepage font size is very small making the news difficult to ve read in computers with higher resolutions.
Opportunities A great idea on this site is a interactive hotsite for children, where they can play games, activities, download stuff 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.
www.corinthians.com.br
to reflect the team’s one hundred year. The ads are very
Engagement: 5.0 / 10 | Content: 8.0 / 10 | Concept: 5.0 / 10 | Rewards: 3.0 / 10 | Technical: 9.0 / 10 | Brand: 8.0 /10
A. C. Milan
Italian Soccer Team Strengths The strongest thing about this site is the option to choose among 8 different 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 effects that tells some of the news about the team.
www.acmilan.com
Weakness Browsing 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.
Opportunities In partnership with the publisher Panini, the site offers the opportunity for supporters to upload their photo and create stickers online which are then sent by mail to users.
Liverpool F. C.
Engagement: 8.0 / 10 | Content: 9.0 / 10 | Concept: 7.0 / 10 | Rewards: 4.0 / 10 | Technical: 8.0 / 10 | Brand: 9.0 /10
English Soccer Team Strengths The 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.
Weakness When 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
Opportunities The 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.
www.liverpoolfc.tv
sport related content.
Engagement: 5.0 / 10 | Content: 8.0 / 10 | Concept: 7.0 / 10 | Rewards: 3.0 / 10 | Technical: 9.0 / 10 | Brand: 8.0 /10
Vanconver Whitecaps F.C. Canadian Soccer Team Strengths The 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
whitecapsfc.com
tickets and merchandise facilitating users who wants to see the next game live or buying a jersey of his team.
Weakness The 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.
Opportunities The 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.
Chicago Fire F.C.
Engagement: 8.0 / 10 | Content: 10. / 10 | Concept: 7.0 / 10 | Rewards: 7.0 / 10 | Technical: 6.0 / 10 | Brand: 9.0 /10
USA Soccer Team Strengths
The 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 affect the legibility and is based on the colors of the team’s 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.
Weakness Besides 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.
Opportunities One 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.
www.chicago-fire.com
emblem. There is a specific section for videos and
Engagement: 9.0 / 10 | Content: 7.0 / 10 | Concept: 8.0 / 10 | Rewards: 6.0 / 10 | Technical: 3.0 / 10 | Brand: 7.0 /10
Kansas City Wizards USA Soccer Team Strengths The 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
www.kcwizards.com
as news, schedules for next games and a link to buy tickets and to buy team’s merchandise.
Weakness The 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 difficult 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.
Opportunities The 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.
Toronto F. C.
Engagement: 8.0 / 10 | Content: 8.0 / 10 | Concept: 8.0 / 10 | Rewards: 8.0 / 10 | Technical: 5.0 / 10 | Brand: 6.0 /10
Canadian Soccer Team Strengths The 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
Weakness The 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.
Opportunities A 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 effective interactive tool.
www.torontofc.ca
such as ticket buying, and shopping
Engagement: 9.0 / 10 | Content: 9.0 / 10 | Concept: 9.0 / 10 | Rewards: 8.0 / 10 | Technical: 5.0 / 10 | Brand: 8.0 /10
Seattle Sounders F.C USA Soccer Team Strengths Visually, 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
www.soundersfc.com
ticket buying and an online shop. There is also an option available for Spanish language.
Weakness Due 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”.
Opportunities While 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.
New England Revolution
Engagement: 7.0 / 10 | Content: 6.0 / 10 | Concept: 6.0 / 10 | Rewards: 7.0 / 10 | Technical: 8.0 / 10 | Brand: 6.0 /10
USA Soccer Team Strengths
The 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..
Weakness The 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 state a lack of typographical identity on the website containing a mixture of different fonts.
Opportunities The 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.
www.revolutionsoccer.net
to include relevant information). It is also important to
Engagement: 10 / 10 | Content: 8 / 10 | Concept: 10 / 10 | Rewards: 10 / 10 | Technical: 9 / 10 | Brand: 8 /10
UNIQLO
Japanese Clothing Store Strengths Uniqlo’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
www.uniqlo.com
own tunes composed with voices. Those interactive applications are really creative and inspiring.
Weakness The 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,
Opportunities The 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
CMISCM.
Engagement: 10 / 10 | Content: 8.0 / 10 | Concept: 10 / 10 | Rewards: 9.0 / 10 | Technical: 8.0 / 10 | Brand: 5.0 /10
Interactive Designer Online Portfolio Strengths The 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 different kinds of animation making the pages really diverse and innovative. The handicraft section has a very clean and creative way of showing content.
Weakness The 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.
Opportunities Emphasizing 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.
cmiscm.com
Engagement: 10 / 10 | Content: 9.0 / 10 | Concept: 10 / 10 | Rewards: 10 / 10 | Technical: 8.0 / 10 | Brand: 9.0 /10
Plakker Album
Virtual Stickers Album Strengths The 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.
Weakness To 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
www.plakker.net
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.
Opportunities This 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.
Nike Sportswear Online Store Strengths The 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.
Weakness This site works really well and is difficult 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.
Opportunities Everything 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.
Engagement: 8.0 / 10 | Content: 9.0 / 10 | Concept: 10 / 10 | Rewards: 7.0 / 10 | Technical: 9.0 / 10 | Brand: 10 /10
!"#$%&'%"($)* Soccer Team and Interactive Website Creative 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,
Beatboards
How the experience is going to be
reflecting in how we feature the informations and also the voice tone used.
Mood Board
Persona motivations and aspirations
VITAR #01
Visual Target 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!
Webcam
VITAR #02
Visual Target 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. .
Language used
Our tone of voice We say:
We say:
“Good results drag on for the Dragons. We’re still on top! sections inside the site”
“If you can’t take the heat, don’t mess with the Dragons…We won again!”
We don’t say:
We don’t say:
“Razor Dragons is in the first position of the tournament”
“Razor Dragons wins another game”
We say:
We say:
“Don’t let our flaming embers fade. Next time we’ll do better!”
“I’m proud to be a Dragon, and you? Share your love on Twitter!”
We don’t say:
We don’t say:
“Razor Dragons lost the game”
“Join us on Twitter”
We say:
We say:
“Follow the way of the Dragons. Join the crowd on Facebook!”
“Dragons 7 x 1 Lorem Ipsum. Dragons turned the opponents into ashes, as always!”
We don’t say:
We don’t say:
“Join us on Facebook”
“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 Website Information 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
Media
Interactive
Dragonettes
History
News
ISJ - Interactive Soccer Jersey
Meet the Dragonettes
Facilities
Game Notes
Shout It Out Loud!
About the Dragonettes
Razor Dragons Foundation
Dragons TV
Virtual Cards
Media Policy
Fan Corner
Dragons Store
Buy Tickets
Men
Personal Profile
Sign In
Jerseys
View our Pictures Status
Virtual Pins
Hoodies
Exclusive Downloads
Tees
Rewards
Dragon's Predictions
Acessories
Wall & Comments
Login
Women Contests Jerseys Hoodies
Messages
Tees Acessories Youth
Jerseys Tees Infant
Tees Headgear
Caps Beanies Souvenirs
Pins & Buttons Clocks Soccer Balls Calendars Water Bottles Cups & Mugs Plushies Decals Albums
Sign Up
Create a Site Path Diagrams and user navigation
Scenarios 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.
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 effective 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?
Experience Goal: Feel welcomed and familiar going through the sections of the site despite of his unfamiliarity with it.
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 office, 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
Razor Dragons Website
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
Home
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
Media
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
News
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 efficient 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.
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”.
Tasks he will need to perform to meet his end goal: 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?
Experience Goal: Feel welcomed and familiar going through the sections of the site despite of his unfamiliarity with it.
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
Razor Dragons Website
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,
Home
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
Club
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
History
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
Interactive
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.
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.
Tasks he will need to perform to meet his end goal: 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?
Experience Goal: Feel like a team player and that he is contributing to expand the Razor Dragons community.
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
Razor Dragons Website
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
Home
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
Media
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
News
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
Game Notes
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
Sign In
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.
Fan Corner
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
Personal Profile
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
Wall & Comments
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
Pictures
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
Rewards
and continue playing soccer with his friends on Sundays. Exclusive Downloads
Dragons Store Watter Bottles
!"#$%&'%"($)* Soccer Team and Interactive Website
User flows,wireframes and mock-ups
User Flow Example of an experience on the site. Dragons Store
Start/ Stop Point (Index page) Souvenirs
&) /le (printable version) Water Bottles
Game Notes
No
%$/rm Membership?
No Buy Item?
No
Yes
Yes
Print Receipts?
Fan Corner Yes
Check Out
Sign up page
No
Yes
Log in Page
User logged in?
%$/rm Payment and Shipping method
Select Payment and Shipping method? No
Yes Registered?
Yes Exclusive content Download / Virtual Card Received Page
% $)( ' (* /cient for new reward?
Yes
Upload Finished?
No Yes Share content?
'%/le Page (Comments/ Wall)
Yes
No
Rewards Page
Pictures Page
No
Upload Pictures?
Club section
History, facilities and foundation
Legend: 1.0 Rollover drop down menu 2.0 - 3.0 Slide changing image
1.0
4.0 Interactive flash animation where users Season tickets
2.0
can view Razor Dragons’ historic events 5.0 Facebook/Twitter Feed Season tickets
3.0
Image link to “Buy tickets“ section
Next game
Next game
Standings Flash animate timeline
Image showing Razor Dragons’ next game
4.0
Standings Shows current posion on the tournament
5.0 Twitter & Facebook Feed
Legend: 1.0 Rollover drop down menu 2.0 Slide changing image
1.0
3.0 Image Gallery Season tickets 2.0
Season tickets Image link to “Buy tickets“ section
Next game
Standings
Next game Image showing Razor Dragons’ next game Standings Shows current posion on the tournament
3.0
Twitter & Facebook Feed
Legend: 1.0 Image title banner 2.0 Video showcasing some of the foundation’s charities 3.0 Image Gallery 1.0
2.0
3.0
News section
Headlines, Game notes, Dragon TV, Media Policy
Legend: 1.0 Dropdown menu 2.0 Image related to the headline content 1.0
Season tickets
Season tickets Image link to “Buy tickets“ section
2.0
Next game Next game
Standings
Twitter & Facebook Feed
Image showing Razor Dragons’ next game Standings Shows current posion on the tournament
Legend: 1.0 Image related to news content 2.0 Link to the page of the article Season tickets
Season tickets Image link to “Buy tickets“ section
1.0
Next game Next game 2.0
Standings
Twitter & Facebook Feed
Image showing Razor Dragons’ next game Standings Shows current posion on the tournament
Legend: 1.0 Main video player 2.0 Menu to choose channels 3.0 Gallery showing latest videos
1.0
2.0
3.0
Legend: Season tickets Image link to “Buy tickets“ section Season tickets
Next game Image showing Razor Dragons’ next game Standings
Next game
Standings
Twitter & Facebook Feed
Shows current posion on the tournament
Dragonettes Section
Razor Dragons’s Cheerleaders
Legend: 1.0 Carrousel Gallery 2.0 Navigation controls 3.0 Image gallery showcasing main Season tickets
Dragonette 4.0 Interactive flash animation where users
1.0
can view Razor Dragons’ historic events 5.0 Facebook/Twitter Feed 2.0
Next game
Standings 3.0
Season tickets Image link to “Buy tickets“ section Next game Image showing Razor Dragons’ next game Standings Shows current posion on the tournament
4.0
Twitter & Facebook Feed
Dragon Store section
Main page, Product listing, My cart page, check-out page
Legend: 1.0 Link directing to the cart section showing products added to the cart. 1.0
2.0 Search field 3.0 menu showing main categories available
2.0
on the online store 4.0 Gallery showcasing new products
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 1.0
3.0 Frame showing information and pictures of the product
3.0
4.0 Field to type promo codes
2.0
4.0
5.0 Gallery showing related products 6.0 Shipping method selector
5.0
6.0
7.0
7.0 Final price with shipping
Legend: 1.0 Picture featuring acquired product 2.0 Gallery showing options of different styles and colors for acquired product 3.0 Dropdown menu to select the size 1.0
4.0 Checkout button to do the purchase
2.0
5.0 Gallery showing related products
3.0 4.0
5.0
Buy Ticket section
Online Ticket and seat selection
Legend: 1.0 Banner 2.0 Picture of the stadium seats 3.0 Rollover gallery that changes the picture 1.0
2.0
3.0
in 2.0 and shows values for the seats
Personal Profile
Profile wall main page
Legend: 1.0 Profile picture (avatar) 2.0 User Level meter 3.0 Stars and trophies earned 2.0
1.0
4.0 Text input field 3.0
4.0
5.0
6.0
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
7.0
8.0
Twitter & Facebook Feed
!"#$%&'%"($)* Soccer Team and Interactive Website
Visual explorations, Visual guides and Mock-ups
Visual explorations
Conceptual visual mock-ups of for the website
Visual Guides Website logo
Description: Blue indicates Clear Space. The blue area must be kept
The minimum required Clear Space is defined by
free of other elements. Grey padding indicates Safe Zone.
the measurement ‘X’
Magenta indicates type and element alignment and
(equal to the height of the uppercase letters,
boundaries.
known as the ‘cap-height’. The width is equal to the height.)
Color specifications
Colors used for the Razor Dragons
Font specifications
Fonts used for the Razor Dragons franchise
FONTS USED IN LOGOTYPE QuickExpress R217 G255 B0 C3 M0 Y0 K100 #d9ff00
R10 G0 B107 C100 M100 Y29 K28 #0a006b
Suggested Colour Splits
R149 G193 B2 C48 M0 Y100 K0 #95c102
R0 G88 B178 C93 M70 Y0 K0 #0158b2
!"#$%&'()*+,-./ 0123456789:;<=>?@ABCDEFGHI JKLMNOPQRSTUVWXYZ[\]^_`abc FONTS USED IN WEBSITE Verdana
!"#$%&'()*+,-./012345678 9:;<=>?@ABCDEFGHIJKLMNOPQR STUVWXYZ[\]^_`abcdefghijkl !"#$%&'()*+,-./012345678 9:;<=>?@ABCDEFGHIJKLMNOPQR+ STUVWXYZ[\]^_`abcdefghijkl !"#$%&'()*+,-./012345678 9:;<=>?@ABCDEFGHIJKLMNOPQR++ STUVWXYZ[\]^_`abcdefghijkl !"#$%&'()*+,-./012345678 9:;<=>?@ABCDEFGHIJKLMNOPQR+ STUVWXYZ[\]^_`abcdefghijkl Font size: Body: 10pt H1: 14pt
Mock-ups
Main page
Razor Dragons Online TV page
Media Policy page
Headlines page
Dragonettes page
Shout it out loud! page
Personal Profile page
Ticket buying page
Online shopping main page
Shop display gallery page