Versions Compared

Old Version 52

changes.mady.by.user Unknown User (adukes@mit.edu)

Saved on

compared with

New Version Current

changes.mady.by.user Anh Dang Viet Nguyen

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Corrected links that should have been relative instead of absolute.

GR2 - Designs

Scenario

It is the third Monday in March and Phyllis is going on a sales trip the next day.  She is based in Boston and is going to visit offices at 6 places in 3 days, and wants to be back by Thursday evening. She sells cloud computing services and is the account manager responsible for all regions in New England and the Mid-Atlantic.  She is going to different companies and targeting specific industries.  The 6 places she has to go on the current trip includes New York City, NY, Philadelphia, PA, Pittsburg, PA, Hartford, CT, Albany, NY, Atlantic City, NJ.

...

  1. Log into the Mileage Manager application
  2. Query the application to create a report of all trips made in the last three months
  3. Export the results to an Excel readable file
  4. Log out of the Mileage manager system
  5. Analyze the results “offline”
  6. Flag any suspect trips in the system for follow-up with sales managers
  7. Create a quarterly report in Powerpoint for the Finance department head.

Designs

Design #1

Create Trip

 

Storyboard

 Visibility

Learnability

Efficiency

Errors

This panel is where Phyllis would create her new trip. First she would enter her starting and ending date using the standard calendar widget pop-up. She would also choose a time from the dropdown menu, whose default option is "anytime" but also includes options like "early morning", "evening" and then specific hours.| 
She then proceeds to enter all of her planned stops along the way. She can either type the address of the location or easily select saved locations. While she types in the text box, the system will predict which location she wants to input showing her the best matches. After pressing enter, locations will be listed on the side next to a "x" symbol to delete them if needed. 
  
The system will automatically and in real time draw the optimal route in a google map widget embedded on the site. Moving the mouse over each location will give information about that specific stop such as name of client, address, picture, etc. 
  
