Usability test plan with scenarios, recruitment plan and scripts. * Usability Testing: Results, Findings, and Recommendations report. * Annotated wireframe specification document. You can view an interactive prototype here: https://invis.io/RF7ZH65VN

1. kicks.com.au
user experience testing
Gerard Didier Janson
00126004T

2. contents
• planning
• usability testing
• Recommendations
• annotated wireframes

3. planning

4. planning
Recruitment Plan
Dates: Between April 29th and May 9th
Times: Anytime user is available
Length: 45 mins to 1 hour
Locations: Cafe, College, Pub, Users home
Incentives: Coffee, Beer, Tea
characteristics
interests: People who love sports
Athletes
Young, fashion concious people
age: Between 15years to 45years
(older depending on activity level)
online: People who shop online
Five participants will be interviewed who fit the
target audience.

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

6. 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

7. what was tested
finding and purchasing
a product or products
log in or register
process, ease of use amd visibility
shopping cart
adding items and icon feedback
contact
options, usefulness and ease of use

8. 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.

9. 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?

10. 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?

11. 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?

12. 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?

13. usability testing

14. 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 ...”

15. 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 ...”

16. 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 ...”

17. 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
...”

18. 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 ... ”

19. recommendations

20. 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.

21. 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.

22. annotated wireframes

23. HOME
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
sport
netball
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

24. 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.2
4.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. Notification that new password has been sent to email address
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. Search bar - users can type and search for specific items (word ‘search’ dissapears when user starts
typing)
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 - click to sign up to receive newsletters with news and offers
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. Social icons - users can view and interact with site’s social media presence

25. 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. Form fields - users enter their personal identification details here (form input fields turn green
when 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
greyed out if no info enter, turns red once form has been completely filled out)
4.56. Create new account form - users enter shipping and billing details here
4.57. Shipping information - user enters shipping information here (form input fields turn green when
valid information has been entered and turn red if invalid)
4.58. Billing information - user enters billing information here (form input fields turn green when valid
information 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 (form input fields turn green when valid information has been en-
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. View order - click to view details of specific orders
4.69.4. Site suggested product based on past purchases
4.69.5. Add to cart - click to add suggested product to shopping cart (pop up will confirm item added
to cart)
4.54 4.55
4.56
4.57
4.58
4.59
4.59.1
4.59.2
4.6
4.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

26. 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 - filter products by selecting from categories (selecting filters will reduce amount of
products 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. Buy now button - click to add item to shopping cart (pop up confirms item added to cart)
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. The number of one specific item the user wishes to purchase
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.1
6.2
6.3
6.4
6.5
6.6
6.7
6.8 6.9

27. 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. Meet our team button - click to view bio’s of key staff members (opens in new page)
3.4. Visit us button - click to view addresses of offices closest to your area (opens in new page)
3.5. See our partners button - click to see the sites affiliated partners (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.1
3.2
3.3
3.4
3.5
5.1
5.2
5.4 5.5
5.6
5.7
5.3
5.61

28. 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. Continue button - click once all fields have been correctly completed to start chat session
(button greyed out if no info enter, turns red once info entered)
5.54. Launched chat session window
5.55. User text input field
5.56. Customer service operator dialog
5.57. Submit button - click to submit message to operator once text has been typed into input field
(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

29. thank you