Update instructions with new UI (#65)

* add new ui img to readme

* update ui image

* switch to html img for sizing

* clean up readme usage language

* update ui img

* rm old ui img

* readd ui img

README.md

@@ -1,9 +1,8 @@
 [![Chrome Web Store](https://img.shields.io/badge/chrome--web--store-v%200.0.4.1-blue.svg)](https://chrome.google.com/webstore/detail/nominationtool/abjpihafglmijnkkoppbookfkkanklok)
 # 2016 Presidental Harvest - Nomination Tool
 
-(Developers please see [Contributing and Forking This Tool](./Contributing.md))
-
-(for instructions skip straight to [Usage Instructions](#Usage))
+Developers please see [Contributing and Forking This Tool](./Contributing.md)  
+For usage skip straight to [Usage Instructions](#usage)
 
 ## What is this?
 
@@ -27,21 +26,22 @@ We have published a version of the chrome Extension [on the Chrome Store](https:
 
 ## Usage
 
-5. Go to the URL that you wish to nominate
+1. Go to the URL that you wish to nominate.
+
+1. Click the extension icon near the address bar (the icon looks like a black magnifying glass). A form will pop up beneath the icon. The title and URL will be autofilled with the current URL of the tab, and once you have submitted the form one time, your name/email/event information will also be pre-filled.
 
-6. Click the extension icon near the address bar (the icon looks like a black magnifying glass). A form will pop up beneath the icon. The title and URL will be autofilled with the current URL of the tab, and once you have submitted the form one time, your name/email/event information will also be pre-filled. 
+1. If you're working with an EDGI subprimer ([found here](https://envirodatagov.org/agency-forecasts/)), you should fill-in the corresponding Agency Office Code that relates to particular subprimers. Filling in the code will autocomplete the agency in the dropdown above.
 
-7. If you're working with an EDGI subprimer ([found here](https://envirodatagov.org/agency-forecasts/)), you should fill-in the corresponding Agency Office Code that relates to particular subprimers. Filling in the code will autocomplete the agency in the dropdown above.
+1. Fill in the subprimer field with the corresponding numbered link in the subprimer you're working with. 
 
-8. The Sub-primer Num should be filled in correspondingly to the particular numbered link in the subprimer you're working with. If the page contains uncrawlable content, note that by selecting one or a combination of the four checkboxes. On subsequent uses, these will also be pre-filled, though you can alter them at any time just by choosing something else.
-![Here](docs/img/newExtensionUI_2.png)
+1. If the page contains uncrawlable content, note that by selecting one or a combination of the four toggles. On subsequent uses, these will be pre-filled, though you can alter them at any time just by choosing something else.
 
-The four checkboxes to note uncrawlable content are as follows, with an example of each linked: 
-  1) [FTP](ftp://ftp.aoml.noaa.gov/phod/pub/ARGO_FTP/argo)
-  2) [Many Files](https://www.nohrsc.noaa.gov/gisdatasets/)
-  3) [Database](https://www1.eere.energy.gov/library/default.aspx)
-  4) [Visualization/Interactive](https://www.nohrsc.noaa.gov/interactive/html/map.html)
+  <img src="./docs/img/eot-nomination-ui-006.png" width="500" />
 
-7. Move on to the next URL and hit the extension again
+  Examples of each of the four toggles to indicate uncrawlable content are:  
+    1) **FTP** [ftp.aoml.noaa.gov/phod/pub/ARGO_FTP/argo](ftp://ftp.aoml.noaa.gov/phod/pub/ARGO_FTP/argo)  
+    2) **Many Files** [nohrsc.noaa.gov/gisdatasets/](https://www.nohrsc.noaa.gov/gisdatasets/)  
+    3) **Database** [eere.energy.gov/library](https://www1.eere.energy.gov/library/default.aspx)  
+    4) **Visualization/Interactive** [nohrsc.noaa.gov/interactive/html/map.html](https://www.nohrsc.noaa.gov/interactive/html/map.html)  
 
-Happy Archiving!!!
+After submitting, move on to the next URL and click the extension icon again. Happy Archiving!!!