1. Requirements Information and data which need to be displayed or accessible to the user Sitemapping (Site Map) Flow Chart models of site structure displaying usable and accessible information/data/actions XHTML/CSS prototype model Testing code, images, and checking usability issues Site Structure Front-End Production Graphics/Visual “themes” Creating templates and visual models for graphics/images Style Guide Outline of XHTML/CSS details, plus specs/samples of images and other media Final Images Final images (…and other media files) Final Coding Final XHTML/CSS (…and other coding) Overview of the User Interface design and front-end development workflow. Back-End Integration Final database integration (and any programming required) Wireframing (Mockups) Layout and Navigation models showing interaction of page components across and within multiple views, including usability considerations (UX) “Information Architecture” (focus on content) “Interaction Design” (focus on tasks) (…existing website?) Visual Design User Interface Front-End Design/Development Workflow

2. Reports LeftNav Menu Dashboard Log Out (default opening screen) Login Gateways (list) Show Gateway Details Show Gateway Logs Show Gateway Routes Show Gateway Neighbors Edit Gateway Details Delete Gateway Connect Disconnect Collect Gateway Data Set Data Collection Schedule Delete Data Collection Show Network Tree Add to Group Gateways Gateway Groups Nodes Node Groups Report Schedules Gateway Groups (list) Show Gateway List Edit Gateway Group Delete Gateway Group Nodes (list) Node Groups (list) Show Node Details Show Node Logs Show Node Routes Show Node Neighbors Show Node Data Points Show Node Status Points Set Channel Configuration Get Channel Configuration Get Current Meter Reading Get Node Information Get Communication Status Add to Group Generate Report Show Node List Edit Node Group Delete Node Group Generate Report Report Schedules (list) View/Edit Schedule Delete Schedule Generate Report: PDF, HTML, CSV NM details Dashboard NM Info Search box Taskbar: # Items Selected, Messages, Notifications Report Dialog box Show Report Tree Billing Read Data Completeness Interval Data Summary Node Outage Node Status System Health Node Group Data Completeness Node Data Completeness Meter Errors Node Resets Time Syncs User Interface Flow Chart Sample Interface top-level flow chart to an online application (“site mapping”)

3. Primary Content fixed width (retractable) “fluid” Generic User Interface mockup (“wire framing”) Primary Navigation (“Left Nav” plus pull-out Menus) Tab Supplemental Navigation (“Top Nav” Tabs) User Name | Logout Secondary Navigation ( adjustable/editable Column Headers) logo Search Bar