Interaction Design Document
Razor Dragons Online Robert Soo
Objective Overview - After waiting nearly a decade the North Vancouver Razor Dragons, a team of highly trained mixed martial arts athletes have recently been awarded an expansion sports franchise.
The Razor Dragons are owned an operated by Sportuitus Investments. This organization has a large investment and is interested in creating exposure and excitement around the new sports franchise. Sportuitus Investments recently spent 175 million dollars on marketing, rights and renovations to a local stadium as a part of their expansion pitch. Our mission as an organization is to create the best sports experience for our fans. To that end, the organization wants a website to be developed that will be a part of our fans daily lives. A place where all British Columbians feel this is not just North Vancouver’s team, but; BC’s team. We want to create a place for fans to share, interact, and engage with sticky, compelling online content.
Audiences
·Primary audiences: to engage - Sports Fans - Sports Families ·Secondary audiences: to educate - Local Companies - Parents of Athletes
Brand Considerations - We will be working very hard on strengthening our brand with our new customers. It’s important to balance the fierceness
of competition and our commitment to winning while providing a friendly, fun, and intuitive experience for our broad group of sports fans.
Competative Analysis
http://canucks.nhl.com The Vancouver Canucks 1. Definitely one gets the feel that the site is targeted to fans rather than new comers to the sport. With terms and categories that might confuse new visitors. The site gives an impression that the team is a vibrant one, that there’s always something going on either on the ice or in the community. 2. Fixed width layout, categories broken down into stacked boxes, often with a number of related links/pictures/articles for each. Front page content appears prioritized by most recent articles. There are so many options available, it is difficult to try to find exactly what you are looking for. 3. Content: Hockey, Hockey, Canucks. A lot of content seems to be constantly updated on the site. Large number of writers posting interesting articles along with fan made content act as an incentive to check back. 4. Have a section for fans, people could write a blog or post on their forums, which could be displayed on the front page. Polls and questionnaires also encouraged interaction. 5. Site loaded quickly, used a fixed width layout so would fit only nearly all standard screens or bigger. 6. Website seems to try to prioritize the team in name or as a concept rather than through its logo (which is good). Images from team’s past uniforms/logos constantly present – whale logo usually featured on the header and that is it (other than the site colour scheme).
http://www.tnawrestling.com Total Nonstop Action Wrestling 1. Use of Social Networking resources located at the very top, Youtube, Twitter, Facebook. Interactive banners highlight articles, personalities on their roster, and upcoming events. Has a section that discusses alternate language options in their programming, might be good to have multi-lingual options. 2. Media, text, and image boxes are laid out in a somewhat haphazard way. Overall look is somewhat difficult to digest. Roll over menu bar near the top takes visitors to other aspects of their site, though sitemap at the bottom of the main page probably easier to navigate through. Some of the links open to a splash page in a new window – somewhat jarring. 3. Site felt somewhat shallow in content, roster biographies featured primarily photos and a short description of the athletes and little else. The rest seemed to cover their Pay-per-view, television, and live events primarily with little other content in terms of articles or fan interaction besides the social networking options provided. Online store present and offers a plethora of related merchandise, sales packages might attract visitors to check back every so often. 4. Very limited access for users, no option to sign up as a member of the site and other resources that other sites had. 5.
Site loaded without issue. Appeared to function fine.
6. Content of the site overflowing with a range of images and media options, loss of cohesion. Logo is used many times in the same page – de-saturates impact overall. Overall, site felt very shallow in terms of content and not very satisfying.
http://www.ufc.com Ultimate Fighting Championship 1) Iphone apps available, partnership with the community – site provides local places that show their pay-per-view fights. Otherwise with images and video media. Outside social media networking links situated at the very bottom of the mainpage. 2) Fixed Width Layout. Large splash animation/interactive tool at head of the main page. Menus organized at the top into recognizable categories without much jargon. Site following separated into three columns. Some articles command a larger amount of space and display more article text. Images smallish, and feature a de-saturated look, overall a white, black and red colour scheme giving it a grittier feel. 3) Fighters introduced not so much as personas but in more technical terms in relation to their skills, strengths, and fighting record. Breakdown of percentages, styles, biography, and interviews brings the fighters more down to earth as highly trained athletes rather than entertainers. Links each fighter’s profile to their own personal webpage. 4) Offered 10% off on your first purchase in the online store after signing up for an account. Able to tweet to athletes directly, making it so that the fans feel more connected to their favourite fighter. Updated media content every couple of days. Day/Hr/Min/Sec counter until next big event, builds excitement. 5) Loadtimes appeared to be average. Fixed Width Layout, but larger menu buttons and splash animation gives more of an impact. All links tried out worked without issue. 6) Colour scheme and de-saturated images gives a stark, no-nonsense feel to the site, setting it apart from sports entertainment franchises such as professional wrestling. Although more wordy overall, pages appear less crowded and more easily negotiable .
http://wcl.com/ World Combat League 1) In a similar vein as mixed martial arts, this league focuses on individual fighting styles and striking techniques, whereas throws, takedowns and groundwork are disallowed. The general feel appears to take after UFC but appears sportier rather than gritty. The league is relatively new, being aired on the American life network. Women are portrayed as equals to their male counter-parts, not exploited but powerful and trained in their own right. 2) Multi-video panel situated in the middle of the eight participating teams is quite striking. However, the two columns that follow are somewhat sparse. Images small, 3rd party merchandise banners distracting. Menu bar at the top of the page, categorized logically. 3) Very little story presented on site. Other than updated media and updates to the site’s functionality, very little to encourage one to keep visiting often. 4) No opportunity to participate directly at this time, prominent links to Twitter, Facebook, and Myspace displayed however. 5) Site loaded without issue, however content is still not all there yet. Information regarding history, events, the online store, fighter biography, etc. not yet available. 6) Most interesting part of the site is the 8 distinct regional teams that comprise the league, each having their own lineup and logo. Colour scheme predominantly black and grey but mixed colour from images presented. Site appears to try to emulate other fighting franchises (wrestling, MMA)
http://whitecapsfc.com Vancouver Whitecaps Soccer 1) Prominent links to outside social networking sites such as, Twitter, Youtube, Facebook, Flickr. Newsletter sign up as well as RSS Feed. Youth Development program offers training camps and community initiatives – getting people to take interest in the sport. 2) Site appears short and concise, many links leading to outside web resources. Relatively easy to navigate. 3) Very community oriented. Site does not appear to offer that many resources that would have visitors return very often. Updated media, articles, and events. Newsletters and RSS feeds available. No online store. Merchandise bought locally from select retailers. 4) Have a Pub partners program where preferred pubs & restaurants offer discounts for season ticket holders. 5) Site loaded without issue, only one instance experienced when xml document failed to load. Small size made efficient use of space with very little scrolling necessary. 6) Presents a very down to earth experience, site straddles a semi-professional and professional sports site in looks and feel. The strong local community focus made the experience more personal. Predominantly blue and black colour scheme made white text and outside social networking options stand out.
http://www.wwe.com World Wrestling Entertainment 1. Heavily features their wrestlers, matches, and special events. Use of Social networking and newsletters. 2. Combination of articles and banners. Menu bar going into a large number of submenus though they are never explained. Animated interactive newsreel, featuring articles. Special subpages for special events (http://survivor10.wwe.com). Fan community/content accessible via teeny tiny link in the upper right 3. Site concentrate on the various personalities that comprise the individual athletes, either their exploits in the ring or out and about. Each athlete’s profile (perhaps fictional?) gives an account that really lionizes the men and women as well as clearly outlines their motivations and goals 4. Fan community allows profiles that could be featured on the website as well as providing a clearance section for merchandise as well as promotional codes to the online shop. Links to Facebook, Twitter, and Youtube – more content as well as connecting fans 5. Load times are good, uses a fixed width layout so that nearly all monitor sizes would be able to view it. One feature, the invite option in the fan community site did not work though might have been interesting to see as what its function was 6. Not so subtle difference between sports entertainment and sports. Wording always formulated to generate hype and make things larger than life. Strong use of sex appeal throughout, clear division between superstar and diva personas. Colour scheme quite varied, giving the site a hectic look
Inspirational
http://www.easports.com/mma/overview/platform/360 EA Sports MMA Video Game
EA sport’s promotional site for their mixed martial arts game features a number of positive factors that make it straddle the grittiness of the sport and the sensationalism as entertainment. Aesthetically, the colour theme brings together the whole site using a combination of black, white, gold and red. The site maintains this look consistently throughout and unifies the overall feel of the site. One issue that might arise with the look is that the two fighters on the sides may be cropped out on non-widescreen computer monitors. Other small things such as the countdown clock, which is prominently displayed, emphasizes the feel of something impending and adds to a sort of tension to the site. A well-organized section featuring the fighters themselves is important, as how fans relate to the athletes makes the sport that much more personal . However, more detailed information could prove to be interesting beyond just statistical data and is something to look into further. A blog from the promoter is a good feature designed to generate returning fan interest. Fans are also encouraged to participate via tools such as Twitter, Facebook, and a site forum to encourage discussion regarding the game. An interesting feature is the site minigame that gives the fans the ability to generate their own custom fighter, who is then ranked on a leader board based on how well they do in the game.
http://www.xterrawetsuits.com XTerra Wetsuits This site featuring wetsuit sports equipment is very slick, using a combination of different web authoring techniques such as CSS, Javascript, and Flash. Along with great organization and visuals, makes for a very compelling site. Several positive design choices were made when developing this site which could benefit our site as well. Navigation is easy, many of the pages link back to related pages, allowing the site experience to flow uninterrupted rather than always having to refer to the drop down menu bar. They reach out to the both the online community in a number of different methods such as via online blog, as well as postings for clubs, coaches, and races. Members who sign up for an account with the site are also treated with newsletters for their newest products as well as exclusive discounts and promotions that become available. Another area of interest is the inclusion of Swim tips from professional athletes; this is a nice touch and can be easily transplanted to help encourage fans to become more knowledgeable about the sport. Detailed driving instructions and livechat support is also another nice touch that is included within the site. How a chat function might be implemented could drastically affect the experience of a site.
Concept & Controlling Idea The website being proposed is designed for a mixed martial arts team franchise, the Razor Dragons, within a larger overall league. This concept of portraying mixed martial arts as a team sport where individuals compete one on one against other teams makes for a unique dynamic between pre-existing team-based and individual-based sports which will be important in the construction of the franchise identity. The strategy will proceed by giving a nod to the sports entertainment industry, professional wrestling, which has strongly employs the concepts of sensationalism and spectacle which our franchise can also utilize. Like in professional wrestling, a core attraction of the Razor Dragons will be the strong identification the audience has for the individual fighters as well as their place within the overall team. Compelling character driven content would be a gateway for the visiting fan into the franchise as a whole, eventually encouraging the idea that with his/her participation, the fan can feel as a part of the Razor Dragon team. It is important to note that it would be important to distinguish the Razor Dragons from the actual sports entertainment genre, as the goal is to impart a similar fantasy for the fans but also to keep the authenticity of the mixed martial arts sport. The world of the Razor Dragons that the website wants to portray will be a departure in form from most other types of standard sports, and sports entertainment. In this case, the look and feel we are targeting would be more into the extreme type sports sphere. It is not clean like amateur wrestling or disingenuous like professional wrestling, mixed martial arts is gritty, dirty and brutal. It is always about the next challenge, where the glory is in winning but even losing makes one that much stronger. A large function of the site will be to connect with fans and to keep those connections on a regular basis. One function offered on the site will be the option for the visitor to create an online fighter persona to act as an online avatar for both the site and on other social media networks. These personas would allow the user to interact with the online community on a deeper level through events such as online tournaments, and the potential for this persona to grow and improve (either via ranking or improved characteristics/options) would encourage fans to remain active in the online community. Another avenue to pursue would be the franchise relationship with the community at large. In this realm the Razor Dragons will be proponents of the mixed martial arts sport and physical training as a form of self-defense. Events could be held at local sports clubs or schools where members of the Razor Dragon team could coach kids in both defense techniques and the responsibility that such training brings.
MoodBoard The feel: Awesomeness, Intensity, Social, Excitement
Vitar The Visual Target: Bold, Stark/High Contrast, Explosive Impact, Solid
BeatBoard story or system driven showing clear drawings for key moments in the experience.
User Scenarios Prime User: Doug During lunch Douglas sits down at his desk and accesses the Razor Dragon’s website, he is an avid fan of the mixed martial arts team and plans to check his account as well as buy tickets for a coming match. As Douglas loads the site on his web browser he glances over the news listings displayed on the home page, noting that an interesting article on how many martial arts techniques from more traditional fighting systems have been adopted into MMA. Douglas makes a mental note to check his email when he gets home as he knows that a newsletter sent to his home email address will remind him of the update. Douglas clicks on the accesses the Schedule submenu to check out the schedule overview to double-check the exact time and place of the match. Once confirmed he selects on the tickets link in the menu bar to access the store. A helpful menu message pops up to remind Douglas that if he is purchasing anything from the store than that he should first log into his Razor Dragon fan account first as any purchases he makes under his account will go towards earning him rewards and upgrades for his Virtual Fighter avatar. Quickly logging in, Douglas goes through the process of using the location function to choose what looks to be some prime seating that is still available. He completes his purchase and is happy to receive both a confirmation message as well as a note to check his Virtual Fighter account as this special upcoming event also unlocks a special limited time available tattoo decal to put on his fighter. After checking out the new look on his fighter/avatar Douglas can see that his friend and fellow co-worker, Raj, had sent him a fan edited video. The 30 second video heavily features Raj’s favourite Razor Dragon delivering some bone-crushing attacks and ending with a loud victory pose. Douglas writes a quick message to his friend about booking the upcoming match, he knows that Raj will be down town during that day but suggests that he perhaps drop by in one of the sports bars listed that are showing the match if he gets the chance. Douglas will try to wave at him while he’s up close to the action.
User Scenarios Naïve User: Kelly It being the holiday season, Kelly is at home accessing the Razor Dragon’s website to purchase her boyfriend, Craig, a gift knowing that the Razor Dragons are his favourite MMA team. Kelly remembers that according to Craig’s Facebook page, that his favourite fighter is Vince Fontaine. As she couldn’t remember the exact URL to the website she got there easily enough by following the widget on Craig’s Facebook page. The main page has many different menu options available as well as featuring some pretty cool images and videos. Kelly immediately notices the SHOP option prominently displayed but out of curiousity Kelly clicks on the ‘The Sport’ option and checks out both the history behind the sport and some of the rules. Kelly admits, that the sport somewhat confused her, but could begin to see what Craig found so interesting in it. Kelly then explores the fighter menu to check out Craig’s favourite fighter, Vince Fontaine. Perusing the fighter’s interviews and information, this Vince guy really does seem pretty cool and Kelly is interested to see that he has something of his own logo on the Razor Dragon merchandise that is linked to the store itself. Selecting the link, Kelly is brought to the Razor Dragon store featuring all the merchandise that feature’s Vince Fontaine particular logo. Kelly thinks that the sweatshirt would be a good gift and promptly purchases it. During the purchasing process the system asks Kelly, who is not logged in as a fan, if she wants to become a fan and/or is purchasing a gift for a fan. Kelly notices that if she does register than the first transaction on the site is 10% off. With nothing to lose Kelly chooses the first option and undergoes the registration process presented through the link but selects the second option that the object in question is a gift for another fan. After receiving a confirmation email for the purchase, Kelly is also sent a code that can be redeemed for the gift recipient for online rewards. Kelly makes a note to provide Craig with the code when she gives him his gift.
User Scenarios Exploratory User: Jim
Jim, being a fan of mixed martial arts was surprised and happy to hear that a new MMA franchise has open up locally. Being referred by his friend Gary, Jim goes to the Razor Dragon’s website. The main page of the site shows a lot of awesome videos and images and Jim is almost doesn’t know where to start. Being already familiar with the sport Jim goes right to the Fighter rosters to check out some of the fighters on the team. Jim is pleased at the amount of information presented for each fighter, fascinated by their fighting statistics, their particular techniques, as well as perceived abilities laid out in various diagrams. Jim notes of a couple of fighters that he may be interested in following in the future but for now continues with his exploration of the site. Next, Jim checks out some of the media available on Razor Dragon matches and is interested in finding that some podcasts are also available that discuss the sport. Jim downloads the pod casts and continues on. He remembers that Gary’s Myspace page had a neat looking widget that featured a virtual Razor Dragon fighter and can see a promising option in the Media > Social Media menu. Selecting it and following it to the Myspace option, Jim is notified that only members are able to make use of this function. Jim selects the presented link to sign up as a fan on the site. He is prompted the regular sorts of questions but is also asked if an existing member had referred him to the site. Jim could either drop in Gary’s email address or account name into the field as it states that the referrer’s virtual account will be rewarded with such referrals. Being a bud, Jim quickly checking Gary’s Myspace page and enters the account name listed there though notes that if he wasn’t sure, that this option could be filled in later. After confirming his registration Jim is listed a number of newly accessible privileges of being a fan. He has access to the forum, can create computer backgrounds and videos with stock footage and images on the site, can access the Social media widget extensions as well. More interestingly Jim now has the option of creating a virtual Razor Dragon fighter who acts as an avatar on the website. Pulling up the option, Jim inputs some options into creating his fighter such as hair, looks, colour scheme, and weight class. After completing the creation, Jim’s avatar doesn’t look all that much, but is pleasantly surprised to be notified that as new member he is gifted a special item for his avatar, a special haircut that he can switch in. Also, by mentioning Gary as his referrer, Jim receives another item for his virtual fighter. Jim learns that by using the available widgets for his Facebook page that Jim could earn further points and/or items in the future to customize his avatar or be able to take part in special deals in the online shop. Jim is happy.
User Flows Prime User: Doug
User Flows Na誰ve User: Kelly
User Flows Exploratory User: Jim
Site Structure Map
System Design Models Prime User: Doug
System Design Models Na誰ve User: Kelly
System Design Models Exploratory User: Jim
Wireframes Home Page
Wireframes Razor Dragons Online
Wireframes Fan Page
Conceptual Mockup
Conceptual Mockup
Conceptual Mockup
Finalized Mockup Home Page
Finalized Mockup Razor Dragons Online
Finalized Mockup Razor Dragons Online: Challenge
Finalized Mockup Fan Pages
Finalized Mockup Fighter Page
Finalized Mockup
RAZOR DRAGONS Online Style Guide
TYPOGRAPHY IMPACT (Head Text) 120pt
ABCDEFGHIJKL NOPQRSTUVWXYZ
24pt (Menu Text & Article Title Text) abcdefghijklmnopqrstuvwxyz 0123456789 18pt (Advertisement Text) abcdefghijklmnopqrstuvwxyz 0123456789 12pt (Body Text) abcdefghijklmnopqrstuvwxyz 0123456789 Tahoma (Login Text) 10pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
COLOUR Red 255 Green 255 Blue 255 C M Y K
0 0 0 0
Web: #ffffff
Red 255 Green 242 Blue 0 C M Y K
4 0 93 0
Web: #fff200
Red 0 Green 0 Blue 0 C M Y K
75 68 67 90
Web: #000000
Red 143 Green 3 Blue 3 C M Y K
27 100 100 30
Web: #8e0303