04/15/14 1.0 Original document User Experience/Information ...€¦ · AZB_mapleStory_MainWebSite_extV1.3.pdf MAPLE STORY SITE REDESIGN • SITE MAP Home Nav News Home Page Maintenance

User Experience/Information Architecture

Site Redesign

V 1.0

Date Version Description04/15/14 1.0 Original document

User Experience and Information ArchitectureFile: v 1.3

ofLast Modified: 04/16/14 2 23AZB_mapleStory_MainWebSite_extV1.3.pdf

MAPLE STORY SITE REDESIGN • SITE MAP

Home

Nav

NewsHome Page

MaintenanceWhat is

MapleStory?OfficialForum

FanSItes

Classes &Jobs

Classes &Jobs Sub

Page

New PlayerGuide Rankings

Wiki(External Site)

Media

MediaPage

Article

FeaturedContent Updates

ContentUpdateArchive

MarvelMachine

Game Info Home Page

CommunityHome Page

1.0

4.0

10.0

9.0

15.0

14.0

7.0 12.0

13.0

13.1

13.3

17.0

6.0

5.0

11.0 11.1 16.0

8.0

Global Nav

Footer

Your Account Support Nexon America Policies & Agreements

Games

AccountSettings

AboutNexon

PrivacyPolicy

Earn FreeNX

BuisinessOpps.

UserAbuse

KarmaKoin

InvestorRelations

PurchaseNX

Careers Terms ofUse

Find a Game Card

Press E-Mail Gathering

Policy

ReviewPurchases

NXGuide

Manage Account

GetSupport

GetNX

GetSupport Logout

3.0

2.0



MAPLE STORY SITE REDESIGN • 1.0 HOME

MAPLE STORY SITE REDESIGN • HOME

NEWS GAME INFO GUIDE COMMUNITY PLAY NOW

FUNCTIONAL ANNOTATIONS

SCREEN DESCRIPTION: This is the index page of the site.

A. NEXON GLOBAL NAVIGATIONThis is the Nexon global navigation. This navigation is a constant across the Nexon group of sites.

B. SITE LOGOThis is the logo for the site. There is no functionality with this logo.

C. MAIN NAVIGATIONThis is the main navigation of the site.

D. ROTATING CONTENT CAROUSELThe image gallery houses ads, show information, links or videos. A static play button is located here. When a video i played it pops up in a modal window.

E MAINTENANCE MESSAGE WINDOWThis window shows the maintenance ongoing mes-sage that can be toggled on/off in the CMS.

F. NEWS ENTRYThis is the news entry. These entries have social media options. The latest content floats up and shows on the main page.

G. SOCIAL MEDIA BUTTONSThese buttons will not link out to the social media pages, but will allow you to Follow, Like, etc. User login will be required.

H. MEDIA COMMUNITY This is a graphic icon and short news blurb. I. FOOTERThis is the sites footer.

E-mail or ID

FOOTER

NEWS and UPDATES SEE MORE >

ARTICLE TITLE ARTICLE TITLE ARTICLE TITLEDec. XX, XXXX Dec. XX, XXXX Dec. XX, XXXX

GAMES > Password? ? LOG IN SIGN UP

PROMOTION PROMOTION PROMOTION

PLAY

Follow on TW

Like on FB

Subscribe YT

FollowTUMBLR

XXXXX LIKESSHAREXXXXX LIKESSHAREXXXXX LIKESSHARE

A

B

C

D

H

I

F

G

MAINTENANCE ONGOINGE



MAPLE STORY SITE REDESIGN • 2.0 NAV

MAPLE STORY SITE REDESIGN • NAV

Game Info Home PageWhat is MapleStory?Classes & JobsNew Player GuideMapleStory WikiMedia

Community Home PageOfficial ForumFan SitesRankings



SCREEN DESCRIPTION: The MapleStory navigation bar will have drop down menu selection. A. NEWS BUTTONThis button takes the user to the news home page.

B. GAME INFO GUIDE BUTTONThis button takes the user to the game info guide home page.

C. COMMUNITY BUTTONThis button takes the user to the community home page.

