WNM606: Principle of Usability
TEAM MEMBERS Jesse Sobol Sabhat Rakitawan Bei Yan Hirotaka Fukui
Instructor Mary Wharmby
CONTENTS
REQUIREMENTS ANALYSIS INTRODUCTION PROBLEM TO SOLVE FOR USERS DESCRIPTION OF THE APPLICATION/TOOL TO BE DESIGNED TARGET AUDIENCE SPECIFICATIONS JUSTIFICATION FOR TARGET AUDIENCE SPECIFICATIONS TARGET AUDIENCE DEMOGRAPHICS FOR KAMI TOY’S USER SCENARIOUS WEB SITE OBJECTIVES USABILITY OBJECTIVES OVERALL OBJECTIVES FUNCTIONAL SPECIFICATIONS COMPETITIVE ANYLASIS NICEBUNNY.COM PAPERCRITTERS.COM KIDROBOT.COM
3 3 4 4 5 6 7 11 11 11 11 12 13 16
WEBSITe SPECIFICATION INFORMATION ARCHITECTURE FLOWS WIREFRAMES
VISUAL DESIGN
19 20 27 38
USER TESTING DESCRIPTION TESTING SCRIPT TASKS CLOSING SURVEY PROTOTYPE RESULT
PROJECT PROCESS SUMMARY
56 57 58 59 61 63 68
1
REQUIREMENTS ANALYSIS
REQUIREMENTS ANALYSIS
introduction
problem to solve for users
Nowadays, virtual world is becoming more and more dominant in our lives. With people spending countless hours in front of their computers and mobile devices, creating avatars and updating their virtual profiles. At KAMI Toys’ we aim to blur the lines between the users virtual and real world. Our site allows the users to creatively express their imagination, while providing them with a low cost solution to bring their virtual world to actual reality.
The main problem KAMI Toys’ is trying to solve is to bring a small sense of reality to a users virtual world. Social media users thus far have been limited to their computers and mobile devices, KAMI Toys’ will enable the users to customize a profile toy/character and print it out on a piece of paper. It can then be folded into a real life toy.
3
REQUIREMENTS ANALYSIS
description of the application/tool
target audience specifications
KAMI Toys’ is focused on providing male and female users, 12 -30 year old, with the ability to create an avatar that best represents them. With a fun, game like interface, users will have the ability to customize a paper like character with provided art work, by taking or uploading real world images. The fully realized character can then be shared through social media. Or, with the provided simple, easy to follow instructions, printed out on piece of paper and then folded, bringing their character to life. By sharing their KAMI Toys’ characters through social media, the user will also have the ability to printout their friend’s character and bring them to life as well. KAMI Toys’ will hold monthly design contest as well as showcase featured artist. It is KAMI Toys’ goal to one day provide a one stop shop for customized avatars that can be fully developed into a personalize toy line.
According to TD Monthly, “most designer toy collectors are males in the 18 to 35 age range”. (www.toydirectory.com) KAMI Toys’ compact, comical, colorful, graphical aesthetic gives the user a sense that he or she is developing a designer toy. With easy to follow inexpensive instructions, KAMI Toys’ is a cost effective way to entertain children of all ages Furthermore, the demand for unique toys crosses many boarders. According to the Ministry of finance in Japan, the number of toys and games exported from Japan to the United States alone is approximately 400 million yen each year. This statistic shows that there is indeed a demand for toys in America. An example of this demand can be seen at Pepakura Designer’s website. A paper model website, shows that thousands users are interested in paper models. Unlike any other paper toy/character website, KAMI Toys’ provides a social networking aspect to the website. According to a recent national survey of teenagers, Pew Internet & American Life Project, found that 55 percent of all American’s between the ages of 12 to 17 use online social networking sites. Customizing and updating there profile daily. Justifying KAMI Toys’ main target audience as, male and female 12 to 30 years old.
4
REQUIREMENTS ANALYSIS
justification for target audience specifications KAMI Toys' target audience focuses on teenagers and young professionals between the ages of 12 and 30, who enjoy innovative ways to customize their virtual experience. KAMI Toys始 allow users to express their imagination and personality while creating a unique toy/character. While at KAMI Toys始 website, the user will have the ability to create their own imaginary character with stock imagery provide. Or the user has the option to up load their own picture or design to be placed in our templates. Using our preset filters and tools, the user can also customize their uploaded images. Upon completion of their character, the user has two options. The first, share their KAMI Toys始 character via social media or print out there character and follow the easy to follow folding instruction, to bring their character to life.
5
REQUIREMENTS ANALYSIS
Target Users " • People who like design or painting and often communicate with friends via social media. • Between12 and 30 years old.
target audience demographics for kami toyʼs
Power Users
The KAMI Toys’ website target audience includes a broad range of people that want to create special new toy by themselves both in real world and virtual world.
• Students and young designers
Target Demographic Specifications • • • • • • • • • • • •
Age: 12-30 Gender: male or female Ethnicity: all Education: any Disabilities: color blind Occupation: any Salary: any People: students, young designers, people who like Internet social communication Location: world wide Computer skills: basic, intermediate, and advanced Needs: customize toy, communicate with friends in the internet
6
REQUIREMENTS ANALYSIS
Personas
Typical Day: 7:00 am – Wake up walk dog 7:30 am – Go for a run 8:15 am – Get ready for class 9:00 am – In class 12:30 - Lunch 1:30 pm – Class/ Study 4:30 pm – Back Home to get ready for work 5:30 pm – Lauren arrives at work early to grab a bite to eat before she starts serving drinks. 10:00 pm – Home from work, relax before bed. Name: Lauren Koplin Age: 27 Gender: Female Location: San Francisco, CA, US Education: Bachelors degree, Working towards a doctorate in Anesthesia Family: Father, Mother, 1 sister, and 1 brother Hobby: Music, Making Jewelry, Photography, and Traveling Security Feelings: Moderate Occupation: Student bartending to pay the bills Income: 800/week Work Hours: 20 hrs. /week Computer Skills: Moderate Mac User Browsers: Safari, Firefox Network: T1 at School, DSL at home Tech Skills: Office Suite Favorite Movie: Airplane
Schedule and interaction episode: When Lauren found the site she spent hours shuffling through the many stock image and toy options that we have provided her. She play with the upload image option and uploads images of her sister’s kids, to create a custom character with their faces on them. She realized that is a good way to interact with the kids, and wants to share it with them. This is important to Lauren because she gets to spend quality time with the kids and get to know them better. On her next visit she introduces here family to Paptoys and they spend countless hours creating and printing out paper characters to play with.
7
REQUIREMENTS ANALYSIS
Personas
Name: James Johnston Age: 21 Gender: Male Location: San Francisco, CA, USA Education: 3rd year college student Family: Father, mother, 1 brother, 1 sister Hobby: Take photo Design taste: Modern style Occupation: Student Intern with an advertising agency Income: $18/hour Work Hours: 20 hrs. per week Computer: Owns an iMac and a MacBook Pro Mobile: iPhone Browsers: Safari, Firefox Browser Settings: Knows nothing about it Network: WIFI, 3Gs Tech Skills: Basic Illustrator & Photoshop Favorite Movie: Inception
Typical Day: 8:00 am - Have breakfast. Also checks his e-mail through iPhone. 9:00 am - Drives to work/school 10:00 am - Arrives at work/school. He has to work with a professional designer on certain projects and is required to gather and report on all of the process he is going through. Currently, he is designing a print ad for a mobile phone company. 12:00 pm - Lunch 1:00 pm - Back to work 3:30 pm - Class. Meets with his professor 6:30 pm - Done with class. Drives back home. 7:30 pm - Dinner 8:30 pm - Goes on the internet, checks his e-mail, checks out new design work and chats with his friends through AIM messenger. 11:00 pm - Watches TV. 12:00 am - Goes to sleep.
Exceptions: During the weekends, he usually hangs out with his friends and take photos. In the evening, he would go back home and upload those pictures on Flickr and facebook. He also likes to visit men’s clothing websites to always keep himself as up-to-date as possible.
Schedule and interaction episode: James frequently takes portrait photos of himself and his friends. From the photos he took, he usually upload them on blogs and websites. also he likes to log on to kamitoy.com, use the photos to create characters of his gang, print them out and make it a real toy. Sometimes he would print pictures of places they went to make it as a scene and put them behind those toys he made earlier.
8
REQUIREMENTS ANALYSIS
Personas Typical Day: 6:40 am - get up 7:20 am - go to school 3:30 pm - play outside with friends 4:00 pm - do homework 5:00 pm - play piano 6:00 pm - watching TV or go on internet 10:00 pm - go to sleep
Exceptions: The little girl has many time play toy. She likes panting and creates some special pictures. Her parents allow her use computer to play games and go to Internet to find information. They spend 15-20$ per month on her toy. Name: Xiaomei Li Age: 12 Gender: Female Location: San Francisco, CA, US Education: Primary School Family: Father, mother Hobby: painting, playing piano, computer games Work Hours: 3 hours a day Computer: high end PC at home Browsers: Internet Explorer Network: DSL at home Favorite toy: Stued toys
Schedule and interaction episode: Xiaomei goes to Internet to relax. She find this website and is attracted by all kinds of special toys. She also wants to create some toy by herself, because she likes painting. First she creates her own toy, and then she will try to create her parents or her friend’s toys. She want to share these with other people, first she send this toy by E-mail or facebook, and then she asks her parents to help her print it out and make it in the real life. She gives it as a gift to her friends. If she really like the toy, her parents may help her order some special toys in the website.
9
REQUIREMENTS ANALYSIS
Personas Typical Day: 7:30 am –Wake up 8:45 am – Go to school 9:00 am – In class 12:00 pm – Lunch 3:00 pm – Get off from school 3:30 pm – Play Basket Ball in the club team 5:30 pm – Back to home 7:00 pm – Have dinner 8:00 pm – Chat with friends on facebook 11:00 pm – Go to Bed
Exceptions:
Name: Mike Martin Age: 14 Gender: Male Location: San Francisco Education: High School Student Family: Father, Mother and 1 brother Hobby: Basket Ball, Video Game, and Internet Security Feeling: Low Occupation: Student Income: Non Computer Skills: Moderate Browsers: Chrome and Firefox Network: DSL in home
On Saturday, he spent more than 2 hours playing video games with his friends and brother. Every Sunday morning, he goes and plays basketball. After the game, he watches a movie with his brother.
Schedule and interaction episode: One day his friend brought the Kami Toy in his class, and he goggled about it. He visited the Kami Toy site online and found that it did not cost a thing. He spent a number of hours creating a Toy. He sometimes takes pictures when he plays basketball with his friends. He plans to make toy of each of his friends from basketball.
10
REQUIREMENTS ANALYSIS
Web site objectives User Goals and Needs KAMI Toys’ users want the ability to create a toy likeness of them that can be shared though social media channels while also having the option to bring their avatar and friends avatars to a reality. Stakeholders and their needs Venture Capitalist: Provide the capital start and maintain the company. They are looking for a return on their cash investment. Employees: This group keeps the company running and profitable. Consists of the following, - Design Team In charge of creating the looking and feel of the website. They provide all graphical elements to be implemented throughout the site. - Programmers Responsible for functionality and maintenance of the website. Users: - Create, purchase, and share KAMI Toys’
overall objectives Create a website that allows users to create a paper toy avatar likeness of themselves to be printed and folded, or shared throughout social media. Create an interface that allows users to use set tools to create their KAMI Toy. Allow users the ability to preview their finished toy before sharing or printing. Create stock content for users to implement in their toy design.
functional specifications Create a customized paper avatar Upload personal images to use in KAMI Toys’ design Use provided images to create toy Share finished design through social media channels
usability objectives To create a website that allows no designers a way to easily design a toy. KAMI Toys’ will provide and easy to use interface that provides help as well as error prevention. If errors occur the system will notify the user and provide related help.
Printout finished toy Follow simple instructions to fold customized toy Collect friends and featured artists designs
11
REQUIREMENTS ANALYSIS
competitive analasis
Competitors: " "
NIceBunny.com PaperCritters.com Kidrobot.com
12
REQUIREMENTS ANALYSIS
VISIBILITY OF SYSTEM STATUS This website does not inform the user about where users are and what is going on clearly. For example the navigation bar always shows up on the top. The navigation changes color when the user hovers over a link and clicks it.
MATCH THE REAL WORLD
NiceBunny.com
In the shopping cart, they show what they sell with pictures. The descriptions are very small, but the pictures are very clear so users can find something they want easily. It matches the real world.
USER CONTROL AND FREEDOM There are 2 navigation bars in the header and footer, so users can go anywhere they want without too much effort, which is great.
CONSISTENCY AND STANDARD There are 2 navigation bars, which is a good things but the words on the navigations are very unfamiliar, and may confuse the user. For example, it say’s “Be nice”, this is not standard navigation and can cause the user to lose there way while navigating the site.
RECOGNITION RATHER THAN RECALL There is a link for MySpace, but they do not represent the link with a MySpace logo. Again there are unfamiliar words for navigation. It is not easy to recognition where a user is going.
13
REQUIREMENTS ANALYSIS
VISIBILITY OF SYSTEM STATUS The website has two main parts: “toy creator” and “the colony”. Users can see the manual in the top, which is clear and simple.
PaperCritters.com “Paper critters” is an online application for creating and sharing digital paper toys. User can choose “toy Creator” to start making a toy or, go to “the colony” to view an interactive gallery. User also can print their toy in real world.
MATCH BETWEEN SYSTEM AND THE REAL WORLD User can select different tools in “toy creator” to create the paper toy. There are many different patterns to select. They can choose the button “preview” to see the paper toy in 3D. It can help users to imagine their paper model. In the animation, there are all kinds of real paper toy in the real world. It display to user that everyone can make it.
14
REQUIREMENTS ANALYSIS
USER CONTROL AND FREEDOM
CONSISTENCY AND STANDARDS
User can use different “pen” to design their own paper toy, or they can use the pictures which the website have provided: cute, Evil, Loyal, Rebel. Then they can change color and upload their own images from computer so that they can create their own style. In “The colony”, users can base style, time to watch other paper toy. Users also can make comments and collect the paper toys they like. I think if the search condition can add “random” it would be better. The user may find some surprise design.
I think the type looks funny and cute, but it is not easy too recognize on the screen. User needs some time to recognize them.
ERROR PREVENTION There are many tips for users to avoid mistake.
RECOGNITION RATHER THAN RECALL Users can change to the other part easily, but users can’t go back to the first page.
15
REQUIREMENTS ANALYSIS
HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS FLEXIBILITY AND EFFICIENCY OF USE Users can share their design by E-mail, or they can copy the links for other people. The print option is convenient, but users can’t directly share their toy in social medial such as Facebook or Twitter. They only can use E-mail to share the digital toy. The website does not provide a place to share the real toy photos.
In “the creator”, there are “Undo” and “Clear” button. The red sentences help users to recover from errors.
Aesthetic and Minimalist Design The website uses green, blue and grey and a lot of white space. It looks relaxed and simple. I think the first page looks too compact in the left part and the right side has too large of a white space. The video’s position is not good. I think the website can provide some excellent paper toy example in the first page to attract the user.
HELP AND DOCUMENTATION Users can collect the paper toy in the website. And this website has tips for users in “my collection”. There is also a small icon in the bottom. In the E-mail, there are clear tips for users, also.
16
REQUIREMENTS ANALYSIS
VISIBILITY OF SYSTEM STATUS The visibility of system is quite clear because they always have headlines for each topic and also breadcrumbs throughout the site to tell the users where they are. Also there always interactions when we hover the buttons so users will know right away which ones are clickable or not.
breadcrumb trails
button
kidrobot.com
button when hover
MATCH BETWEEN SYSTEM AND THE REAL WORLD They mostly use short, friendly and easy words with the users so they would feel comfortable and understand the website easily.
17
REQUIREMENTS ANALYSIS
ERROR PREVENTION
USER CONTROL AND FREEDOM
They also did a pretty good job in this part. For example, when users went to create their new account, in the form, there are * mark to tell the users that this certain section needs to filled. Also they have choices for the users’ address’ state, country, birth date and T-shirt size to prevent users from answering and spelling incorrectly.
This website always keep their main menus at the same place so users wouldn’t get confused and also have the freedom to go back and forth or whichever section they want to look at.
CONSISTENCY AND STANDARDS Kidrobot uses pretty much the same graphic treatment and color scheme. Thus, it looks really consistent and understandable.
RECOGNITION RATHER THAN RECALL Since the first time I logged into the website I have no problem using the website I didn’t get confuse or lost. I was able to select the products, put them into cart and purchase them without any nerves. This means that this website is pretty recognizable.
18
REQUIREMENTS ANALYSIS HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS
FLEXIBILITY AND EFFICIENCY OF USE
In the registration page, if users filled in their information improperly and click submit, red letters guide will appear and will specifically tell them which area and what needs to be corrected.
Because this site is not a complicated website. They are just showing their product and let us be able to purchase them easily. There isn’t much flexibility found in the site.
Aesthetic and Minimalist Design This is one of the site’s strongest areas. The words, contents and graphic treatments are straightforward, clean and clear.
HELP AND DOCUMENTATION If problem or confusion occurs, users can always click on Site Map or Customer Service to send questions to staffs.
19
WEBSITE DESIGN SPECIFICATION
WEBSITE DESIGN SPECIFICATION FLOW INFORMATION ARCHITECTURE
21
WEBSITE DESIGN SPECIFICATION Actors: User & System
ACCOUNT REGISTRATION
1.User enters the Kami Toys website. 2.The system shows the home page. 3.User clicks the “create account” button. 4.The system show “Create account” page. 5.User fills in including user name, password, confirm password, e-mail, confirm e-mail, also there are * marks on each subjects. 6.User fills in all the information and hit “Submit” button. 7.The system prompts succeed information and go to “make toy” page. 8.User can see the information in the left side.
22
WEBSITE DESIGN SPECIFICATION Actors: User & System
MAKE TOY - TAKE PIC
1.User enters ‘Make Toy’ page. 2.A template of the toy appears in the center of the page with different buttons. 3.User chooses ‘Take pic’ button. 4.User takes photo of himself using his iMac built-in webcam. 5.User clicks on ‘Snap’ button. 6.System calculates the result and pastes user’s photo on top of the template. 7.User adjusts the image by clicking the resize, rotate and move button. 8.When done, user hits preview button. 9.System renders the template and previews the toy in 3d. Also provides 3 buttons on the right hand side, including go back, snapshot, and submit. 10.User hits ‘submit’. 11.User goes back to “make toy” page. 12.User creates toy until finish. 13.(See Account Registration) 14.(See Shared Design) 15.(See Print)
23
WEBSITE DESIGN SPECIFICATION Actors: User & System
MAKE TOY - PARTS
1.User enters ‘Make Toy’ page. 2.A template of the toy appears in the center of the page with different buttons. 3.User chooses ‘Take pic’ button. 4.User chooses a hairstyle in “parts”. 5.User moves the hairstyle to the toy template. 6.The system shows this hairstyle already in the toy template. 7.User creates toy until finish. 8.(See Account Registration) 9.(See Shared Design) 10.(See Print)
24
WEBSITE DESIGN SPECIFICATION Actors: User & System
MAKE TOY - UPLOAD PIC
1.User enters ‘Make Toy’ page. 2.A template of the toy appears in the center of the page with different buttons. 3.User chooses ‘Upload pic’ button. 4.The system displays the user’s document. 5.User chooses one of the pictures from the computer and click ‘Upload‘ button. 6.The system accepted user’s images. 7.User can adjusts the image by clicking the resize, rotate and move button. 8.When done, user hits preview button. 9.System renders the template and previews the toy in 3d. Also provides 3 buttons on the right hand side, including go back, snapshot, and submit. 10.User hits ‘submit’. 11.User goes back to “make toy” page. 12.User creates toy until finish. 13.(See Account Registration) 14.(See Shared Design) 15.(See Print)
25
WEBSITE DESIGN SPECIFICATION Actors: User & System
MAKE TOY - DRAW
1.User enters ‘Make Toy’ page. 2.A template of the toy appears in the center of the page with different buttons. 3.System provides tools including pencil, brush, eraser, and colors for user to edit and decorate his toy. Size of the brush and eraser is editable. 4. User selects a brush and draws his own face in the template. 5.When done, user hits preview button. 6.System renders the template and previews the toy in 3d. Also provides 3 buttons on the right hand side, including go back, snapshot, and submit. 7.User hits ‘submit’. 8.User goes back to “make toy” page. 9.User creates toy until finish. 10.(See Account Registration) 11.(See Shared Design) 12.(See Print)
26
WEBSITE DESIGN SPECIFICATION Actors: User & System
SHARE
1.User clicks the share button at the “make toy� page. 2.System prompts users design toy. 3.User selects social media channels to share design through (Facebook and Twitter). 4.User clicks share button. 5.System confirms social media channels. If no, system restarts selection process. 6.If yes, system then shares design through all social media channels selected.
27
WEBSITE DESIGN SPECIFICATION Actors: User & System
1.User clicks the print button at the “make toy” page. 2.The system shows the print template. 3.User clicks print button 4.The system prints the template and asks “would you like print another design?” 5.User clicks “no”. 6.The system goes back to “make toy” page.
28
WEBSITE DESIGN SPECIFICATION WIREFRAME HOME
29
WEBSITE DESIGN SPECIFICATION
ABOUT US
30
WEBSITE DESIGN SPECIFICATION
CREATE ACCOUNT
31
WEBSITE DESIGN SPECIFICATION
FORGOT PASSWORD
32
WEBSITE DESIGN SPECIFICATION
CONTACT
33
WEBSITE DESIGN SPECIFICATION
SITEMAP
34
WEBSITE DESIGN SPECIFICATION
HELP
35
WEBSITE DESIGN SPECIFICATION
MAKETOY
36
WEBSITE DESIGN SPECIFICATION
MAKE TOY - HIDE MENU
37
WEBSITE DESIGN SPECIFICATION
MAKE TOY - TAKE PIC
SNAP
38
WEBSITE DESIGN SPECIFICATION
MAKE TOY - TAKE PIC: PLACE IMAGE
ROTATE
SELECT VIEW
SUBMIT
39
WEBSITE DESIGN SPECIFICATION
3D PREVIEW
40
WEBSITE DESIGN SPECIFICATION
SHARE
41
WEBSITE DESIGN SPECIFICATION
42
WEBSITE DESIGN SPECIFICATION
43
WEBSITE DESIGN SPECIFICATION
GALLERY
44
WEBSITE DESIGN SPECIFICATION
FRIEND’S GALLERY
T O M S A N D E R S G A L L E R Y
T O M S A N D E R S O V E R A L L R A T E
3.5
I-HEART-U RATE V I E W T O M ’ S O T H E R D E S I G N S
45
WEBSITE DESIGN SPECIFICATION
PROFILE
46
VISUAL DESIGN
VISUAL DESIGN
logo
WIREFRAME Based on KAMI Toy's objectives and target audience, the website should look friendly and encouraging for users to come and have fun creating their own customized toy. Therefore, we use Toonish font, which is a fun and cartoonish typeface along with bright color combination as our main design element. Toonish was applied to all of the buttons and headlines throughout the whole website, also to create unity and connections between pages in the website. Plus, because of the playful and friendly character of the font, it avoids the users to feel nervous or spend too much time thinking while experimenting the website. Furthermore, to make the website even more user-friendly, the use of bright colors definitely add a positive feel and also create attraction to our target audiences especially the younger ages. Attracting and keeping the users fun and comfortable while experimenting KAMI Toy website are the key for the site's visual design.
TYPOGAPHY
ABCDEFGHILJKLmNOPQRSTUVWXYZ 1234567890-=;./ ABCDEFGHILJKLMNOPQRST UVWXYZ abcdefghiljklmmnopqrstuvwxyz 1234567890-=;./
color
48
VISUAL DESIGN
HOME
49
VISUAL DESIGN
ABOUT US
50
VISUAL DESIGN
CREATE ACCOUNT
51
VISUAL DESIGN
FORGOT PASSWORD
52
VISUAL DESIGN
CONTACT
53
VISUAL DESIGN
SITEMAP
54
VISUAL DESIGN
HELP
55
VISUAL DESIGN
MAKETOY
56
VISUAL DESIGN
MAKE TOY - HIDE MENU
57
VISUAL DESIGN
MAKE TOY - TAKE PIC
58
VISUAL DESIGN
MAKE TOY - TAKE PIC: PLACE IMAGE
59
VISUAL DESIGN
3D PREVIEW
60
VISUAL DESIGN
SHARE
61
VISUAL DESIGN
62
VISUAL DESIGN
63
VISUAL DESIGN
GALLERY
64
VISUAL DESIGN
FRIEND’S GALLERY
65
VISUAL DESIGN
PROFILE
66
USER TESTING
USER TESTING
Description The main problem KAMI Toy is trying to solve is to bring a small sense of reality to a users virtual world. Social media users thus far have been limited to their computers and mobile devices, KAMI Toy will enable the users to customize a profile toy/ character and print it out on a piece of paper. It can then be folded into a real life toy.
CONSISTENCY AND STANDARDS I think the type looks funny and cute, but it is not easy too recognize on the screen. User needs some time to recognize them.
68
USER TESTING
TESTING SCRIPT Thank you for agreeing to participate in KAMI Toy web site user testing. My name is (Your Name) and this is (other group members). KAMI Toy was created to allow users the ability to creatively express their imagination, not only in a virtual world, but also to give users the ability to bring their creations to life. Today we are asking you to evaluate KAMI Toy web site and to complete a set of tasks using our paper prototype. We will be observing and taking notes as you complete each task. Our goal is to see how easy or difficult you find the site to use. We encourage you to talk out loud throughout the process. Please feel free to give any suggestion or thoughts that you may have along the way. Your feedback is greatly appreciated and will help us improve the design. During this session I may not be able to offer any suggestions or hints for the given task. There may be times when I’ll ask you to explain why you said or did something. You will also be asked to take a short survey about your experience at the end.
Here are some things that you should know about your participation: • This is not a test of you, we are testing the site design. So don’t worry about making mistakes. • There is no right or wrong answer. We really just want to know if we designed the site well for you. • If you ever feel that you are lost or cannot complete a scenario with the information that you have been given, please let me know. I’ll ask you what you might do in the real world. • We will be video recording this session for further study if needed. Your name will not be associated or reported with data or findings from this evaluation. Please fill out the video release form. • Finally, as you use the site, please do so as you would at home. Do you have any questions before we begin?
69
USER TESTING
TASK 1 Create a new account with KAMI Toys. Use the following information to do so.
TASKs User Profile: You are a 17-year-old high school student from San Francisco, named Steven Seagal. You spend your free hanging out with friends, taking picture and dabble in design. You often share your photographs and designs with your friends via Facebook & Twitter. You come to KAMI Toy to create a customizable avatar likeness of yourself, incorporating a new portrait of yourself. Your intentions are to share your design with your friends through social media avenues, as well as bring your virtual avatar to life.
Name: Steven Seagal Username: Awesome Sauce Password: kamitoy456 Email Address: steve@awesomesauce.com Sex: Male Website: www.awesomesauce.com Phone: 172.824.9364
TASK 2 Assuming you’re logged in already, create a new toy incorporating a new portrait of yourself, and then save.
TASK 3 From there, create a new toy incorporating some dierent eye options.
TASK 4 Share your new design to Facebook and Twitter.
TASK 5 Print your design.
70
USER TESTING
CLOSING SURVEY 1. If you had to give the site a grade, from 1 to 5. With 5 being exemplary and 1 was failing, what grade would you give it? 1
2
3
4
5
Why?
2. What did you like best about the site?
3. What did you like least?
4. If you could make one significant change to this web site, what change would you make?
5.
Which task did you find the most challenging? Why?
6.
Are there features you would like to see added to the web site? Which ones?
7.
Would you recommend this Web site to a friend? Y / N
8.
Do you have any other questions or comments about the web site or your experiences with it?
71
USER TESTING
ONLINE PROTOTYPE PLEASE GO TO THIS LINK
72
USER TESTING
BELOW ARE THE CHANGES TO THE DESIGN KAMI Toy MADE, BASED ON USER FEEDBACK & OBSERVATION PROTOTYPE RESULT KAMI Toy performed user testing on three tech savvy individuals in our target market. Using low-fidelity paper prototype, we were able to find out where our site was deficient, and redesign to fit the needs of our users. In a posttest survey taken by our testers, we found very positive reviews with some great ideas on how to improve our design.
• Changed the layout of the “Home Page”. • Created a second option for “Create Account”. • Created a Hierarchy on “Make Toy” page to help guide users through the creation process. • Specifically the Take and Upload Pic buttons • Redesigned and simplified parts selector, on the “Make Toy” page, to a horizontal design. • Cut out xBox 360 and mobile share options.
73
USER TESTING changeS Paper Prototype
final
Hi-Fidelity Prototype
74
PROJECT PROCESS
USER TESTING
discussion website direction
card sorting
writing
research
76
USER TESTING
working together
paper prototype
discussion
paper prototype
77
USER TESTING
78
USER TESTING
visual design
79
conclusion
Conclusion
Conclusion We at KAMI Toy believe that thus far, using a user centered design process, we were able to develop a site that provided our users a stress free environment. The countless iterations, hours analyzing both our competitors and target audience, allowed us to create a simple, clean, usable design. High and low fidelity testing of five users confirmed the functionality of our design. In the future it is KAMI Toy goal to continue to develop the overall experience and usability, to continue to allow user the ability to bring their virtual world to reality.
81
thank you
Team Members Sabhat Rakitawan Jesse Sobol Hirotaka Fukui Bei Yan