Then she will be able to plan a schedule for her meetings using a time bar. The system will show her range of hours for each day`s meetings. She can then select her most appropriate time for each location. The system will automatically and in real time update the available hour range of the remaining meetings, based on the already scheduled ones. 

The calendar widget makes it very easy to to select dates.
The summary shows the current status of the trip before creating it.

It uses standard widgets such as text fields and drop-down menues.

It uses the Facebook predictive text field and Google map widget.

The map update in real time so there is no need to generate it or wait for it to load.
The Facebook predictive text field is very effective in selecting previously saved data. 

Every field is easy to change.
There are "x" in the locations boxes to delete them if needed.
Time adjustments are changeable by dragging.
The summary shows the status of the trip and it cost, before creating it preventing errors.

Approve Trip

Image Removed  

Storyboard 

Visibility

Learnability

Efficiency

Errors

Image Added

This interface is where Mary would approve trips for Phyllis and her other direct reports. On the top she will see her managed budget and her current balance.

Below is a queue of all trips that her direct reports have submitted for her approval, including dates, name of trips and total dollar amount of each trip. She can immediately approve or reject a trip with the buttons on the right of each trip. She can also select several trips with the checkboxes on the left and approve or reject selected trips with the buttons in the bottom.

Pressing on the name of a trip will give Mary detail information about that trip.

Visibility
You Mary can see the budget and current balance. You

Mary can see all the trips in the queue.

Common way of listing document.

It uses hyperlink Learnability
Regular list of document. Hyperlink to see the details.

Efficiency
You Mary can approve or reject immediately and reject trips  immediately and by selecting several trips.

Errors
You Mary cannot undo an error after you make she makes it. Is necesary necessary to add that feature. this feature because if she makes a mistake and approve the wrong trip she cannot undo it.

Image Added

The detail

Image Removed

The detail screen will show the name of the trip, the starting and ending date of the trip, the travelers name, the map of the route and a cost breakdown.

She will be able to see each section of the trip with its date, locations and cost. At the end she will see the total cost and will have the choice of going back, approve or reject the trip.

You Mary can see the breakdown of costs.
You can see the map with the route. You see the name of the traveler and trips datesname of the traveler and the dates of the trip. She can see a map of the route and the breakdown of costs.

N/A

It is just one page with all the information needed so it is fast to read.

N/A

Analyze Trip

Image Removed
Here Juan can export the Visibility
Calendar Facebook predictive Learnability
Standard field menu menu, Efficiency
. Errors export . Can save query

 

Storyboard

Visibility

Learnability

Efficiency

Errors 

Image Added

Here Juan can export the

data to analyze the information. He can input several filters to get the required data. Juan can filter by date, department, cost center, approver, traveler (employee), location, status of the trip and value of the trip. 

For date selection he can use the standard calendar widget and the time drop-down menu. For department, cost center and locations he can use the multiple selection menu. For approver and employee he can use the predictive text field. He can also select approved, rejected or pending trips through 3 checkboxes. The values can be selected by to text fields. 

Finally he can export the data and save the query. 

When Juan exports the data, the standard windows explorer dialog box pops up that allows him to save all the information in the system to an .xls or .csv (or whatever) file(s). 

The calendar widget makes it very easy to to select dates.


It uses standard widgets such as text fields, drop-down

menues, multiple choice

menues and checkboxes

. 

It also uses the Facebook predictive text field.

The Facebook predictive text field

is very effective in selecting previously saved data.

Everything can be change easily.

After

data has been exported, it can be exported again

and queries can be saved for later use.

Design #2

Create Trip

Storyboard
This panel is where Phyllis would create her new trip. It is a lot like the multi-city mode for Kayak.com First she would log in, which would bring up her view and automatically start her in this tab. Then she would enter her starting address in the first textbox at the top (which has address autocomplete). In the next textbox to the right she would enter her preferred departure date by typing it in or using the standard calendar widget. She would also choose a time from the dropdown menu, whose default option is "anytime" but also includes options like "early morning", "evening" and then specific hours. 

She then proceeds to enter all of her planned stops along the way, using the same functionality as the starting point. She also chooses a "type" for each location using radio buttons which include "client", "hotel" and "other" which will aid in later auditing. She can add additional stops by clicking on the "Add destination" hyperlink which always appears at the bottom of the list. She should be able to delete legs of the trip as well (delete button not pictured!)

She can also view previous trips by clicking on an item in the list of links on the right, which includes a scrollbar if she has many trips. This may help her fill out the current trip if she visits many of the same clients and can't remember an address, for example. The scrollbar is in a separate view.

When she is done entering stops, she clicks the "Generate Trip" button, which will display a map of the trip and suggested meeting times along the way in a separate screen (not shown).  

Visibility
Some good aspects of visibility is the navigation state is provided by tabs at the top so she knows what mode she is in. There is good information scent by using standard widgets like calendar icons, radio buttons, dropdown menus and hyperlinks.

Some problems with the visibility may be the list on the right of the page obscuring lots of previous trips. Also, it does not show the map or suggested times of the trip until the user presses "Generate".

Learnability
The main positive of this interface is that that it is consistent with familiar travel websites like kayak.com or expedia.com.

A bad part of the interface, however, is that the user cannot build a trip through trial and error because they have to press generate every time they make a change, wait for a map to load, and then shuffle back and forth; thus feedback is poor.

Efficiency
The interaction style is menu and form and tries to balance learnability with efficiency. For example, the address textboxes are all autocomplete. She can also view previous trips easily if she can't remember an address. In addition, expert users can simply type in dates rather than using the calendar widget.

That being said, it is not quite as efficient as something like Google maps, because there is a "Generate" trip step in between user input and the trip being displayed to the user.

Also, there may be a Fitt's law issue with the embedded scrollbar, but the plan is to eliminate the web page scrollbar so there is only one scrollbar available to the user.

Errors
Sources of potential error in this interface are that the user enters the wrong address, type of location, or perhaps enters a sub-optimal sequence of trips.

The autocomplete function should help prevent incorrect addresses. In addition, the engine behind the interface should optimize for the trip even if the user enters a sub-optimal sequence. 

Finally, errors are recoverable because the user is able to *CRUD *legs of the trip easily.

...

Storyboard
This interface is where Mary would approve trips for Phyllis and her other direct reports. The tab is titled "approve trips", so she would first click on that tab which is only visible to people in the company with permission to approve trips. The scrollpanel on the left of the page (which is consistent with the Plan a Trip tab) shows a queue of all trips that her direct reports have submitted for her approval, including total dollar amount of each trip. Checking a trip will cause the "Total" box in the panel to update with the sumtotal amount she is about to approve. Mary can use the checkboxes to the left of each trip to mark them for batch approval. If she wants to dig into the details of a particular trip, she can click on the trip in the scrollpanel, which will bring up a google map in the left view with outlines for the travel path of the direct report, along with the stops and the type of each stop. The two panels are independent, and the default view on the left will be the trip at the top of the queue. Once Mary has made her choices using the checkboxes, she can press "approve", which will remove those trips from her queue.

Visibility
The visibility features of this function are similar to the "Create Trip" function. 
An attempt is made to make important information, like the requested amount for each trip and the total amount to be approved, visible to the user without requiring the user to do anything on their part.

Learnability
The learnability of this interface should be helped because the map widget is consistent with google maps. In addition, there is instant feedback to the user when they click on a trip (the map changes) and when they check a box (the total amount changes).

Efficiency
This interface balances visibility of details of each trip with the number of trips the manager can view at any given time. In other words, if the manager has many trips to view, they may not see every one of them unless they use the scrollbar. On the other hand, there is no shuffling between screens if she wants to dig into a particular trip.
In this sense, this design may be better for managers who have few direct reports and like to snoop around before approving anything.

Errors
The main error source for this interface is if the user has a lapse regarding which trips they checked off, especially after they have done a lot of scrolling. The sum total box gives some abstract feedback on this, but it may be a common problem.
The user may also potentially get into a mode error if they are confused about whether they are in the "Approve" mode or the "Create" mode because of the similar scrollpanes on the right.

Analyze Trip

Storyboard
This interface is pretty simple. Basically, Juan logs into the system, and the system recognizes he has the authority to analyze trips. Therefore, he is able to use the regular functionality of the system, and he also has a button at the top (maybe in red) that says "Export All". When Juan presses this button (which is always visible to him), the standard windows explorer dialog box pops up that allows him to save all the information in the system to an .xls or .csv (or whatever) file(s).
They then do all their analysis offline, and can flag and track followups with managers or whoever via excel. 
This simple interface is derived from our interview with an auditor who said that she did most of her analysis offline in excel.

Visibility
Visibility of this functionality is high because it will be a large button in the main navigation area that is colored red. The user spotlight is likely focused on this area a good amount, especially when starting their session.

Learnability
Learnability of this function is very high because it speaks in the user's language ("export" usually means download a file). In addition, it doesn't attempt to force the user to learn any new analysis functionality, because they are probably more comfortable and familiar with offline tools (like excel). Finally, there is instant feedback with a familiar download dialog box.

Efficiency
Efficiency of this function depends on the size of the file being downloaded. If the file is large (and we indicated that there can be as many as 10 million trips in the system) this functionality may not even work and we may have to cut the file size off. 
Also, in some sense, we are sloughing off efficiency onto the user's ability in other tools. Perhaps the user is not that skilled at excel (although that is unlikely given the user profile).

Errors
The only error that can result from this interface is the user pressing the button accidentally. However, the "save file" dialog box will allow the user to cancel their action.

Design #3

Create Trip

Explanation 

Approve Trip

...

Image Removed

...

Storyboard
In this part of the story, Phyllis needs to plan a new trip.  She first logs in so that she can see her current screen, which shows all the trips she has ever planned.  She clicks in order to create a new trip, the trip she is planning on creating.  
In order to plan her new trip, she logs in and can drag and drop new clients into a calendar with preconfigured dates.  She clicks the Auto button so that her trip is automatically planned for her.  After she adjusts her automatically planned trip, she submits the trip to Mary who is slated to approve her trip expenses.

Visibility 
Visibility of this storyboard is very high.  It uses symbolism from Google calendar, and has a lot of the same features that people are used to seeing.  Programs such as Outlook and Google calendar all work this way where you can input new events and drag the event to the length you want the event to go for.

Learnability 
This interface is very learnable, because even after using the Auto function, the interface is still very modifiable.  Also, once you click the map, you can see another representation of the information entered in by the user.

Efficiency 
The efficiency of this interface is not as efficient as it could be.  Often it could be easier to enter in events without having to drag and drop and enter in events manually.

Errors 
Errors can result if the user does not know how to enter in data.  Clients can be added and removed, so if a faulty client is entered, it can also be removed.  However, because anyone can change this interface, it is very possible that clients that don't actually exist will appear in the client list.


Approve Trip

Image Added

 

Storyboard
Mary is in charge of approving Phyllis's trip.  In order to do so, she has a visual queue where she can go from one person to the next and figure out who needs to be approved and who doesn't need to be approved.
She needs to do a quick check that the trip is valid and does not violate any company policies.  Doing a quick glance over the schedule of each person is enough to do this effectively.  Mary has a lot of other things to do, so she does not have time to closely analyze each person's trip.

Visibility 
The approval interface is very visible, because key information appears before Mary.  The important information she needs to be able to see is how much budget she has left over to use and who's trip she is approving.  By having the person's total travel dollar amount and to be able to check that value against her total available budget, visibility allows her to be able to make the accept or deny decision very quickly.

Learnability 
The interface is very visible, because the arrows clearly show that by clicking on the arrows you can click to the next person.  Arrows are symbols used in many other applications, including in web browsers, so the interface should be very easy for Mary or anyone to learn how to use.

Efficiency 
The interface is very efficient if the user's only purpose is to approve or deny people based on a queue.  The interface can become very cumbersome for an employee base that is too large.  It would be difficult to use this interface if you were trying to find someone's specific trip to approve.

Errors 
Errors can result by clicking approve or deny too quickly.  However, with an interface that clearly defines who's trip you are looking at, it would be very easy to fix.


Analyze Trip

Image Added

 

Storyboard
Juan is in charge of analytics.  The interface here allows him to visualize the data such that all financial data from the company can be analyzed.  This program will allow Juan to figure out which departments are spending the most money and look for irregularities.  This interface is closely modeled after mint.com.  Mint.com works very well as a web interface for analyzing financial data, which is what this part of the tool seeks to accomplish.
Juan is always looking to see if any particular traveler is over spending and where he is traveling to when he overspends.  During this stage, our tool will allow him to do that.  He can click on specific points on the graph in order to zoom into what piece of data he is looking to find.

Visibility 
This interface is very effective visibility wise.  Graphs can be easily configured to view data that Juan wants to see.  Juan wants to see which departments to contact that have been spending too much money on travel and the trends different departments are having with spending.  The tabs on the left allow Juan to easily customize which graphs he wants to see.

Learnability 
The interface is very easy to learn.  The graphs are clearly labeled, and the affordance of the date bar at the top of the page shows that it controls how many months of data to display on the graphs.

Efficiency 
The interface could be made to be more efficient.  Often times, people want to see the raw data and make calculations themselves.  In this interface, users are forced to create graphs and are unable to extract raw data.

Errors 
Errors can be made if the wrong tab is clicked.  What could happen is that a wrong department could be clicked on, and then the wrong graph would be displaying.  However, using this program, errors are prevented because graphs are clearly labeled and can be easily modified to a graph that the user intended on creating.

Analyze Trip

Image Removed

Explanation