D. PLAY NOW BUTTONThis button initiates the download process for the game.

E. NEWS DROPDOWNWhen the user mouses over the news button the news related pages drops down.

F. GAME INFO GUIDE DROPDOWNWhen the user mouses over the game info guide but-ton the game info guide related pages drops down.

G. COMMUNITY DROPDOWNWhen the user mouses over the community button the community related pages drops down.

E-mail or IDGAMES > Password? ? LOG IN SIGN UP

News Home PageMaintenance/Server StatusFeatured Content UpdateContent Update ArchiveMarvel Machine

B C

A

E

F G

D



MAPLE STORY SITE REDESIGN • 3.0 FOOTER

MAPLE STORY SITE REDESIGN • FOOTER


SCREEN DESCRIPTION: The MapleStory website has a footer that contains important links and universal social media access. A. YOUR ACCOUNT SECTIONThese are the links to pages detailing user accounts.

B. SUPPORT LINKSThese are the links to pages detailing support pages and .

C. NEXON AMERICA LINKSThis is the login and sign up section.

D. POLICIES & AGREEMENTS LINKSThe image gallery houses ads, show information, links or videos.

E. LEGAL COPY This is the news entry. These entries have social media options. The latest content floats up and shows on the main page.

Your Account

Account SettingsPurchase NXEarn Free NXFind a Game CardKarma KoinReview PurchasesNX Guide

Support

Get Support

Nexon America

About NexonCareersBusiness OpportunitiesPressInvestor Relations

Policies & Agreements

Privacy PolicyTerms of UseUser AbuseE-mail Gathering Policy

© 2014 NEXON Korea Corp. and NEXON America Inc. All Rights Reserved.

A

E

B C D



MAPLE STORY SITE REDESIGN • 4.0 NEWS HOME PAGE

MAPLE STORY SITE REDESIGN • NEWS HOME PAGE

NEWS

ALL PROMO SALESFeatured Content

Content Archive

Maintenance

NewsArchive

• Jan. 2014

EVENTS MAINT.

GAME INFO GUIDE COMMUNITY PLAY NOW

E-mail or ID

FOOTER

ARTICLE TITLE

ARTICLE TITLE

ARTICLE TITLE

ARTICLE TITLE

ARTICLE TITLE

ARTICLE TYPE

ARTICLE TYPE

ARTICLE TYPE

ARTICLE TYPE

ARTICLE TITLEDec. XX, XXXX

Dec. XX, XXXX

Dec. XX, XXXX

Dec. XX, XXXX

Dec. XX, XXXX

Dec. XX, XXXX


XXXXX LIKESSHARE XXXXX LIKESSHARE

NEWS HOME PAGE


SCREEN DESCRIPTION: MapleStory maintenance information is displayed on this page. A. PAGE TITLEThis is the title of the page.

B. ARTICLE TITLEThis is the title of the article.

C. ARTICLE DATEThis is the date in which the article was published (put live).

D. ARTICLE CONTENTThis is the content of the article. This can either be an image or an embedded video.

E. SOCIAL MEDIA BUTTONSThe user can either share an article, like the article or see how many users have liked the content.

F. NEWS BUTTONSThese buttons take the user to their corresponding pages.

G. PARSING BUTTONSThese buttons parse the news items. These button names are (TBD).

H. CONTENT ARCHIVEThis is the archive of previous content.

I. NEWS ITEMS These are the currently parsed items. The user can view them by scrolling.

B

A

D

E

F

G

H

C

I



MAPLE STORY SITE REDESIGN • 5.0 MAINTENANCE

MAPLE STORY SITE REDESIGN • MAINTENANCE


E-mail or ID

FOOTER


World Name

World Name

World Name

World Name

World Name

World Name

World Name

World Name

World Name

World Name

Maintenance vs Game UpdatesUpdate 2 xx/xx/xx

Known Issues: Updated March 31, 2014 xx/xx/xx


[Complete] Scheduled Server Maintenance xx/xx/xx


Maintenance vs Game UpdatesUpdate 2 xx/xx/xx





NEWS/MAINTENANCE

StatusWorld Name

