GR2 Designs

Scenario

Vincent is a college student going on a vacation in Western Europe for winter vacation, and wants to be able to know exactly what to pack, since he has just finished his spring semester and has very little time to pack between coming back from school to flying to Europe. He decides to use PackIt, our mobile phone app that helps people decide what to pack on trips. He pulls up the app and inputs his destination, Western Europe, how long he is staying, 12 days, and the nature of his trip (vacation).

After inputting his travel information, Vincent sees a list of suggested items to bring, generated by the app, in the appropriate amounts for the 12 days that he is staying in Europe. The list includes winter attire, since the weather in Western Europe is freezing. He also sees suggestions for how to pack his items efficiently in a suitcase. Looking through the list of items, Vincent realizes that he would also like to pack his glasses and his laptop, so he adds them to the list.

As he begins to pack his things, he marks in the app that he has packed them into his suitcase. As the items that Vincent has packed accumulate, he can see the current estimated weight of his suitcase. After Vincent has finished packing, he pulls up the list of item that he has already packed, double checking that he has packed everything. Once he has finished, he clears the information in the app and closes it, ready to use for another trip.

Paper Prototypes & Storyboards

Design One

Sketch

Storyboard

Learnability

Efficiency

Safety



Vincent starts by creating a new trip (Figure A in the picture). He enters in the destination with a textbox that has autocomplete with locations. Since he will be flying to Europe, he picks the plane icon, along with the male  symbol. He then selects the 12 days he will be there using the calendar module that appears as he clicks the date (Figure B in the picture).

Pros

- Easy to learn because there are simple icons that the user sees which immediately describe what the icon represents without unnecessary words (aka, picture of airplane = travel there by plane)

Cons  

- Lack of text may be slightly longer for user to figure out whats going on

Pros  

- Autocomplete provides efficiency
- Tapping on icons to select is simple and efficient

Cons 
Pros 

- Allows the user to reselect icons if the wrong one is chosen 
- Allow user to reinput destinations

Cons

- After hit the "go" button, user cannot edit travel
information from screen, but instead has to delete the
vacation and make a new one



After he hits go, a selection of items are selected and automatically placed in his backpack (Figure A in the photo). However, because he is a hat-enthusiast, he decides to bring along 12 hats with him, increasing the weight of his backpack, and now notices that a luggage symbol has appeared, suggesting that bringing just a backpack may no longer be appropriate (Figure B in the photo).

Pros 

- Easy metaphor: items can be dragged into container, just like real packing
- Container changes based on # of items making it easy for the user to see how much stuff they could fit into a main menu because at the top of the screen but may be difficult to pick which one is the category you want (example: what does the "tie" icon represent, accessories or formal wear?)

Cons
Pros  

- Drag and drop provides efficiency

Cons

- Adding/deleting items may take longer than necessary

Pros  

- Adding/deleting items may take longer than necessary

Cons

- Not easy to delete/add item because you have to open backpack


Once he is satisfied, he clicks the checklist tab, and he begins to pack, checking off the items as he goes.

Pros  

- User has most likely encountered a checklist before, so easy to use this one 

Cons

- Doesn't allow user to add any items, so doesn't support some functionality of normal checklists

Pros  

- Simple checklist, user can find all items in this checklist

Cons

- If user is looking for a specific item, has to look through
entire list
- Difficult organization, no search

Pros  

- User can delete items or uncheck items they don't want

Cons

- No way to recover an item if a user deletes it



Before he leaves, he clicks the trip information tab, and he remembers that bringing a camera could be a good idea as there may be times for sightseeing.

Pros  

- Simple text page, nothing new to learn

Cons

- User doesn't know what to do if they want more information

Pros  

- All information in one location

Cons

- User may want too see only packing tips, must scroll to
the top to see them

Pros  

- User can easily navigate to and away from this page

Cons
Design Two

Sketch

Storyboard

Learnability

Efficiency

Safety

Vincent pulls up the app and inputs his destination, Europe, how long he is staying, 12 days, and the nature of his trip (vacation). He also inputs his gender so the list generated by the app can be tailored more.

Pros 

- The layout is very simple, and it is clear where the travel information should be entered 

Cons  

- There is no indication of how to move to the next view

Pros 

- All the fields for information to be entered is located in one place, making it easy to quickly enter all the information at once

Cons  

- Entering all the information via typing may be a bit time consuming

Pros 

- If a mistake is made in entering travel information, it is easy to simply re-select the field and correct the information

Cons  

- There is no indication of how to change travel information once Vincent has moved to the next view.

