kicks.com.auuser experience testing

Gerard Didier Janson00126004T

contents

• planning

• usability testing

• Recommendations

• annotated wireframes

planning

planning

Recruitment Plan

Dates: Between April 29th and May 9thTimes: Anytime user is availableLength: 45 mins to 1 hourLocations: Cafe, College, Pub, Users homeIncentives: Coffee, Beer, Tea

characteristics

interests: People who love sports Athletes Young, fashion concious peopleage: Between 15years to 45years (older depending on activity level)online: People who shop online

Five participants will be interviewed who fit thetarget audience.

setup

website: Users will test kicks.com.au mockup / prototype using Invision appquestions: Users will be asked questions to help them perform designated tasks to measure ease of userobservations: Facial expressions and hesitations will be observed and follow up questions will be askednotes: Notes will be taken detailing user responses, reactions, obstacles and recommendationsreport: User recommendations will be reported for future changes to the website

participants

five participants were selected based on target market (age, sporting interests, fashion conscious)two males and THREE females

One male participant is a 22yr old fashion conscious student who shops online regularly and actively exercises

One male participant is a 30yr old student who shops online sometimes but rarely buys sneakers.

One female participant is a 32yr old mother who shops online regularly for clothing and shoes amongst many other products for he son and sometimes herself

One female participant is a 19yr old student who is studying cyber security, she regularly surfs the internet and somtimes shops online

One female participant is a 26yr old physically active professional who does most of her shopping online

what was tested

finding and purchasinga product or products

log in or registerprocess, ease of use amd visibility

shopping cartadding items and icon feedback

contactoptions, usefulness and ease of use

user stories

hi, I’m looking for a shoe as present for my girlfriend. She is an active netball player.I’d like to join the site and become a member as I see you have a lot of member-only deals.Can I continue shopping after I’ve selected items from different parts of your site?as a frequent online shopper, I appreciate getting immediate help no matter the time of day.

task 1 based on user story 1

1. How would you go about finding a product to purchase? 1a. How was that experience? 1b. Was this process as per your expectations? 1c. What made it difficult to find your product? 1d. What improvements could be made to make this task simpler? 1e. If you could change anything for this option, what would it be?

task 2 based on user story 2

2. What would you do to become a member?

2a. Was this option easy to find? 2b. Was this option where you expected it to be? 2c. Were the steps easy to follow? 2d. Was creating an account as you expected? 2e. Is there anymore information we could capture? 2f. How would you rate this experience?

task 3 based on user story 3

3. How would you check that you’ve selected an item to purchase?

3a. Did you find this option where you expected it to be? 3b. Was this option noticeable enough and easy to find? 3c. Did screen contain all the expected information? 3d. Is there any more information you’d like to see here? 3e. What was your overall experience performing this task?

task 4 based on user story 4

4. What would you do to seek help if you needed it?

4a. Was this option noticeable enough and easy to find? 4b. Which contact option did you choose and why? 4c. Were the steps easy enough to follow? 4d. Did you find this helpful? 4e. If you could add or remove a feature, what would it be? 4f. What was your overall experience performing this task?

usability testing

user one

1. User found the shopping process easy and was happy that there were multiple ways of getting to the same screen. He did suggest increasing

the size of the “shop” menu item or having the label “shop” appear near or underneath the menu.

2. User found the login icon easily and recognised the icon rather easily. He suggested having the label “login or register” under or above the icon

to make it even more identifiable.

3. User found the shopping cart easily and commented that the icon was universal and easily recognisable. Shopping cart contained all the

relevant information and was sufficient. He suggested adding a number above the shopping cart icon which updates as users add items for their

cart.

4. User found the contact page easily and chose the “live chat” function as he finds this the easiest and most efficient way to get help. He

suggested having the time and date of the messages in the chat window as they happen as well as having a button to email chat transcript to

the users email address.

“Can you maybe label the

login icon so I can recognise it

immediately ...?”

“Please add a number above the

shopping cart so I can tell how

many items I’ve added ...”

user two

1. User found the shopping process easy and found that having the “shop now” button on the banners useful as it served as another avenue

to get to the shopping page. He also commented that having the search filters on the left hand side of the shopping page made for easier

navigation. He suggested having more items on the shopping page itself so he could scroll through more instead of having to go to another

screen to browse more items.

