Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

...

 

Storyboard

Visibility

Learnability

Efficiency

Errors 

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 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

 

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.


...