Vincent sees a two paneled screen. He wants to check the weather in Germany, his first destination, so he looks at the upper panel and sees that the panel contains weather information. He wants to see the average weather over the next several weeks, so after some exploring he sees a little graph icon in the bottom of the weather panel, clicks that, and is displayed with the temperature over time. After he has checked the weather, he's now ready to start packing. He decides to start with toiletries, as those are his most precious items. He looks at the bottom panel and sees that there is a toiletries category.

Pros 

- The suitcase on top of the scale is a clear metaphor to the user that the suitcase is 'being weighed' and therefore the user can see the estimated weight of their suitcase on the scale
- Each icon is clearly labelled with a category, and with their standard icon look the user is prompted to select the icon to view it in detail.
- The left and right arrows on the weather widget along with the highlighted circles below it make easy for the user to realize that they can switch the widget by toggling left and right

Cons  

- Since the view is evenly divided between the weather widget and the scale/suitcase, it is not immediately clear what the main purpose of the view is
- Because the view is evenly divided, between two different widgets, the user would have to take time to explore all of them to figure out what each does

Pros 

- For each widget visible on this view, there is at most one action to be done, making it fast to complete actions

Cons  

- Because the widget can be toggled left and right, in order to find out what each widget is the user  would have to toggle through all the widgets to discover them.

Pros 

- Actions are reversible; e.g. if a user switches to another widget it is simple to toggle back to the original one

Cons  

He clicks the toiletries category and it opens a checklist with entries that were automatically generated for him. He packs conditioner and aspirin and checks the checkboxes next to the items. They immediately move to the  bottom of the list. He realizes that the list hasn't autogenerated a toothbrush for him, so he decides to add it. He sees a textfield at the top of his screen called "Add another entry", so he taps it and enters "toothbrush" into textfield. It adds the entry to the top of his list. He selects the entry and sees details about the item appear at the bottom of his screen, such as weight and category. He also sees the option to "don't bring" the item.

Pros 

- The checklist format is a familiar module for the user, making it intuitive for how to use it
- The 'add another entry' is clearly labeled on the top of the checklist, making it easy for the user to add more items to the check list.
-When an item is selected, indicating that it has been packed, the item is struck through making it apparent that the item has been packed

Cons  

- It may not be that intuitive to remove an item, since users would have to first select the item to view it's information, and then select remove

Pros

- The list of items is the first the that appears when the view is opened, letting the user quickly see all the items in the chosen category without additional traversing through the app.
- The checklist format of the list makes it easy to mark that an item has been packed by simply selecting the item* *

Cons  

- It takes a little more effort to remove an item, since the item has to be selected first and then removed by selecting 'Don't Bring'

Pros 