2. Although the user acknowledged that the login icon is where it should be, he had difficulty finding it. He suggested having the label “login or

register” under the icon to make me more identifiable. He completed the member registration and was happy with this process but suggested

not having the screen go back to top from one form to the next.

3. User found the shopping cart easily. He suggested adding a number above the shopping cart icon which updates as users add items for their

cart. All information was sufficient.

4. User found the contact page easily and chose the “live chat” function as he found this easier than the email and phone options as he

assumed chat will have less wait time to get help. He suggested making the hero image on the contact page smaller as he did not see the

contact options immediately.

“Please add more products on

the home page so I don’t have to

go to another page ...”

user three

1. User found the shopping process easy and went straight to the “search” to shop for an item. She mentioned that she would use the “shop”

button in the top menu if she was just browsing, but if she was looking for a specific item, she would always use the search bar.

2. User suggested having the label “login or register under the login icon as she struggled to find where to login on the site. She did acknowledge

that the icon was exactly where she expected the login function to be. Creating an account was easy but she preferred not to have her credit

card details recorded for security purposes.

3. User found the shopping cart easily and commented that the icon was universal and therefore easily recognisable. She found all the

information sufficient and relevant. She questioned the need for the payment method information as her credit card details had already been

recorded.

4. User found the contact page easily and chose the “phone” option as it was available 24 hours a day everyday of the week.

“I don’t want my credit card

details recorded for security

reasons ...”

user four

1. User found the shopping process easy and went straight to the “search” to shop for an item. She mentioned that she would use the “shop”

button in the top menu or scroll through the home page if she was just browsing, but if she was looking for a specific item, she would use the

search bar.

2. User did not find the login icon easily as she did not recognise it. She suggested having the label “login or register” under the icon to make this

easier. Creating an account was simple and fast ans she commented that the amount of information recorded was sufficient as more would slow

down the process.

3. User found the shopping cart easily as she expected it to be in that location on the site. All the information on the shopping cart screen was

relevant. She found this process easy to understand.

4. User found the contact page easily and chose the “phone” option as it was she worried that the internet connection may drop out while in the

middle of a chat session.

“I use the ‘search’ function as I

usually know what I’m looking for

...”

user five

1. User found the shopping process easy and went straight to the “search” to shop for an item. She mentioned that she would use the “shop”

button in the top menu if she was just browsing, but if she was looking for a specific item, she would use the search bar.

2. User immediately found the login icon because it’s universally recognised. She commented that it was positioned where she expected and

that because not all users like to register to websites and the majority of people read from left to right, the icon was not in the way but users

know it’s there if they needed it. Creating an account was a simple process with sufficient information recorded.

3. User found the shopping cart easily as she expected it to be in that location on the site. All the information on the shopping cart screen was

relevant. She found this process easy to understand.

4. User found the contact page easily and chose the “phone” option as it was available to her 24 hours a day.

“I like that the login icon is

there but not in the way of my

shopping experience ... ”

recommendations

user recommendations

1. The majority of the participants recommended the implementation of a label under the login icon to make this feature more easily recognisable.

2. Adding real-time feedback from the shopping cart was also a popular suggestion. Users wanted to be able to see a number above the shopping cart item which indicates how many items they have added.

3. One participant recommended making the chat feature more comprehensive by adding time a date next to each message exchange in the chat window as well as adding a “email transcript” button under the chat window so users can keep a record of the conversation.

4. One participant suggested having more items on the home and shop page so he could scroll through without having to go to another page. So implementing an auto populate function which loads more items as the user scrolls may be beneficial.

5. One participant recommended not making the input of credit card information mandatory during sign up as some users don’t like this information being on a database. Some users prefer to enter these details when paying.

observations

both male participants immediately went to the “shop” button in the main menu.

all female participants chose to use the “search” bar when looking for a specific item. They all also mentioned that if they were just browsing, they would then go to the “shop” menu.

both male participants immediately selected the “live chat” function from the contact page as they found this the most efficient way of seeking immediate help.

all female participants selected the “phone” option from the contact page as they found this the easiest way of getting help.

annotated wireframes

HOM

E

SHOP

ABOUT

ACCOUNT

CONTACT

NEWSLETTER enter email address

live chat

email

phone

name / email address /query

sign up

existing member

name, email, address, password & phone

