Page 1

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

PRINT

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

PRINT

42


WEBSITE DESIGN SPECIFICATION

PRINT

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

PRINT

62


VISUAL DESIGN

PRINT

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

Kami toy report final  
Read more
Read more
Similar to
Popular now
Just for you