TrackIt - Designs

Scenario

Clive, our travelling salesman, steps off the plane and into the frigid air of the jetway in Toronto; yet another trip away from headquarters. Having not eaten for the last several hours his first stop is the Tim Horton’s for a sandwich and a coffee. After getting his order and sitting down at the table he pulled out the receipt, laid it flat on the table and took a picture using his expense management tool, TrackIt.  He was prompted to enter one more expense categories and then store the receipt with the proper amounts under each category and given opportunity to adjust the date/time, he didn’t always get around to entering receipts immediately.  Overall, it was an easy process that he’d be repeating a countless number of times thru the trip.

The trip was nothing out of the ordinary, but Clive got a call from his boss, Margaret, asking him what he expected his expenses to be and seeing if they could be curtailed a bit. Clive opened TrackIt and was able to see how what he’d spent so far fell across the various categories and read these off to his manager. Margaret was relieved.

Designs

Design 1

Designs1_Aggregated.pdf

Entering a Receipt

Classifying A Receipt

Viewing Spending Categories

Learnability

Actions are clearly visible and derive from known smartphone menus.  The design is also very intuitive.

Visibility

This design is very visible.  Most menus have only a few buttons, and they are located in the center of the screen. The affordances of some of the actions are not very clear, as it is not clear which options are editable, and which type of input is required for each field. 

Efficacy

The design is very efficient, using the minimal amount of menus and screens to input a receipt. Also, when presenting expenses across different categories, the interface shows the user all the relevant information in one graph, saving him a step of typing a specific query.

Error Prevention

This design allows easy error prevention using the "retake" button. With just one click, the user can recover from an error. Also, re-editing a receipt after it was inputted is pretty easy and straight-forward.

Design 2 

Design2_Aggregated.pdf

Learnability

Most of the options of this design are derived from existing designs of many common smartphone menus. Taking a picture of a receipt and browsing through old receipts is similar to the iPhone's camera interface, and entering and editing receipt and report details are similar to its settings menu. This aspect of the design makes it very learnable for smartphone users. The other elements that do not have a parallel in common menus or applications are sufficiently documented, with the buttons stating exactly which action should be taken. One aspect in which the user will have trouble learning the interface is navigating between the different screens. It is not always clear which button will lead to which screen and which receipt/report the user is currently looking at.

Visibility

The visibility of this interface is not very high. In most menus, most of the screen is dedicated to showing the relevant information, and the important controls are small and in the bottom of the screen. The "back" button, when it is visible, is very small and appears in the top left corner of the screen. Most actions have appropriate affordances, but some do not. For example, the list in 1.2.2 appears like it is editable by clicking on it, when in fact you can only edit it by adding items through the menu on the top.

Efficacy

In this design, the top storyline contains all the common actions, and the bottom ones show special options. Most of the actions can be done very efficiently using this design -  a receipt can be captured and categorized in just two steps. However, submitting the report is not very efficient, since the user is prompted to approve the submission.

Error Prevention

This design does not prevent the user from making most errors. The different fields in the receipt categories do limit the types of input a user can insert, but common mistakes will probably include mis-categorizing a receipt, entering the wrong amount, or attaching the wrong picture to the receipt. Mis-categorizing a receipt or entering the wrong amount can be fixed by looking up the receipt item under the report and editing it, but attaching the wrong picture would force the user to delete the receipt entirely and create a new one. 

Design 3

Design3_Aggregated.pdf

Learnability

Since this design takes most of the input from the receipt, it minimizes the input it requires from the user and thereby makes learning how to use it fairly easy. The different menus derive from similar known menus, and therefore most smartphone users will find it very easy to use the interface.

Visibility

This design has pretty good visibility.  It minimizes the number of editable options and buttons the user will need, and the buttons that are included in the design are large and in the center of the screen. The different actions have appropriate affordances, and it is easy to find the relevant controls in every screen.

Efficacy

While this design increases user efficacy by automatically detecting most receipt details on its own, some other elements of the design do compromise efficacy. The scan screen is shown with only one option, forcing the user to make an unnecessary selection.

Error Prevention

Error prevention is the biggest weakness of this design. Since it is highly automated, if the user encounters errors in entering a receipt, or even if the system analyses the receipt wrongly, it would be very hard to recover from the error. The user have no easy way to override the fields.