blurb about company, awards & products

women

men

boys

girls

sportnetball

basketball

soccer

rugby

brands

shoes

clothing

jordan

nike

adidas

reebok

check out

username & password / forgotlogin

add to cart

billing info

shipping method

payment

paypal credit card

review order

confirm order

1

2

3

4

5

site map

1

1.1 2

2.1 2.2 2.3 2.4 2.5

8

8.1 8.2

8.3

9

9.1

9.2

3 5 4 6 7

5.510 5.6 11 12

5 13 14 15

7

9

9.3

9

9.3

4.1

4.24.3

4.4

4.5

4.41

4.42

4.43

4.44

4.45

1.1. Header

1.2. Logo

2. Shop menu 2.1. Shop mens sneakers 2.2. Shop womens sneakers 2.3. Shop boys sneakers 2.4. Shop girls sneakers 2.5. Shop all sneakers

3. About us menu - links to About page

4. Sign in or register icon - users can log into account or become member (dropdown bubble interaction) 4.1. Log in drop down menu 4.2. Users enter their username and password here to gain access to their account 4.3. Log in button - click once correct username and password has been entered (button greyed out if no info enter, turns red once info entered) 4.4. Forgotten password - click if username or password has been forgotten 4.41. Forgotten password dropdown menu (dropdown bubble interaction) 4.42. Enter registered email address here to receive new password 4.43. Submit button - click once correct email address has been entered (button greyed out if no info enter, turns red once info entered) 4.44.Notificationthatnewpasswordhasbeensenttoemailaddress 4.45. Back to home button - click to go back to home page always red and clickable) 4.5. Create account - users can create a new account here (continued on next page)

5. Contact us menu - links to Contact page 5.5. Email - click to send admin an email 5.6. Live Chat - click to being chatting live to customer service operator (chat form pops up over same screen)

6. Shopping cart icon - users selected items are saved here for purchase

7.Searchbar-userscantypeandsearchforspecificitems(word‘search’dissapearswhenuserstartstyping)

8. Promotional banner - the site will feature latest items or sale items here (image gallery slider) 8.1. Banner slides backwards to display previous banner in the gallery 8.2. Banner slides forward to display next banner in the gallery 8.3. Shop button - users can shop items promoted on this banner

9. Featured Product - click image to display more information about this item 9.1. Brief description of featured product 9.2. Add featured product to shopping cart for purchase

10. Footer

11.Newsletter-clicktosignuptoreceivenewsletterswithnewsandoffers

12. Rate - click to leave feedback on the site, products and customer service

13. Extras - users can track their orders, return policy, view warranty details and review products

14. For You - users can check for discount coupons, refer friends and view latest releases

15.Socialicons-userscanviewandinteractwithsite’ssocialmediapresence

4.51

4.52

4.53

4.54 4.55

4. Sign in or register icon - users can log into account or become member (dropdown bubble interaction) 4.5. Create account - users can create a new account here 4.51. Create new account form - users are to complete there log in information (form loads on new page) 4.52.Formfields-usersentertheirpersonalidentificationdetailshere(forminputfieldsturngreenwhen valid information has been entered and turn red if invalid) 4.53. Newsletter - click to sign up to receive newsletters 4.54. Cancel button - click to cancel process and go back to home screen (clickable but greyed out so as not to draw attention to it) 4.55. Continue button - click to continue creating new account and move to next step (button greyedoutifnoinfoenter,turnsredonceformhasbeencompletelyfilledout) 4.56. Create new account form - users enter shipping and billing details here 4.57. Shipping information - user enters shipping information here(forminputfieldsturngreenwhenvalid information has been entered and turn red if invalid) 4.58. Billing information - user enters billing information here(forminputfieldsturngreenwhenvalidinformation has been entered and turn red if invalid) 4.59. Same as shipping address checkbox - check to bypass typing in billing information 4.59.1. Visa or Mastercard checkbox - check box for users credit card 4.59.2. Enter credit card details here(forminputfieldsturngreenwhenvalidinformationhasbeenen-tered and turn red if invalid) 6.6. User account page 4.61. Quick account access menu 4.62. Account summary - click to view personal account details and settings 4.63. Edit log in information - click to change preferred email address or password 4.64. Order history - click to view past items purchased 4.65. Wish list - click to view items user assed to their wish list 4.66. My credit cards - click to add or make changed to existing credit cards linked to account 4.67. Sign out - click to sign out of account and return to home page 4.68. Newsletter - click to sign up to newsletter (unless already signed white creating account) 4.69. Account summary - view personal details here 4.69.1. Edit details - click to edit personal details 4.69.2. Order history - view list of previous orders here 4.69.3. Vieworder-clicktoviewdetailsofspecificorders 4.69.4. Site suggested product based on past purchases 4.69.5. Addtocart-clicktoaddsuggestedproducttoshoppingcart(popupwillconfirmitemaddedto cart)