Maintenance Updates Header Server Status Header


SCREEN DESCRIPTION: MapleStory maintenance information is displayed on this page. A. PAGE NAME/BREADCRUMBSThis is the name of the page. The user can also navi-gate via these breadcrumbs.

B. MAINTENANCE HEADERThis is the header of the maintenance. This could either be a graphic or text.

C. MAINTENANCE COLUMNThis is the header of the maintenance. This could either be a graphic or text.

D. SERVER STATUS HEADERThis is the header of the server status. This could either be a graphic or text.

E. SERVER STATUSThis is the status of the game servers. The names are displayed alphabetically. The user can change the listing order by clicking on the sort arrows.

B

C

A

D

E



MAPLE STORY SITE REDESIGN • 6.0 FEATURE CONTENT UPDATES

MAPLE STORY SITE REDESIGN • FEATURE CONTENT UPDATES


E-mail or ID

FOOTER


NEWS/FEATURE CONTENT UPDATES

FEATURED CONTENTWINDOW


SCREEN DESCRIPTION: MapleStory current feature content is on this page.

A. PAGE NAME/BREADCRUMBSThis is the name of the page. The user can also navi-gate via these breadcrumbs.

B. UPDATE GRAPHICThis is a large graphic design piece that will be static in width but be flexible to manage different lengths (and be scroll able). This page will showcase a designed piece highlighting a game’s latest content update.This page will consist of graphics and HTML copy.

B

A



MAPLE STORY SITE REDESIGN • 7.0 CONTENT UPDATE ARCHIVE

MAPLE STORY SITE REDESIGN • CONTENT UPDATE ARCHIVE


E-mail or ID

FOOTER


NEWS/CONTENT UPDATE ARCHIVE

UPDATE 1

UPDATE 4

UPDATE 2

UPDATE 5

UPDATE 3

UPDATE 6


SCREEN DESCRIPTION: The archive of the Ma-pleStory content updates are located on this page.


B. UPDATE BUTTONSThese button take the user to the blog entry which details the update and it’s information. These pages are laid out like the featured content on the previous page.

B

A



MAPLE STORY SITE REDESIGN • 8.0 MARVEL MACHINE

MAPLE STORY SITE REDESIGN • MARVEL MACHINE


SCREEN DESCRIPTION: This page displays the marvel machine. As long as the user has spins avail-able, they’ll have access to use the machine.

The machine is ‘inactive’ during non-promotion periods.

In the design it will be indicated if the user eligible to spin. A. PAGE NAME/BREADCRUMBSThis is the name of the page. The user can also navi-gate via these breadcrumbs.

B. MARVEL MACHINE The use can spin a slot machine type interface for prizes which they can then trade in for in game currency.

C. SPIN BUTTON The user presses this button to spin for their prizes.


E-mail or ID

FOOTER


NEW CONTENT FEATURE PAGE/MARVEL MACHINE

SPIN

PAGE GRAPHIC

B

B

A



MAPLE STORY SITE REDESIGN • 9.0 GAME INFO HOME PAGE

MAPLE STORY SITE REDESIGN • GAME INFO Home Page


E-mail or ID

FOOTER

GAME INFO HOME PAGE


New Player Guide

MapleStory Wiki

Classes and Jobs

What is MapleStory?

Media


SCREEN DESCRIPTION: This is the game info guide home page.


B. WHAT IS MAPLESTORY? BUTTONThis button takes the user to the what is maplestory page.

C. NEW PLAYER GUIDE BUTTONThis button takes the user to the new player guide page.

D. CLASSES AND JOBS BUTTONThis button takes the user to the classes and jobs page.

E. MAPLESTORY WIKI BUTTONThis button takes the user to the maplestory wiki page.

F. MEDIA BUTTONThis button takes the user to the media page.

C

E

D

F

A

B



MAPLE STORY SITE REDESIGN • 10.0 WHAT IS MAPLESTORY?

MAPLE STORY SITE REDESIGN • WHAT IS MAPLESTORY?


E-mail or ID

FOOTER

GAME INFO GUIDE/WHAT IS MAPLESTORY?


THE STORY SO FAR

