Adding map and chart views to existing web UI

Background ---------- Our company has developed a mobile device communication and tracking platform, which consists of mobile client devices and server software. The server has a web-based user interface (UI) that displays various information about the client devices, such as device information, message traffic, alarms, events, service information etc. We now want to improve the server UI further by 1) adding a map view page that displays device geographical locations 2) adding a dashboard page that displays a overall system status to the user 3) adding few other charts to existing pages to visualize various aspects of the system and improve system look and feel Task description ---------------- The service provider (or employee) will design prototype HTML pages of the new UI features based on brief text specifications and screenshots from similar applications. The design must be based on HTML (not just Photoshopped images), and must use real Web components as much as possible. The key in this project is to pick the correct web components and place them nicely into the existing pages, so that this prototype can be used well during the actual implementation phase. We will give the service provider a link to our existing server portal, which the service provider can use as a basis for required improvements. Web page improvements constist mostly of adding charts to existing web pages. Some of the chart components that we know of are: Google Charts and Amcharts. We also have our own Flash chart component. Other chart technologies can be used as well, as long as they are economical (i.e. not too expensive licences) to use. Design considerations: 1) Usability is high priority. 2) Graphics design is not very important, but look&feel should be similar to existing pages. But colors, icons etc. can be improved later on. 2) Chart test data is not important Design drafts are revised based on our feedback until sufficient solution is found. Preliminary specification ------------------------- Preliminary specification of the new features to be prototyped is described briefly. *** Feature 1): Map view *** Map displays device geographical locations. It consists of the following parts. "Filter settings" are displayed on top of the view (similar to "TWD.png"). Filter items are: * "#search term" //search by client name, serial#, telnum, .. * "#client type" //search by device type "Actions" menu (similar to "TWD.png") contains the following options: * CHECKBOX: "show device names" * CHECKBOX: "show tail" //"tail" visualises device direction and speed * export as KML "Side menu" contains a list of filtered results. Shown device information is: * state icon * name Map component contains world map and device icons. User can click on a device icon on map, which will show a pop-up window that displays the following device properties: * name * image * state icon * state description string * position (latitude, longiture, altitude) * speed * max. recorded speed * direction * date when last position info was received * <Custom device properties> * LINK: "Device details": link that jumps to device's page * LINK: "Show device's track". //FUTURE Selected map component must support KML. *** Feature 2): Dashboard *** Dashboard provides Quick overview to system state. Users can customise the contents of the dashboard by selecting the desired portlet-like components. Dashboard settings are stored separately for each user. Available components to be prototyped are: * XY CHART: Total amount of data received from devices / time period * PIE CHART: Current service states (OK/WARN/ERROR) * TABLE: Connected devices (name&link, connection time, data received, data sent) * BAR CHART: top X recently communicating devices Components should use AJAX so that the components can be triggered to refresh without page reloading. We are looking for a design for "dashboard configuration page" and "normal dashboard page". *** Feature 3): Other GUI updates *** The existing server pages need the following new modifications. See "TWD.png" for alarm page sample view. Below are descriptions of the modifications needed. Notes: * Term "filter selection" refers to filter component shown on top of the page (see "TWD.png" for example), which defines the data set and time period used for particular chart. * Term "time period" refers to user-configurable time period, which can be should be set using either quick selection ("today", "yesterday", "last 7 days", "last 14 days", "last 30 days", "last 365 days", "since the beginning") or using startdate & enddate. Time period selection should not take much space. For example, it could be a popup menu that is opened by clicking a small icon. * Term "XY chart" refers to "standard chart" that displays various information on vertical axis, and uses horizontal axis to display time. Device page -> Details General tab * IMAGE: Device image * TEXT: Cumulative amount of data received / bearer + link to Metrics tab * TEXT: Cumulative amount of data sent / bearer + link to Metrics tab Metrics tab: On top the tab there is a combobox that allows to select the chart that is displayed. The following charts can be selected: * XY CHART: Amount of data received from device / time period * PIE CHART: Distribution of message traffic per data content type / time period Messages page * PIE CHART: Distribution of message traffic per bearer (SMS/email/MOM1.2) / filter selection * PIE CHART: Distribution of message traffic per content type / filter selection * XY CHART: Amount of data received from devices / filter selection * XY CHART: Amount of data sent to devices / filter selection Alarms page * XY CHART: Number of Alarms / filter selection * PIE CHART: Alarm types (IDs) / filter selection * PIE CHART: Alarm level / filter selection Alarms page -> Details * XY CHART: Alarm occurrence / time period Events page * XY CHART: Number of events / filter selection * PIE CHART: Event types (IDs) / filter selection Events page -> Details * XY CHART: Event occurrence / time period Services page * PIE CHART: Current service states (OK/WARN/ERROR) * XY CHART: All service states (OK/WARN/ERROR) / time period Services page -> Details * XY CHART:Service state (OK/WARN/ERROR) / time period Jobs page * PIE CHART: Current jobs states Users page * XY CHART: Page loads / time period * XY CHART: Logins / time period Users page -> Details * XY CHART: User Page loads / time period * XY CHART: User Logins / time period Browser support --------------- The prototype should use components that work with IE7 (and above), and Firefox 3.5 (and above). Server environment ------------------ Server is implemented using JBoss 4.2.2GA, utilising JSF1.2. We use Windows XP x86 platform. Project management tools ------------------------ We use [login to view URL] workspace for this project. Other relevant tools are: Skype, Subversion, [login to view URL], Google docs Bidding ------- We are looking for the following information from service providers: 1) Please describe your experience on UI design, prototyping and using web map and chart components. A CV is also a plus. 2) hourly-based cost for this type of work 3) project-based lump sum cost 4) In the near future, we will implement the features designed during this project. If you are also able to implement the project using J2EE, JSF, Seam & RichFaces, let us know. Payment ------- We can pay in milestones (one for each feature 1-3) or hourly-based. This will be agreed later. Thank you for your attention! If you have any additional questions, let us know.