Navigation

Click on a page above for a specific section.

GR3 - Paper Prototyping

Initial Prototype Photos 

The EasyShop homepage

Features prominent search bar with large UI buttons to navigate to specific product categories

Search results page (medium sized elements)

Shows 4 results per page. Each result consists of a product title, price, and an image. Users can add products directly to their cart from the search results using the Add to Cart button

Search results page (large sized elements)

Shows 2 results per page

Product page

Displays description of product and the price. User can also use the large buttons on the right side to look at reviews, submit a review, or add the item to their cart

Product review page

Allows user to submit a review. Each review must have a title and a X out of 5 rating to be submitted.

Shopping Cart view

Shows all current elements in the shopping cart along with their cost. The quantity of each item can also be changed. At the bottom of the page is a running total of the cost of the items in the shopping cart.

Checkout summary page

Reiterates to the user what items he/she is purchasing, along with billing and shipping information (address, payment method, estimated delivery date, etc.)

Briefing 

Thank you for helping us test our shopping site for the elderly. We will be asking you to perform a series of tasks to test the usability of our website. We are not allowed to aid you in the completion of the tasks and we ask you to please think out loud while you are completing these tasks. Sometimes when people concentrate on something they forget to think out loud, so please be aware of this and we will remind you if needed. The more we know about what you want to do and what you think something should do, the better off we are. Remember that you can stop at any time and feel free to ask us any questions after you the test. 

Scenario Tasks

We will consider two scenarios: buying a present using the visual interface of our software and purchasing speakers as a visually impaired user utilizing our VoiceAssist mode. Each scenario also contains a visual walk-through attached as a separate page.

Scenario 1 - Buying a Present

You are an elderly person that is looking for a present for your grandson. Your grandson really likes basketball and specifically asked for a Spalding full size basketball. For convenience you already have an account. 

Tasks

First purchase

1. Log in
2. Search for basketball
3. Resize results page to be able to see 8 results per page
4. Check reviews for the basketball
5. Add to cart and checkout

A week later

1. Find the basketball you purchased
2. Give the product a review

Scenario 2 - Purchasing Speakers (Voice)

You are a visually impaired person that is in the market for some new speakers. A friend told you that Logitech makes some affordable and good quality speakers. 

Tasks

1.  Purchase a set of speakers from the company Logitech

Wizard

Hi, welcome to EasyShop, what are you looking for? Food, Clothing, Electronics, Drugs, or “list more options”? Answer: Electronics

What electronics device are you looking for? TVs, DVD/BluRay player, or Audio devices? Audio devices

What type of audio device are you looking for? MP3, headphones, or speakers? Speakers

We have the following speakers in stock: Bose TrueSound speakers, Logitech Pro speakers, and the Panasonic MaxBass system? Logitech Pro

Logitech Pro speakers are $79.99, would you like to add them to your cart? Yes

The Logitech Pro speakers have been added to your cart.

Observations

First User

Scenario 1: 

Instead of using the search bar to search for a basketball, user clicked sports category instead

• This was likely the sports category button prominently featured an image of a basketball.

Resizing the search results was not clear to the user

• The information scent given by our resizing icon and slider was apparently not strong enough to be picked up by the user
  • It might have been better if we had used text to indicate what the slider did and made the slider a little larger

Scenario 2:

Interestingly enough, our second user breezed through voice interaction system very easily. Voice interaction proved to be very easy to pick up by users.

Second User

Scenario 1:

Took user significant amount of time to locate the checkout button

This was probably due to the checkout button being far out of the user's focus after adding an item to the cart (in the top left corner), and the fact that button did not offer any button affordances in the prototype (circle, square, etc.)

User squinted during some areas of the demo

Text in some parts of the website were too small, particularly the log in drop down.

Scenario 2:

Found it straight forward 

Third User

Scenario 1:

User could not tell which products he had already purchased

• Search results had no indication of which products had been bought, and neither did the shopping cart page

Double search bars somewhat disoriented the user

• Having two search bars made the user wonder which one he should use, and if they were functionally different.

Scenario 2:

Found it straight forward 

Prototype iteration 

For our second iteration we changed the following things:

1. Increased the font size in certain areas of the website, mainly the log in drop down 
2. Made the location of the cart more obvious because people were having trouble finding it 
3. Added a label to the re-sizing widget because some users could not tell what it was
4. Gave items a "recently purchased icon" to make it easy to know which items you can review   
5. Removed initial top search bar on home page and made the middle search bar move upwards as the user searched for something to make the top location more obvious