PAGE GRAPHIC

IMAGE


SCREEN DESCRIPTION: The user can learn about the game via this page.


B. PAGE GRAPHICThis is the main image of the page.

C. SECTION NAMEThis is the name of the section.

D. SECTION COPYThis is the descriptive copy of the section.

E. SECTION IMAGEThis is the image related to this section.

C

D

E

B

A



MAPLE STORY SITE REDESIGN • 11.0 CLASSES AND JOBS

MAPLE STORY SITE REDESIGN • CLASSES AND JOBS


E-mail or ID

FOOTER

GAME INFO GUIDE/CLASSES AND JOBS


Player Class

Warrior Thief Pirate Magician Bowman Beginner

Player Class

Player Class

Player Class

Player Class

Player Class

Player Class

Player Class

PAGE GRAPHIC


SCREEN DESCRIPTION: The user can learn about classes and jobs in the game via this page.


B. PAGE GRAPHICThis is the main image of the page.

C. JOB PARSERThe user selects the character job that they’re interested in.

D. PLAYER CLASSThe players classes appears here when the user selects a job above.

D

C

B

A



MAPLE STORY SITE REDESIGN • 11.1 CLASSES AND JOBS SUB PAGE

MAPLE STORY SITE REDESIGN • CLASSES AND JOBS SUB PAGE


E-mail or ID

FOOTER

GAME INFO GUIDE/CLASSES AND JOBS/PLAYER CLASS NAME


CHARACTER TYPE

OVERVIEW

PLAYER CLASS GRAPHIC

IMAGE


SCREEN DESCRIPTION: The user can peruse the different character classes in MapleStory. The user can use the breadcrumbs to navigate back to the classes and jobs page.

A. PLAYER CLASS GRAPHICThis is a large themed image based off of the viewed character class.

B. CHARACTER TYPE INFORMATIONThe informational overview of the character type are explained here.

C. CHARACTER ELEMENT GRAPHICThis graphic shows a graphic for the character.

D. OVERVIEWThe overview section details out the specifics of the character type.

E. VIDEOThis is a video for the class.

D

C

E

A

B



MAPLE STORY SITE REDESIGN • 12.0 NEW PLAYER GUIDE

MAPLE STORY SITE REDESIGN • NEW PLAYER GUIDE


E-mail or ID

FOOTER

GAME INFO GUIDE/NEW PLAYER GUIDE


Selected Content

Item 1 Item 3Item 2 Item 4


SCREEN DESCRIPTION: The user can learn about information for the new player via this page.


B. INFORMATION BUTTONSThese are the buttons that the user uses to see the requested information.

C. SELECTED CONTENTThe content in this area can either be a graphic, text or a video.

B

A

C



MAPLE STORY SITE REDESIGN • 13.0 MEDIA

MAPLE STORY SITE REDESIGN • MEDIA


E-mail or ID

FOOTER

ARTICLE TITLEARTICLE TITLE

ARTICLE TITLETITLETITLE ARTICLE TITLE

TITLE TITLE Dec. XX, XXXXDec. XX, XXXX

Dec. XX, XXXXDec. XX, XXXXDec. XX, XXXX Dec. XX, XXXX

Dec. XX, XXXX Dec. XX, XXXX


GAME INFO GUIDE/MEDIA






SCREEN DESCRIPTION: MapleStory video related media is displayed on this page. A. PAGE NAME/BREADCRUMBSThis is the name of the page. The user can also navi-gate via these breadcrumbs.

B. MEDIA CAROUSEL This should be a three video carousel that showcases a single video at a time..

C. SCREENSHOTSThese are screenshots of game play. The user can expand the image into a larger view.

D. VIDEOSThese are the videos. The video playing options are as follows:• Play• Scrubber• Audio level• Time code• Full screen option

E. VIDEO SCROLL The user can scroll down through the content in blocks of 4.

C

B

D

E

A



MAPLE STORY SITE REDESIGN • 13.2 VIDEO AND IMAGE POP UP

MAPLE STORY SITE REDESIGN • VIDEO AND IMAGE POP UP


E-mail or ID

