OVERVIEW
Epson is one of the world's largest manufacturers of computer printers, and information and imaging related equipment. I was tasked by Iteration Group, a UX design, development, and product strategy firm to work with Epson as a UX Designer on a scan management and receipt management alpha software which had originally been designed by Epson Japan. The Epson Japan team would take my final wireframes and prototype, the Epson America team would take their own prototype, and the two teams would test and decide what features to be designed into their final prototype.
OBJECTIVES
-
Take Epson Japan's alpha software, create a duplicate version in Sketch, and create the prototype in InVision.
-
Create two iterations of the alpha software to implement UX guidelines and user research insights as well as redesigning according to Windows UI guidelines.
MY ROLE
UX Design, Wireframing, Prototyping
TOOLS
User research insights compiled by Epson Japan, Sketch, InVision
PLATFORM
Software application
DURATION
October - November 2017
GOALS
1. Create a software application that works efficiently.
2. Includes all functions that the user may need to apply.
3. Make managing scans easy to do.
RESEARCH
USABILITY TESTING
This project started with analyzing the video recordings and notes from the usability testing conducted by Epson Japan. They gave the users a set of tasks to complete, which were based on goals for a target user. The users were not to speak about their decisions aloud, but to be silent and move through the motions as they would if they were using the software in a real life setting. They would be asked questions after they had completed the given task.
Usability Test Tasks:
-
Scan and save to folder in PC
-
Scan receipt
-
Scan and send using e-mail
# of testers?
DESIGN
ITERATIONS
Below, I've annotated the usability testing insights that have been collected and changes that I made from my own heuristic evaluations. Prototype 1.0 is the duplicate of Epson Japan's design that I converted into Sketch. Prototype 2.0 is my first iteration and Prototype 3.0 is my final iteration.
Start Menu
Prototype 1.0
User does not know how to load scanner.
User has settings that they would like to quickly adjust before scanning.
Users said it seems like an extra screen.
Prototype 2.0
Added options the user can adjust when starting a scan.
Added instructions on how to load the scanner.
Accessing Receipt Manager
Prototype 1.0
Receipt management and scan management are separate applications. User may want to access receipt manager from scan manager.
Prototype 2.0
Receipt Manager is accessed as a export option from Save and Send button.
Receipt Manager is too hidden.
Prototype 3.0
Removed start menu. Cassowary application opens up showing Scan Manager tab selected and Receipt Manager tab hidden.
Added instructions in both Scan Manager and Receipt Manager tells the user how to start scanning.
Taskbar shortcuts and System tray shortcuts
Prototype 1.0 didn't include taskbar shortcuts and system tray shortcuts.
Prototype 2.0 and Prototype 3.0
Added taskbar shortcuts and system tray shortcuts to include task flows starting from these shortcuts.
Scan Manager - Exporting
Prototype 1.0
Users are used to seeing export buttons at top left of windows.
Select Destination is not common terminology.
Arrange Action button functionality is not understood by users.
Multiple windows opened.
Prototype 2.0
Changed the Select destination button to Save and Send and eliminated the checkbox to mark "After scan is complete, move to 'Select destination' screen directly".
Reorganized the buttons by their category and eliminated the option to remove icons. The user is able to access their frequently used locations and doesn't have the need to remove those less used from their view. This window format also follows Windows 10 guidelines.
Prototype 3.0
Eliminated the Save and Send button and window because having obvious buttons that divide up the different types of export options (save, export, email, print) is more clear.
Scan Manager - Settings
Prototype 1.0
Multiple tabs for settings confuses the users. They're unsure which tab to open for what they are trying to do.
Prototype 2.0
Consolidated settings into two tabs: Scanner Settings, File Settings. This way, the user only has to two options to choose from.
Scan Manager - Sorting
Prototype 2.0
Added a Sort By dropdown because users were scanning their documents in backwards order and needed a way to rearrange them in the proper format.
Scan Manager - Selecting scans
1.0 Click to select one at a time. The user can also apply common hotkeys such as Ctrl-A or Shift Select to select more than one scan.
2.0 I implemented a Select All / Select Individual toggle that activates checkboxes when Select Individual is chosen. This allows the user to select scans that may not be consecutive.
Receipt Manager - Editing data
1.0 To edit the data, the user selects the row and clicks on the Edit/ Check button.
2.0 Instead of having the user go to a different screen to edit the data, I'm allowing the user to edit within the cells. They still have the option to use the Verify data button to see all of the data points and edit in that format.
Receipt Manager - Exporting to QuickBooks, saving to .csv file, and saving receipt image
1.0 To export, the user selects one receipt, then clicks the Send to accounting service button to export to Quickbooks or the Save data button to save as a .csv file.
2.0 Users were confused about what Send to accounting service meant and what that would look like after they had clicked it. I combined the options to export to QuickBooks or to export as a .csv file under a Export button with dropdown selections. I also added the option to save the receipt image.
Receipt Manager - Spreadsheet/ thumbnail view
1.0 There is only spreadsheet view. The user cannot see the receipt images unless they click on it.
2.0 I added thumbnail view and a spreadsheet/ thumbnail toggle to access the two views. With the thumbnail view, the user can easily scan through the images searching for the receipt that they're looking for instead of having to use the search bar or filter.
Receipt Manager - Edit columns
2.0 Instead of showing all of the data points in the spreadsheet view, the user can choose which columns to show.
ITERATIONS
Below, I've annotated the usability testing insights that have been collected and changes that I made from my own heuristic evaluations. Prototype 1.0 is the duplicate of Epson Japan's design that I converted into Sketch. Prototype 2.0 is my first iteration and Prototype 3.0 is my final iteration.
Start Menu
Prototype 1.0
User does not know how to load scanner.
User has settings that they would like to quickly adjust before scanning.
Users said it seems like an extra screen.
Prototype 2.0
Added options the user can adjust when starting a scan.
Added instructions on how to load the scanner.
Accessing Receipt Manager
Prototype 1.0
Receipt management and scan management are separate applications. User may want to access receipt manager from scan manager.
Prototype 2.0
Receipt Manager is accessed as a export option from Save and Send button.
Receipt Manager is too hidden.
Prototype 3.0
Removed start menu. Cassowary application opens up showing Scan Manager tab selected and Receipt Manager tab hidden.
Added instructions in both Scan Manager and Receipt Manager tells the user how to start scanning.
Taskbar shortcuts and System tray shortcuts
Prototype 1.0 didn't include taskbar shortcuts and system tray shortcuts.
Prototype 2.0 and Prototype 3.0
Added taskbar shortcuts and system tray shortcuts to include task flows starting from these shortcuts.
Scan Manager - Exporting
Prototype 1.0
Users are used to seeing export buttons at top left of windows.
Select Destination is not common terminology.
Arrange Action button functionality is not understood by users.
Multiple windows opened.
Prototype 2.0
Changed the Select destination button to Save and Send and eliminated the checkbox to mark "After scan is complete, move to 'Select destination' screen directly".
Reorganized the buttons by their category and eliminated the option to remove icons. The user is able to access their frequently used locations and doesn't have the need to remove those less used from their view. This window format also follows Windows 10 guidelines.
Prototype 3.0
Eliminated the Save and Send button and window because having obvious buttons that divide up the different types of export options (save, export, email, print) is more clear.
Scan Manager - Settings
Prototype 1.0
Multiple tabs for settings confuses the users. They're unsure which tab to open for what they are trying to do.
Prototype 2.0
Consolidated settings into two tabs: Scanner Settings, File Settings. This way, the user only has to two options to choose from.
Scan Manager - Sorting
Prototype 2.0
Added a Sort By dropdown because users were scanning their documents in backwards order and needed a way to rearrange them in the proper format.
Scan Manager - Selecting scans
1.0 Click to select one at a time. The user can also apply common hotkeys such as Ctrl-A or Shift Select to select more than one scan.
2.0 I implemented a Select All / Select Individual toggle that activates checkboxes when Select Individual is chosen. This allows the user to select scans that may not be consecutive.
Receipt Manager - Editing data
1.0 To edit the data, the user selects the row and clicks on the Edit/ Check button.
2.0 Instead of having the user go to a different screen to edit the data, I'm allowing the user to edit within the cells. They still have the option to use the Verify data button to see all of the data points and edit in that format.
Receipt Manager - Exporting to QuickBooks, saving to .csv file, and saving receipt image
1.0 To export, the user selects one receipt, then clicks the Send to accounting service button to export to Quickbooks or the Save data button to save as a .csv file.
2.0 Users were confused about what Send to accounting service meant and what that would look like after they had clicked it. I combined the options to export to QuickBooks or to export as a .csv file under a Export button with dropdown selections. I also added the option to save the receipt image.
Receipt Manager - Spreadsheet/ thumbnail view
1.0 There is only spreadsheet view. The user cannot see the receipt images unless they click on it.
2.0 I added thumbnail view and a spreadsheet/ thumbnail toggle to access the two views. With the thumbnail view, the user can easily scan through the images searching for the receipt that they're looking for instead of having to use the search bar or filter.
Receipt Manager - Edit columns
2.0 Instead of showing all of the data points in the spreadsheet view, the user can choose which columns to show.