GR3 - Paper Prototyping

Prototype photos: First Iteration

Create a Trip

Approve a Trip

Analyze Trips




Briefing

  • The MileageManager application is intended to be used in a business context. 
  • Purpose is to make the whole process of personal reimbursement of mileage by a company more efficient and visible to all users of the system
  • Mileage reimbursement is when you (as an employee) get reimbursed by the company for using your own personal vehicle for business purposes, typically at a fixed dollar rate per mile
  • The MileageManager web application tested today is intended to be an individual module of a more comprehensive web-based reimbursement system (to be developed).
  • Over the course of this test, you will complete three tasks with individual subtasks as three different types of users. Please think aloud and let us know what you like and dislike about the interface!

Scenario Tasks

Create a Trip

Approve a Trip

Analyze Trips

You have a flight to catch at Logan airport on 3/5 and want to drive around visiting clients before driving to the airport and parking. Please create and save a trip which will consist of:

  • A meeting with Microsoft at their Cambridge office at 9 AM
  • A meeting with Kayak HQ in Concord, MA (meeting can be anytime)
  • A meeting at 100 Baker St. in Lowell, MA (meeting can be anytime)
  • A stop at Logan airport for your flight at 5 PM.

You are a sales manager and are approving mileage reimbursements for your salespeople. Your tasks are:

  • Investigate Phyllis' sales trip.
  • Approve it.
  • Approve everybody else's trips.

You are a company auditor. You suspect something fishy happened in terms of mileage reimbursements between June 2010 and November 2010 in the IT department. It is up to you to investigate and figure out the culprit. Your tasks are:

  • Investigate the trend of spending among the IT department between June 2010 and November 2010
  • Figure out the individual culprit

Observations: First Iteration

User

Create a Trip

Approve a Trip

Analyze trips

User 1

  • Pressed "add" before entering address
  • Typed in address of Microsoft, rather than using "saved locations" bar
  • Very confused about what to do in general
  • No idea what to do about time
  • Pressed "save trip" after entering every leg
  • Unclear about what "underlined things" are (i.e. name of trip)
  • Noted consistency problem between "approve" and "accept" in the two different panels
  • Derided "add trendline" feature as unnecessary
  • Confusion about current state/mode ("am I in department, year, overview??")
  • Confusion about what can be clicked and what can't be ("sometimes its the graph, sometimes its the buttons?"). Tended to click on buttons only
  • To access individual department, clicks on the name in the legend, rather than the piece of the pie.
  • Quotes of note: "Where am I?" "What am I doing?" "Is everything clickable?" "Stack is not clear!" "How do I get back?"

User 2

  • Confused about how to use "end date"
  • Confused about how to use address bar versus saved locations
  • Didn't know the map of the trip was below the scroll
  • Pressed "save trip" after entering every leg
  • Thought "balance" was how much the checked trips added up to.
  • Confusion around "accept" and "approve" just like first user
  • Delight: "Oh, the total changes!" (after they approve Phyllis' trip)
  • Doubt: "I'm assuming the math is good"

(Note: didn't have much time for this one as it occurred towards the end of class)

  • Expressed mode/state confusion
  • Clicked only on buttons

User 3

  • Goes to the address first (doesn't used saved location at all)
    • Suggested putting the most common clients on a map with a tag that says "add me" rather than use the text box interface.
  • 3 buttons at the bottom was confusing to them
  • Was looking for more detail on the trip to New Jersey (what hotel did she stay in for example)
  • Was looking for other expenses besides mileage
  • Pointed out that trip was not consistent (one leg ended in New Jersey, the next leg started in New York - where did she go in between?) - note: trip consistency may need to be enforced in the back-end??
  • Clicks on "department" to navigate to department, rather than clicking on graph.
    • Upon click, expected to see a list of departments, rather than a pie chart of the distribution
  • Didn't know how to get down to the employee level - there was no button on the side
  • Would like to see how much each approver approved
  • Would like to see buttons with pictures of the graph type (trend line and pie chart), rather than a drop down
  • Registered surprise that some people didn't have the analyze tab, but acknowledged that it might make sense in the context of a business.

Prototype iteration

Create a Trip

Approve a Trip

Analyze Trips

  • Changed web-form input required from user to be just three boxes: "address", "arrival time" and "date". These boxes are now aligned horizontally all on the same line at the top of the tab
  • Only allow user to click on "add" when they have filled in all three boxes
  • Changed "Added Locations" label to "Added Destinations" label (functionality remains the same)
  • Shrunk map and calendar so that they are next to each other with the intent to keep everything on the same screen (without scrolling)
  • Eliminated "cancel" button (now just "save trip" and "submit trip"

On overview view:

  • Consolidated "Your Budget" and "Your Balance" to just "Remaining Budget" (still updated dynamically)
  • Added labels to columns: "Name", "Departure Date" , "Trip Name" and "Cost"
  • Changed label of button to "approve selected" from "accept selected"
      
    On detailed view:
  • Changed label from "Details" to "Mileage Detail"
  • Added mileage to information in addition to costNote: both changes in detailed view meant to emphasize to the user that this is a mileage tool module only - how this works within the overall reimbursement system is beyond the scope of this project for now.
  • Eliminated the ability for user to click on graphs
  • Made buttons along the side ("Company Overview", "Department", "Employees", and "Approvers") into vertical tabs.
  • Eliminated option for user to select pie charts.
  • Clicking on company overview now displays (by default) a pie chart of departments (top) and an overall company trend-line for the given time period (bottom).
  • Clicking on the three other tabs displays a scrollable ranked list of top spenders (top), and a trend-line chart for the highlighted row during the given time period (bottom).
  • Added "export" button on top of page.

Observations: Second Iteration

User

Create a Trip

Approve a Trip

Analyze a Trip

User 1

  • Not sure where the starting address is
  • Trying to create a rough schedule
    • Not sure how the program guessed the end meeting time
    • Tried to click on the calendar but nothing happens
  • Use the calendar as a way to calculate transit time which doesn't exist
  • Knew how to pull up Phyllis' trip
    • Interesting that the trip could be approved on the page and also on the smaller page
  • Looking for a "Select All" option to select all trips and approve them all at once
  • Would open all the trips in different tabs to inspect all of them
  • Looking for generally what's wrong
  • Would shift slider to see historical data about the IT department
  • Would be nice to be able to filter employees by apartment

User 2

  • Looking for a starting point - spent a lot of time looking for it
  • Use the save button in case the website crashes
  • Check to see if the trip appears in My Trips after the save button is clicked
  • Select all 4 boxes to approve
    • Was surprised to see that the budget did not change
  • Was able to follow tasks pretty easily

User 3

  • Not sure what to do with the interface
  • Tried to click on the calendar and nothing happens
  • Not interested in going through this trouble
  • Would prefer an automatic import from your calendar
  • Would like to see an option where when you click on one trip, you can go to the next one and do not need to return to the original screen
  • Would not use in built in interface for graphs
  • Automatically wanted to export data to Excel for ease of use
  • No labels

1 Comment

  1. Glad to see that you have lots of useful user feedback and improved the interface. Please take in account the usage flow of users like which component they look at first and how they think to come up with suitable layouts.

    For your Create a Trip, I suggest you make it step-like layout, clear structure of which field is behind which field. For Approve a Trip and Analyze Trip, make sure you have enough visual feedback.

    Otherwise, great job!