Navigation

Click on a page above for a specific section.

GR2 - Designs 

Scenario

Carol Peterson is a retired materials engineer with five grandchildren and bad eyesight. She always goes to the store to buy her weekly groceries, with her typical shopping list consisting of food, clothing, and the occasional birthday present. She usually knows exactly what she wants to buy, but would rather not have to go to the store to do it. She has been meaning to switch over to a fully online experience, but does not want to lose the human interaction that comes with going to the store. One day, she went to the store and everything had been rearranged, making her shopping trip into an unwanted adventure. This was the final straw and now she is going to try doing her weekly shopping online. 
Tasks:

1. Search for grocery list item
2. Reach some sort of customer service
3. Check a review of the item
4. Add to cart and have delivered bi-weekly 

Individual Design Sketches

Albert Rodenius's Design Sketchs

Andrew Dorne's Design Sketches

Jorge Ornelas's Design Sketches

Otitochi Mbagwu's Design Sketches

Group Storyboard Designs and Analysis

Design 1 - Visibility-Focused

Storyboard

Image 1: Item selection page. Here the user can view all the items which are pulled for a specific search. The user has the option to select how many images they want to see per row. In this design, the selector only allows users to select one, two, or four per row and the selector has defined stopping points at each of these values. The site defaults to 2 images per row which we believe is a good size for elderly with potential vision problems. There is also a button to view the shopping cart in the top right and a category selection tool in the top left. Finally, the top bar has search and the top right corner allows the user to go to a settings page.

Image 2: Product information page. A user would arrive here after selecting an item on the item selection page. On this page, the user can view a variety of information about the item. There is a large photo of the item with a description in large text. Below that is a set of reviews which the user can scroll through. The review contain a small amount of text. Finally and most importantly, on the right is a little summary of important information on the product: price, quantity to purchase, brand, customer service phone number, and anything else that maybe deemed appropriate and important. This would be fixed on the page. The top bar remains the same. 

Image 3: The shopping cart. Items are shown prominently and quantities are easily modifiable. There is a short description of the product as well and the total will be shown at the bottom of the page. The top bar still remains the same.  

Design Overview

This design focuses on the common vision problem of the elderly. It address this issue through the use of large font and large images; however, it allows users with better vision to customize the views. We decided to put a permanent category selector in the top right because we felt that some users would find categories extremely useful for some purchases, especially gifts. Ultimately we decided for a low profile category selector because we figured the users who really enjoyed categories could use the drop down selector. The drop down selector would probably be larger than in the image. We also found that for elderly, it was really important to have branding on the items so brand logos appear in the top right of a item box. It was also really important that item information page had the fixed summary section to the right. The top bar search ties things together and allows the user to search from virtually any page. 

Learnability

This design addresses issues of learnability using clear transitions, visible icons with text descriptions, and large text. Specifically, the search bar is in the center of the page on the homepage, but when a search is performed it slides to the top bar. Icons and text are resizeable, and every button has an icon title. The drop down bar on the left is not initially obvious but it would flash on mouseover and with a single use it would be clear that a selection would take you to a different product category page.

Efficiency

The efficiency of this design lies in its simplicity. Though initially emphasized for clarity and learnability purposes, the simplicity of this design means that fewer clicks are necessary in order to execute a purchase. On the item detail page, a sidebar on the right has fixed position (i.e. does not scroll with the page) so that if the customer decides he or she would like to purchase the item while scrolled down in the middle of reviews, he or she need not scroll back to the top of the page.

Safety

The most important parts of safety in shopping are ensuring that nothing is purchased accidentally. To combat this, we have several features. First of all, the checkout process asks for confirmation. Secondly, adding to the cart asks for the quantity desired before adding. We also want to prevent users from accidentally mousing over the category selector so one would have to click on the selector to access the drop down. Also, one might accidentally update the quantity of an item that they may want. The page will require that a user hits update quantity at the bottom before proceeding to checkout.

Design 2 - Efficiency-Focused

Storyboard

Image 1: The main purchasing page 

Design Overview

This design was inspired by tablet interfaces and had the main focus of being as efficient as possible. Carol would search for the item in the search bar. She would then find the seller's customer service number in the item description and give them a call in order to have some of her questions answered. After that, she would look through the reviews below each item to make sure she was not buying something with low ratings. She would then finally add it her shopping cart on the left and continue shopping. 

Learnability

In order to facilitate the learnability of the keyboard shortcuts, which are a focus of the design, we have an initial overlay on the site with the keyboard shortcuts enumerated. Additionally, whenever a ctrl or alt key is pressed, the overlay appears again for the current page. This page has many external consistencies seen in other shopping websites like amazon.com. 

Efficiency

The focus of this design is efficiency, and as such keyboard shortcuts are prevalent. Additionally, almost all of the functionality is located on one page in order to facilitate fewer clicks.The shopping cart is static on the The process can be done entirely through voice, so users with impaired visual ability can still perform shopping tasks.left side for easy access and quick modifications to current orders. Related search results make searching for a certain product efficient.  

Safety

This design is safe in that there is a keyboard shortcut to undo any action. Additionally, any keyboard shortcut which is pressed is shown on the bottom. The shopping cart is easily modifiable and any accidental purchases can be quickly and easily undone. 

Design 3 - Audio/Voice-Focused

Storyboard

Image 1: Clicking on the "Click to Start" button will begin prompt the shopping digital assistant.

Image 2: The transcript of the conversation is printed out on the screen

Design Overview

This design revolves around voice interaction. It's primary audience was older people that have poor vision. These users would not be conducive to heavy graphical/text interface. In this design the shopping is automated, and the users interact with a digital assistant. The assistant asks the user a series of questions in order to narrow down their selection. The system can direct the user to customer support if more advanced guidance and/or help is needed. The transcript of the conversation is displayed on the screen.

Another goal of this interface was to recreate the personal interaction side of shopping that is absent from most online shopping. Adding a friendly digital assistant that walks the user through a purchase takes steps towards that goal.

Learnability

Upon first entering this site, an audio tutorial is given with available keyboard commands and navigation tips. Furthermore, the command “help” can be issued, and all the voice and keyboard commands will be read out. This interface has very good learnability, since talking is a natural way of interaction. Also, if the user still has issues with interaction, the system can connect the user with customer service.

Efficiency

This design is keyboard and voice-centric, and as such does not require precise mouse movement. Though interaction with this design is simple, efficiency is hampered. Conversing with an automated machine is much slower than keyboard and mouse navigation since the user must partake in a back and forth conversation. What's more, is that a new conversation must be had for each item bought. Buying a multitude of different items using this interface will likely be a very slow going process. More expert users may not find this interface fast enough. 

Safety

An “undo” command can be issued, which will undo the last action (and read out what action has been undone). Thus, accidental/inaccurate responses can be reverted with the click of a button. Also, since the conversation is also outputted to the screen, if a user forgets where he/she was during the transaction process he/she can simply read over the transcript.