FOOTER

ARTICLE TITLEARTICLE TITLE ARTICLE TITLE

TITLETITLE

ARTICLE TITLE

TITLE TITLE

Dec. XX, XXXXDec. XX, XXXX Dec. XX, XXXX

Dec. XX, XXXXDec. XX, XXXX

Dec. XX, XXXX

Dec. XX, XXXX Dec. XX, XXXX


XXXXX LIKESSHAREXXXXX LIKESSHARE XXXXX LIKESSHARE

XXXXX LIKESSHAREXXXXX LIKESSHARE

XXXXX LIKESSHARE


GAME INFO GUIDE/MEDIA

X

XXXXX LIKESSHARE


SCREEN DESCRIPTION: MapleStory game screen-shots are viewed via a pop up.

A. GRAPHIC POPUPThis is the main image popup.

B. CLOSE BUTTON This button closes the popup.

C. SCROLL LEFT BUTTONThis button scrolls the popup content to the left.

D. VIDEOThis is the video window. The video starts playing as soon as the player pops up.

E. SCROLL RIGHT BUTTONThis button scrolls the popup content to the right.

F. SOCIAL MEDIA BUTTONSThe user can either share an article, like the article or see how many users have liked the content.

B

E

F

A

DC



MAPLE STORY SITE REDESIGN • 13.3 ARTICLE

MAPLE STORY SITE REDESIGN • ARTICLE


E-mail or ID

FOOTER


HOME/NEWS/CURRENTARTICLE TITLE

PAGE GRAPHIC


SCREEN DESCRIPTION: MapleStory content is displayed on this page. A. PAGE NAME/BREADCRUMBSThis is the name of the page. The user can also navi-gate via these breadcrumbs.

B. SEARCH MODULEThis is the search module for the site’s articles.

C. ARTICLE TITLEThis is the title of the article.

D. SOCIAL MEDIAThe user can see the likes and tweets associated with this page in this section. The user can also see the amount of likes and tweets.,

E. VIEW COUNTThis is the amount of views the article has had.

F. PAGE GRAPHICThis is the graphic for the page.

G. COPYThis is the page copy.

C

B

E

F

D

G

A

XXXXX LIKES XXXXX TWEETS VIEWS: XXXXXXDATE: 5/2/14



MAPLE STORY SITE REDESIGN • 13.4 ARTICLE PAGE LAYOUTS

MAPLE STORY SITE REDESIGN • ARTICLE PAGE LAYOUTS

NEWSNEWS NEWSGAME INFO GUIDEGAME INFO GUIDE GAME INFO GUIDECOMMUNITYCOMMUNITY COMMUNITYPLAY NOWPLAY NOW PLAY NOW

E-mail or IDE-mail or ID E-mail or ID

FOOTERFOOTER FOOTER

GAMES >GAMES > GAMES >PasswordPassword Password?? ??? ?LOG INLOG IN LOG INSIGN UPSIGN UP SIGN UP

HOME/NEWSCURRENTHOME/NEWS/CURRENT HOME/NEWS/CURRENTARTICLE TITLEARTICLE TITLE ARTICLE TITLE

PAGE GRAPHIC

PAGE GRAPHIC

XXXXX LIKESXXXXX LIKES XXXXX LIKESXXXXX TWEETSXXXXX TWEETS XXXXX TWEETSVIEWS: XXXXXXVIEWS: XXXXXX VIEWS: XXXXXXDATE: 5/2/14DATE: 5/2/14 DATE: 5/2/14

The CMS makes it so the article can any kind of pre-made layout with different kinds of content. These types can include:• Copy• Images• Videos• Audio Files• Modules, like polls



MAPLE STORY SITE REDESIGN • 14.0 COMMUNITY HOME PAGE

MAPLE STORY SITE REDESIGN • COMMUNITY HOME PAGE


E-mail or IDGAMES > Password? ? LOG IN SIGN UP

COMMUNITY HOME PAGE

SOCIAL MEDIA

PAGE GRAPHIC

T F

Follow on TWOur TW

Like on FBOur FB

Subscribe YTOur YT

Follow TumblrOur Tumblr