4.54 4.55

4.56

4.57

4.58

4.59

4.59.1

4.59.2

4.64.61

4.62

4.63

4.64

4.65

4.66

4.67

4.68

4.69

4.69.1

4.69.2

4.69.3

4.69.4

4.69.5

2. Shop menu 2.1. Shop mens sneakers 2.11. Mens sneaker page (womens, boys and girls pages have the same format) 2.12.Filters-filterproductsbyselectingfromcategories(selectingfilterswillreduceamountofproducts displayed on the right main area) 2.13. Product - click image to detailed information about this item (opens in new page) 2.14. Brief information about product 2.15. Ships free - indicates shipping cost if any (not clickable) 2.16. Buynowbutton-clicktoadditemtoshoppingcart(popupconfirmsitemaddedtocart) 2.17. Added to cart pop-up - indicates items has successfully been added to shopping cart (pops up over top of current page) 2.18. View cart button - click to go to shopping cart to review, delete or purchase item(s) (opens in new page)

6. Shopping cart icon - users selected items are saved here for purchase 6.1. Shopping cart page - users cart review their items before pruchasing here 6.2. Number of items currently in shopping cart 6.3. Image of item currently in shopping cart 6.4. Details of item currently in shopping cart 6.5. Add to my wish list button - allows user to save item for later purchase 6.6. Price of item currently in shopping cart 6.7.Thenumberofonespecificitemtheuserwishestopurchase 6.8. Edit or delete - allows use to edit sizes and colours as well as remove item completely 6.9. Checkout button - click to proceed to purchasing item

2.11

2.12

2.13

2.14

2.15 2.16

2.17

2.18

4.69.4

4.69.5

6.16.2

6.3

6.4

6.5

6.6

6.7

6.8 6.9

3. About us menu - links to About page 3.1. About us page 3.2. Quick menu items to navigate about us page 3.3.Meetourteambutton-clicktoviewbio’sofkeystaffmembers(opensinnewpage) 3.4.Visitusbutton-clicktoviewaddressesofofficesclosesttoyourarea (opens in new page) 3.5.Seeourpartnersbutton-clicktoseethesitesaffiliatedpartners (opens in new page)

5. Contact us menu - links to Contact page 5.1. Contact us page 5.2. Quick menu items 5.3. Customer service information and contact us options 5.4. Phone number to contact customer service 5.5. Live chat button - click to begin chatting with a customer service operation 24/7 (pops up over cur-rent page) 5.6. Email us button - click to launch local email client and send email to customer service department 5.61. Email client on (MacOSX) launched with customer service email address populated (pops up over current page) 5.7. Other contact information and job opportunities (all links open in new page)

3.13.2

3.3

3.4

3.5

5.1

5.2

5.4 5.5

5.6

5.7

5.3

5.61

5. Contact us menu - links to Contact page 5.5. Live chat button - click to begin chatting with a customer service operation 24/7 (pops up opens over current page) 5.51. Live chat form - user must enter requested information to commence chat session 5.52. Cancel button - click to cancel and return to contact us page (greyed out but clickable) 5.53.Continuebutton-clickonceallfieldshavebeencorrectlycompletedtostartchatsession (button greyed out if no info enter, turns red once info entered) 5.54. Launched chat session window 5.55.Usertextinputfield 5.56. Customer service operator dialog 5.57.Submitbutton-clicktosubmitmessagetooperatoroncetexthasbeentypedintoinputfield (button greyed out if no info enter, turns red once info entered) 5.58. Close chat button - click to leave chat session and return to contact us page (greyed out but clickable) 5.59. User dialog

5.51

5.52 5.53

5.54

5.55

5.56

5.57

5.58

5.59

thank you