Embed Size (px)
DESCRIPTION
A proposal of revamping Cooking Mama website.
Citation preview
f10dm0669daniel mulyadi
a website revamp of
Interactive Media
November 2011
Integrated Studio ProjectClass DM2K
TABLE OFCONTENTS
1
ContentTable of Contents 1
Background ResearchOverview 2
Game Details 3
Site Map 4
Problem Analysis 6
Group of Users 7
Assumption 8
Persona - A 10
Scenario - A 11
Persona - B 12
Scenario - B 13
Persona - C 14
Scenario - C 15
Proposed Content & Design16 Mind Map
17 Concept Mapping
18 Proposed Content
20 Proposed Site Map
21 Wire Frame
24 Research
27 Proposed Design
29 Usability Validation
Conclusion32 Conclusion
Appendice33 Appendice
2
OVERVIEW
IntroductionC o o k i n g M a m a i s a cooking video game for Nintendo DS and iOS. The game was developed by Of f i ce Crea te and p u b l i s h e d b y Ta i t o , Majesco Entertainment, and 505 Games.
VisionCook ing Mama is no t only becoming one of the most modern, fun and interactive games. It is also the game that is good for little children.
AudienceThe target audience is mainly the girls from eight years old and above, but the game also enjoyed by everyone, both male and female.
ABout CookIng mAmA
IntroductionThe websi te current ly i s on ly as a po r ta l t o individual websites for different countries. Most of the contents require flash and video player. The website contains short movies, mini games and media downloads, such as wallpapers, painting templates and calendar.
objectiveThe website doesn’t have clear objective. It doesn’t sell the product, which is the game. What the user can see from the website is just about the main character, Mama.
AudienceThe audience for now m a i n l y i s o n l y t h e game players. For the stakeholders, they need to go to contact to the company website which the links are provided at the footer.
ABout the WeBsIte
3
GAMEDETAILSthemeThe game is about working together with the main character and have good time management.
CharacterThe main character is Mama, a cheerful guide who doles out posit ive reinforcement.
PlotThe player needs to follow recipes carefully, taking pride in what you cook and the joy of cooking for others.
goalThe player has to complete the tasks requ i red i n finishing the dishes
objectiveThe game teaches some cooking techniques and food preparations.
The main character, Mama, is the only character at the game, but in some other newer game versions, some minor characters also included.
The frequent appearance from giving instructions until the result showing, makes the character very memorable to the gamer.
ColourThe game uses many soft warm colours. Mostly they are pastel colours.
graphic styleThe game visual is mostly in 2D animation and the images are vector graphic.
4
SITE MAP
home
movie
game
download
5
calendar
wallpaper
paint
other Countries
> USA
> UK
> Italia
> France
> Germany
> Spain
> Japan
other Links
> Square Enix
> Taito
> Office Create
> Majesco
> 505 Games
> Terms and Conditions
> Privacy Policy
> Cooperate Company Links
6
PROBLEMANALYSIS
ColourThe colour used mostly are the pastel colours. This colour type also used within the game and it is good to apply the same colour type for the website.
The colour chosen for the footer is not advisable because i t s tands out most from the rest of the elements and it shows poor hierarchy.
FontThe text is very minimum used in the website. The text is only found for the country links and other minor navigation links. The font used is not specified, so the font used is the browser’s default font.
LayoutThe layout is not very well organized. Even the region grouping is obvious, but some of the content is not, like the placement of logo of the companies. The website has too much white space.
usabilityThe main navigation is not clear with the usage of icons alone (without labelling).
The navigation is not very well planned. User has to click “Back” button to go back one step up or even to Home page.
7
GROUP OFUSERS> KidsThe users of this category are kids from eight years old and above. They don’t really look for information. They explore, they like to play around the website with the games and easily amazed of fiction character images.
> Existing CustomersThe users of this category are people who has played or currently playing the game. They most likely look for the other version of the game and want to download some imagery like calendar or wallpaper.
> Potential CustomersThe users of this category are people who has not played the game before and currently are not playing. They probably heard of the game, saw the game at stores or just entered accidentally. They might try to find what is the game about.
> StakeholdersThe users of this category are people or organization who might want to cooperate to create a campaign through the game. They look for contact and the cooperate campaign done before.
> ReviewersThe users of this category are game reviewers or competitors from other game company. They look for information about the game and how the game able to attracts the customers.
8
ASSUMPTION
Assumption
Users want to find about the game and the update
goal to be AchievedProv ide the comple te information and serve in an attractive way for the users
user group
> Kids
> Existing Customers
> Potential Customers
useR’sgoAL
Assumption
Users want to know how to buy the game
goal to be AchievedFacilitate the users with links which will direct the users in buying the game
user group
> Kids
> Existing Customers
> Potential Customers
Assumption
Users want to cooperate with Cooking Mama in making a special version for certain purpose
goal to be AchievedP r o v i d e t h e l i n k s t o companies’ websites
user group
> Stakeholders
Assumption
Users download the media provided
goal to be AchievedProvide frequent updated downloadable media
user group
> Kids
> Existing Customers
> Potential Customers
useR’sACtIVIty
Assumption
Users play the games provided in the website
goal to be AchievedM a k e t h e g a m e s interesting to enhance the user experience
user group
> Kids
> Existing Customers
> Potential Customers
9
> Stakeholders
> Reviewers
> Reviewers
10
PERSONA
tania smith> KidGender Female
Age 8 years old
Education Primary School
Nationality Canadian
Occupation Student
Social Role Daughter
Financial Status Dependent
PsychographicHer hobbies are colouring, playing and shopping. She is interested in cupcakes, barbie, stickers, television and games.
Her father is a businessman and her mother is a housewife. They really take care of their daughter and take control of what Tania wants to buy. At home, her mother plays with her and teaches her school subjects and cooking.
BehavioursShe uses computer two hours per day to play games. She uses internet at home to find the cartoon characters she likes. She likes to share what she has and play with a lot of friends.
Her mother usually reads the game review at Common Sense Media website before buy the game to be installed to her daughter’s game console.
key Characteristics and skillsShe is able to draw her favorite characters and good at using colour pencil and crayon. She is helpful and very passionate in what she chooses to do.
11
SCENARIO
scenarioOne day, Tania was bored of the game she had. So, she asked her mother to install a new game. Whenher mother asked about kind of game she wants, she didn’t know what kind of game she wanted. Her mother try to find a good game based on the review from the Common Sense Media website and she found Cooking Mama.
Tania’s mother opened the website and looked around the website. She showed the website and the mini games to Tania and asked whether she likes it or not. Tania did like the character and thought the game was interesting.
Her mother wanted to find the game at App Store so she can download Cooking Mama on the iPod Touch.
Data> Common Sense Media
website
> Link to Cooking Mama Official Website
> Cooking Mama logo
> Navigation
> Videos
> Mini games
> App Store
> Cooking Mama game page
Function> To provide links from various game review website to
Cooking Mama Official Website
> To provide the web page that easy to use for everyone, even the kids
> To provide videos and mini games to show about Cooking Mama game
> To provide the Cooking Mama page at App Store
task to Complete> Go to Cooking
Mama Of f i c i a l W e b s i t e f r o m any game review website
> Play the videos and mini games
> Go to Cooking Mama page a t App Store
12
PERSONA
mike Baron> Possible
CustomerGender Male
Age 14 years old
Education Secondary School
Nationality England
Occupation Student
Social Role Son
Financial Status Dependent
PsychographicHe is the only child. His hobbies are playing games, read comic books, watching movies, playing basketball and skateboarding. He is interested in jazz music, games and heroic characters.
As a teenager, he is allowed to be responsible on his own. He can spend his pocket money on what he likes to spend on.
BehavioursHe uses computer seven hours per day to play games, read comics and download music. He uses internet at home and school to do assignments, chat with friends, read online comics and find online review on games. He likes to play the online multi-player games and story games. He is lazy doing homeworks and ignorant about school.
key Characteristics and skillsHe is able to cook easy-to-make-dishes, use computer, play trumpet and skateboarding. He is quite a spender and a bit selfish even he has a lot of friends.
13
SCENARIO
scenarioOne day, Mike’s close friend was playing Cooking Mama. He saw his friend play it on her iPhone. It looked really fun with all the gestures done while she was playing the game. She let Mike try it and Mike went home to find about the game.
He opened the website and found the website has some downloadable media. So he downloaded them to give them to his friend because he knew his friend really like Cooking Mama.
Data> Search engine website
> Cooking Mama logo
> Navigation
> Download
Function> To be showed on the first page of the search engine
> To provide information about Cooking Mama
> To provide downloadable materials
task to Complete> F i n d C o o k i n g
Mama at search engine website
> Go to Cooking Mama Of f i c i a l Website
> D o w n l o a d t h e d o w n l o a d a b l e materials
14
PERSONA
trina suzane> StakeholderGender Female
Age 49 years old
Education Doctorate degree
Nationality Italian
Occupation PETA Campaign Coordinator
Social Role Mother / housewife
Financial Status Independent
PsychographicShe is a mother of three children. Her hobbies are cooking and reading books and newspapers. She is interested in unique campaigns, biological facts, animal welfare and healthy life.
BehavioursShe uses computer eight hours per day to do research, find proof and evidence related to animal welfare, contact with family and the organization neccessity. She uses internet at home and office.. She likes to send links to friends and families about the interesting news and articles. She is patient, good in time management and communicating ideas.
key Characteristics and skillsShe is able to sew, cook and use computer. She is humble, organized and efficient.
15
SCENARIO
scenarioOne day, Trina is trying to set up for a new campaign. She wanted to create another new version of Cooking Mama cooperate with PETA. She opened the website and tried to find more about the game. She tried to find rough ideas on how the campaign will be executed.
After she navigated through the web pages, she tried to contact the companies and propose for the campaign.
Data> Cooking Mama logo
> Navigation
> Web pages
> Companies links
Function> To expose interesting facts about Cooking Mama
through all the web pages
> To provide the companies links for the stakeholders
task to Complete> Go to Cooking
Mama Of f i c i a l Website
> Find information about Cooking Mama
> Go to Cooking Mama companies links
16
MIND MAP
17
CONCEPTMAPPINGobjective> To provide the website in
HTML version
> To gain more possible buyers to purchase of the game and some of the other versions
> To g i v e t h e u s e f u l information about the different versions of the game
> To do branding and let the game publicly known through social network
> To be the international common websi te for audiences from all over the world
Content> Use more images or
other media to convey the messages instead of text
> Provide the content that is suitable for kids of eight years old at least
> Inc lude some minor f ac i l i t i e s whe re t he kids can interact in the website and with friends
> T h e t o p d o w n l e v e l content is put at the last sections
Visual> Use the bright soft colours
for the background and text
> Use the graphic elements that are used within the game to create repetition and unity of the game and website
> Use the grid system to layout the content
Function> Requi re on ly s imple
interactions as the main audience is the children, not only the gamers
18
PROPOSEDCONTENT
Content > Game trailer > Message input
> Links to Application Markets
> Dishes selection
> Links to social networks of Cooking Mama
> Sending information
gRouP home e-Card
tABLe 1
> Playing trial
> Frequently asked questions
FAQ
explanationTABLE 1 shows the contents needed by or provided for kids, existing customers, potential customers and game reviewers.
TABLE 2 shows the contents needed by or provided for stakeholders.
19
> Calendar
> Wallpaper
> Paint template
Download
Content > Feedback form
> Links of companies’ websites
gRouP Feedback
tABLe 2
20
PROPOSEDSITE MAP
FAQ
e-Card
Download
Feedback
Home
21
WIRE FRAME
generalThe layout is based on three columns and 12 grids system. The layout width is 960px and maximum height of 650px.
Generally, the layout has a logo at the top left of the page, language selection at the top right of the page, navigations and copyrights at the footer. The content is divided into two rows,
homeThe home page contains trailer video of the game, banner of versions of the game, polling question as short feedback medium for the company, link to App Store, Android Market and social networks.
Image
Occupied Area with the first row works as the hero image as well. At the first row, the main character, Mama will be put as the design element at every page.
22
FAQThe FAQ page contains the playing tr ial of the game, fruquently asked q u e s t i o n s a n d s m a l l portion for banner.
e-CardThe e-Card page contains message input area and dishes to be selected and sent with the message to the friend through email.
23
DownloadT h e d o w n l o a d p a g e c o n t a i n s t h e m e d i a provided to be downloaded a n d r e v i e w o f m o s t down loaded by o the r users.
FeedbackT h e f e e d b a c k p a g e c o n t a i n s f e e d b a c k form and the links to the companies which create a n d p u b l i s h C o o k i n g Mama.
24
RESEARCH
Angry BirdsActivision
DiabloAssassins Creed II
25
Game Websites
tekken 6super mario galaxy 2
Rockstar gamesFinal Fantasy XIII-2
26
Other Websites
BBh globalCharlie gentle
C o n c l u s i o n f r o m t h e r e s e a r c h i s t h a t t h e character is the most important element to take most of the space above the fold.
In a game website, video is necessary to show about the game effectively.
The game website uses more images than text s i n c e t h e a u d i e n c e s mostly are used to receive
information by imagery than text.
G a m e w e b s i t e t e n d s t o i m p l e m e n t t h e environment within the game to the website and some use the background music to enhance the feel.
With the concept of making a game website, there is less text content, so in decision of making the website in a horizontal-flow website, the research on websites with the same system is done.
C o n c l u s i o n f r o m the research on those w e b s i t e s , s o m e u s e t rans i t ion effect upon clicking on previous and next buttons to show the
horizontal flow instead of using scroll bar.
Some websites with a lot of content, give too many control, make the website doesn’t have a spesific hierarchy.
Conclusion
27
PROPOSEDDESIGN
Main Page
home
RationaleColour scheme, font and design elements within the website are made exactly as in the game.
The font used for title is Arial Rounded MT Bold. To imitate the style of the game, a few decoration is added, like double strokes.
The font family used for content is Varela, Comic Sans MS, cursive. The font colours are orange, grey and white.
28
e-Card
DownloadFAQ
Feedback
Sub-Pages
29
USABILITYVALIDATION
goal / outputTo go to Cooking Mama game page on App Store
get to Cooking mama Pageon App store
Input> Click on App Store icon
Assumptions> User is at home page
> User wants to buy the game for iPod Touch or iPhone
steps> Click on App Store icon
home page
time for expertLess than 1 minute
InstructionsClick icon below to go to App Store
notes> Does user know how to
buy the game?
> Does user find it easy to be directed to App Store web page to buy the game?
1.
30
goal / outputTo send an e-Card to a friend’s email
send an e-Cardto a friend
Input> Message text input
> Dish selection (optional)
> Sender name input
> Recipient email input
Assumptions> User is at home page
> User wants to send a Cooking Mama e-Card to a friend
steps> Selection on navigation
> S e l e c t “ e - C a r d ” o n navigation
> Input message tex t , select dish and sending information
> Click “Send” button
time for expert4 minutes
InstructionsType your message here, choose a dish to be sent, fill the sending information and click “Send”
notes> Does use r wan ts t o
see how the e-Card will looked like?
> Does the e-Card take long time to load?
2.
31
goal / outputTo download the most downloaded calendar
Download themost Downloaded Calendar
Input> Click on any “Calendar”
thumbnail at “Most Downloaded” row
Assumptions> User is at home page
> User prefers the most downloaded calendar
steps> Selection on navigation
> Select “Download” on navigation
> S e l e c t i o n o n “ M o s t Downloaded” row
> C l i ck on “Ca lendar ” thumbnail
> Right mouse click
> Select “Save Link As”
> Save on targeted folder
time for expert2 minutes
InstructionsClick on thumbnail to show the actual size and right click to save the image
notes> D o e s u s e r w a n t s
more down loadab le materials?
> What does user want to download?
3.
32
CONCLUSION
expected ResultThe expected result is making a website which is friendly to the main target user, the kids. Another expectation is to have a lot of imagery used and have sufficient interactivity can be played with.
ConclusionA website of mobile game application needs to be loud in showing the game itself, but also within the website, additional minor content needs to be added to gain the attention of audience. The using of main character(s) with large scale at least will tell the user the feel of the game itself. Using imagery instead of relying on text to convey information is a must requirement for games beside mind games.
33
APPENDICE
http://cookingmama.com/
http://www.activision.com/atvihub/home.do?site=en_US&country=USA
http://angrybirdsnest.com/
http://assassinscreed.uk.ubi.com/assassins-creed-2/#/home/
http://us.battle.net/d3/en/
http://supermariogalaxy.com/
htp://tekken.namco.com/index.html
http://www.finalfantasy13-2game.com/#1/uk/
http://www.rockstargames.com/
http://www.charliegentle.co.uk/
http://www.bartleboglehegarty.com/#!/global