LatestCommunity

NewsForum Feed

FOOTER


SCREEN DESCRIPTION: The community home page.

A. SOCIAL MEDIA LINKS These are the social media links that navigate the user to the MapleStory social media sites.

B. SOCIAL MEDIA BUTTONSThese buttons will not link out to the social media pages, but will allow you to Follow, Like, etc. User login will be required.

C. PAGE GRAPHIC This is a pages main graphic.

D. LATEST COMMUNITY NEWS BUTTONThis button takes the user to the news page (4.0).

E. FORUM FEED BUTTONThis button takes the user to the forum page.

F. MEDIA COMMUNITY This is a graphic icon and short news blurb.

D

F

A CB

E



MAPLE STORY SITE REDESIGN • 15.0 OFFICIAL FORUM

MAPLE STORY SITE REDESIGN • OFFICIAL FORUM


E-mail or ID

FOOTER


COMMUNITY/OFFICIAL FORUM


SCREEN DESCRIPTION: The community section of the MapleStory page contains a message board for user and administrators to post information.


B. BULLETIN BOARDThis page iFrames to a bulletin board allows users and administrators to connect. Users can only post in this board if they first create and account and login. The user can also see other game forums. Function-ality TBD based on platform chosen for forums.

B

A

FORUM VIA IFRAME



MAPLE STORY SITE REDESIGN • 16.0 FAN SITES

MAPLE STORY SITE REDESIGN • FAN SITES


E-mail or ID

FOOTER

COMMUNITY/FAN SITES


HEADER GRAPHIC

FAN SITE BANNER ONLY

FAN SITE BANNER ONLY


SCREEN DESCRIPTION: The user can view fan sites via this page.


B. HEADER GRAPHICThis is the main image of the page.

C. FAN SITE BANNERThis is the image related to this website. Each banner acts as a button link to the corresponding website.A

B

C



MAPLE STORY SITE REDESIGN • 17.0 RANKINGS

MAPLE STORY SITE REDESIGN • RANKINGS

Pre log in


E-mail or ID

FOOTER


Monthly Legendary ClassicWeeklyCharacter Name

Rank Character Character Name World Job Level/Move

LOG IN NOWto see your character

1 2 3 4 5 6 7 8 > >>Showing 1 - 15 of 1500 usersof 1001Page

1

2

5

10

3

6

11

8

13

15

4

7

12

9

14

109287

Name

Name

Name

Name

Name

Name

Name

Name

Name

Name

Name

Name

Name

Name

Name

Name

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

XXX(XXXXXXXXXXX)

COMMUNITY/RANKINGS

PAGE GRAPHICCharacter Info

Character 1Character 2

PIC Info


SCREEN DESCRIPTION: Users can see where they rank within the MapleStory community. A. PAGE NAME/BREADCRUMBSThis is the name of the page. The user can also navi-gate via these breadcrumbs.

B. CHARACTER INFORMATIONThis is the information about the character. The user can select and view their characters here.

C. SEARCH FUNCTIONSThe user can search though the rankings via thefollowing:• Character name • Rank

The user can also parse the rankings by selecting one of these buttons.

D. TITLE BARThe title bar consists of the following:• Rank• Character• Character Name• World• Job• Level/Move

E. RANKThis is the rank.

F. CHARACTER IMAGEThe current graphic status of the character is dis-played in this area..

G. CHARACTER NAMEThis is the characters name.

H. WORLDThis indicates what server the user is on.

I. JOBThis is the character’s in game job.

J. LEVEL/MOVEThis is the level of the character based off of experience points earned in the game. Move indicates the experience points the character has earned.

K. USER’S CHARACTER RANKThis is the users selected character rank. The user must be logged in to see this.

L. RANK PAGINATIONThe user can navigate the ranks via this pagination. The user can also input a specific page.

D

E

A

B

C

L

K

F G H I J

Documents

04/15/14 1.0 Original document User Experience/Information ...€¦ · AZB_mapleStory_MainWebSite_extV1.3.pdf MAPLE STORY SITE REDESIGN • SITE MAP Home Nav News Home Page Maintenance