- If a user accidentally marks an item as packed, it is easy to undo the mistake by simply selecting the item again (effectively toggling it's packed state).

Cons   

Vincent finishes packing everything in the clothing section, and only some things in the toiletries section. When he goes back to the main menu, he realizes that the categories where he has packed everything have a green icon in the corner. The categories where he has only packed some items appear as a yellow yield icon. Categories where he has packed no items have a red "x" in the corner. Now that he is midway through packing, he wants to know how much his current stuff weighs, in case he goes over the luggage weight limit. Conveniently, he realizes the weight is located at the top bottom panel. He sees he is over the limit, so he wants to know which category is taking up the most space. He searches around and notices that the bottom of each category also has a weight for all items in that category.

Pros 

- The icons on the categories make it clear what the packing status is to the user
- The packing status of each category uses familiar icons and their meanings, such as a check mark for completed, an 'x' for not completed.

Cons  

- The yield icon may not be as intuitive for representing partially packed

Pros 

- Because the icons are visible on a higher level, at the level of categories of items to pack, users can quickly glance at the category icons in the suitcase widget to determine how much they have packed.

Cons  

- Although the weight counter does say how much the items in total will weigh, the user doesn't really have a way of determining which category weighs the most without selecting the category and looking at the weights of each item in the category individually

Pros 
Cons  

- If the user sees that a certain category does not have the correct icon, it is not as easy to correct the mistake since the user would have to select the category and peruse the list of items to see which item was marked as packed/unpacked when it should be the opposite.

Vincent has finally finished packing but he realizes he's pretty bad at it because his luggage is pretty much overflowing. He wants to check how to pack more efficiently, so he goes to the main menu again and sees two arrows on the left and right edges of the upper panel and 5 dots near that bottom that indicate there are more panels to the left and right. He decides to check those out, and swipes left. On the left is panel for packing tips! He follows the instructions and now everything fits perfectly.

Pros 

- The packing tips are simple and laid out so the user can easily read them

Cons  

- The user might not know that there are packing tips, since they would have to toggle left and right to discover it in the first place

Pros 
Cons  

- To reach the packing tips the user has to toggle left or right, so it will take some intermediary steps before they can arrive at them

Pros 

- If a user accidentally toggles past a packing tip, it would be a simple matter to toggle back to the packing tip they were originally on

Cons  
Design Three

Sketch

Storyboard

Learnability

Efficiency

Safety

Vincent starts by pulling up the app. He sees a preliminary screen prompting him to input information about his trip and himself. He types in Europe as his destination for the trip, inputs how long his trip is (12 days), and then select his mode of transportation (airplane) via icons. He also selects his gender, and then presses 'Start Packing' to continue in the app.

Pros 

- The input fields on the page make it very clear what information should be entered into which fields.
- Icons with familiar images allow users to associate what they are familiar with to what they should select

Cons  

- When entering the length of the trip, it may not be as intuitive for the user to figure out how to change the unit of time (day, week, etc)

Pros

- Many of the icons are simply buttons, making it quick for the user to select an option as they enter their trip information. 
- All the fields that need to be filled out are located in one view, so that the user will only have to input information once

Cons  
Pros

- * *If the destination is entered incorrectly, or the length of the trip entered correctly, it is easy to re-enter the destination information or toggle the length of the trip.
- Similarly, other informations can be fixed easily by selecting a different button

Cons  

- Once the user has submitted their information, there is not really a way to fix their data if they have made a mistake and submitted it

The next screen displays shelves holding the different categories of items. Below shows a suitcase, representing the current items already packed. To the left of the suitcase is a box displaying the current estimated weight of the suitcase as Vincent packs. At the very bottom Vincent can also view packing tips, and to toggle them he can swipe left or right. To view the items in the clothes category, Vincent can select the clothes icon.

Pros 

- The metaphor of items, such as clothes and toiletries, on a shelf makes it clear to the user that the shelf contains items to pack.
- The box with a weight written on it, located next to an open suitcase makes it clear that the numbers indicate the estimated current weight of the suitcase
- The left and right arrows at the bottom widget, which contains packing tips, makes it clear that this area can be toggled to change the content

Cons  

- At first glance, it is not immediately clear what the user should do, other than toggle the packing tips and click on the icons; thus users might not realize they are able to select the suitcase to view what is inside

Pros 

-* *Because items are grouped into categories, it makes it faster for users to see what sorts of items they need to pack
- Having all the information in one location makes it easy for the user to see exactly what they need for them to pack easily and efficiently

Cons  

- Users need to go one more view in to see the individual items that they need to pack

Pros 

- If a user accidentally selects a category they did not mean to pack, it would be a simple task to simple return back to the original view
- Toggling past a packing tip when a user did not mean to is easily reversible by swiping in the opposite direction that the user had swiped in the first place

Cons  

- It is not clear how a user could change the categories that appear based on the initial information that inputted, since there is no way of changing the settings of their trip

In the clothes category view, Vincent can view exactly which items he should bring and how many of each one he should bring. He decides to pack his shirts first, and to indicate that he has packed them, he drags the shirts icon into the suitcase below. For each item packed and dragged into the suitcase, the weight counter increases. Vincent also decides to add glasses to his list of clothes item to bring, so he presses the add button to add them to the shelf. To view what items he has already packed, he can select the suitcase to see them.

Pros 

- Icons match visual objects that the user is familiar with so they are instantly recognizable
- Metaphor of luggage and dragging and drop to pack is intuitive

Cons  

- Users may not understand what a specific icon represents
- When user adds new item they may not know what category it goes under

Pros 

- Icons in corner telling how many of each item allows user to quickly view that information

Cons  

- User may have difficult time locating items of shelves, because items could be scattered in random locations
- User may take long time figuring out how to drop only one thing into the luggage bag

Pros 

- User can add items or delete items easily

Cons  

- User may have difficulty adding or deleting only one item in a particular category

Taken to a view of items packed in the suitcase, Vincent can see exactly which items he has packed. In addition to viewing the items he has packed, he can remove them if he decides not to take them with him in the suitcase. Once he has finished with packing he closes the app and gets on his way to Europe.

Pros 

- Is essentially just a list, so easy for user to understand what is going on

Cons  

- Difficult to see options are available besides "delete" due to lack of visual cues

Pros 

- Delete next to icons is easy to spot, so deletions will be quick

Cons  

- List is uncategorized so user may have difficulty locating a particular item

Pros 

- User can delete items they mistakenly inputted

Cons  

- User cannot add back items immediately if they accidentally deleted them, must go back to main menu and add the item

  • No labels

1 Comment

  1. Input, view, suggest, add. Insightful to also include estimated weight of luggage. Good diversity in overall designs, good job exploring different ways of display and input (ie icon buttons versus text field, etc.) Overall good presentation - would improve readability if an "overview" paragraph was provided for each design.