Register
Submit a solution
Status: ‌Cancelled zero submissions

Challenge Overview

Welcome to the Cisco ServiceGrid NextGen Web App UI Prototype Challenge.

Cisco ServiceGrid Overview: Cisco ServiceGrid is a cloud-based integration platform that provides a scalable and fast way to connect organizations for seamless multi-party service collaboration. It automates service processes across multiple sources and enables immediate, accurate, and highly secure information exchanges. Organizations are able to share data and govern processes end-to-end across the entire multi-source environment.

About the Challenge: Apply your web development expertise to create a web-based clickable HTML prototype utilizing the provided PSD Storyboard & UI design from a previous challenge to enable an Advanced Services professional to intuitively create a Message Flow. Use any modern web technology of your choice (CSS, HTML, JavaScript base) in this 2nd of series of challenges to ultimately create a great desktop web application.

Challenge Requirements: This challenge is to create a working HTML Prototype for the Cisco ServiceGrid NextGen App based on the provided PSD Storyboard design primarily for a desktop platform. (It is not expected that users will access this admin application beyond a secure environment, and not typically on a mobile device). The clickable prototype should be accessible from traditional browsers, allowing movement among views and basic navigation, dynamically rendered on laptop & desktop screens of various sizes. (There are no device resolution constraints at this time, however extra points will be awarded for adaptive design for device screen size flexibility). Possible future challenges related to this concept include application development using APIs.



Final Submission Guidelines

Key Considerations

  1. Please validate the app user interface on traditional browsers:  IE 10.0+, and latest 2 versions of Firefox, Chrome, Safari
  2. Ensure quality and efficient HTML/CSS3 code works with all requested browsers
  3. Please ensure fonts, look and feel, hover-state for links and button states, and forms input (input field, dropdown, text area) are simple and consistent among noted browsers and closely aligned with the provided storyboard design
  4. Prototype pages are to be linked to each other and able to model each use case in the requirements (please ask if flow clarification is needed)
  5. Please employ a responsive design framework when viewed on various desktop and laptop screen sizes
  6. May use any web framework of your choice which enables responsive and fluid layout creation to best meet the requirements best (e.g.: Bootstrap, Grumby2, GroundworkCSS)
  7. Prototype pages are to be linked to each other and able to model each use case in the requirements (please ask if flow clarification is needed)
  8. Minimum height is 768px and width 1024px for all pages
  9. Please leverage all usable real estate on the screen for all views and layout, scaling page content as needed. See this site for references: http://codepen.io/benpearson/pen/fkEGc
  10. Please ensure quality and efficient HTML/CSS3 code works with all requested browsers
  11. All elements should be Pixel Precision, and please pay attention to padding, margins, line-height, etc
  12. Please match the storyboards (as close as possible) across the required browsers
  13. Ensure to document the prototype, detailing the UI code structure and provide comments across the JS code.

Detailed Requirements

1. Dashboard (screen 1 / screenshot: 01_Dashboard.png). Content to include:

  • Mid Header
    • Title should be left aligned
    • Use fluid width
    • Other icons right aligned
    • Search icon should bring up a modal search box, otherwise dead links
    • Username with arrow in right rail
  • Left Sidebar
    • Left sidebar use fixed width
    • Cisco logo should be clickable and redirect to cisco.com in a new tab/window.
    • Show active and inactive state for left navigation menus
    • Number indicator on menu items need to support max 3 characters without breaking the rounded shape, i.e. up to 99+
    • Notice indicator should have different colors for Message Flow & My Issues
    • Line item should by dynamically created out of a JSON file
    • At least the items ‘Message Flow’ and ‘Create Flow’ should be present and be clickable to another page
  • Right Sidebar
    • Right sidebar should be fixed width
    • Build as an “accordion” effect
    • Build a click event on each section row to expand/collapse
    • Re-use the same right-rail content for the Activity section for the scope of this prototype
    • Please utilize custom scrollbar design
  • Content Area
    • Please keep all data represented on the interface in a JSON file, and do not hardcode these into the HTML page
    • Dashboard content should use fluid width as browser screen
    • All boxes inside the content area need to use fluid layout as browser screen
    • Chart boxes need to adapt into the available area of the content box.
  • Line Chart Area
    • Provide dynamic chart animation upon page load
    • Suggest and employ a good visualization plugin that delivers the expected style
    • Example line chart: http://nvd3.org/examples/line.html
    • User should be able to view different charts by toggling through different tabs
    • Show animation load when user moves from one tab to another without reloading the entire page, and selectively refresh only related content areas.
  • Pie Chart Area
    • Use fixed width
    • Show dynamic chart animation upon page load
    • Match chart information in the bottom of progress bar
  • Bar Chart Area

2. Message Flow (02_My_message_flow.png)

  • Navigate here by clicking on Message Flow menu item
  • Include “+ Create Flow” button in header
  • Use fluid width on Message Flow table
  • Match content for each row, and maintain this data outside the HTML in JSON
  • Each Message Flow Name text link AND Edit button should take the user to the Message Flow Designer
  • Show animation progress for each Message Flow row, when page first loads

3. Message Flow Editor (03_01_message_flow_designer.png)

  • Please simulate how Message Flow works on some elements
  • Simulate the Message Flow available on the storyboard for this prototype; create one or two variants of this by removing some elements from this diagram to represent different Message flows.
  • Message Flow Designer page content divided by:
    • Header
      1. This area can use fluid width
      2. Header area contains of toolbar and Message Flow
      3. On toolbar, match each menu item look
      4. All menu items should be clickable
      5. Please show active and inactive state on these menu items
      6. Quit menu action on the far right side
      7. Message Flow title below toolbar
      8. Open Issues and Closed Issues should show number indicators
      9. Save button placed on the far right side
    • Left Sidebar
      1. This area should use fixed width
      2. Each menu item to show a flyout submenu with available actions; please model from the storyboard for these
      3. For example, clicking the Container menu should show the Container shape options (screenshot: 03_2_message_flow_designer.png)
    • Content Area
      1. This area should have dynamic width to utilize screen space
      2. If a workflow is exceeding the current available screen space, scrollbars should be visible and a panning functionality must be offered for easy of navigation
      3. Zoom In and Out should be placed in the bottom right

References

  • Before beginning to develop the Message Flow Editor component, we encourage you to use the Open Source Javascript Diagram/Flowcharting Library
  • To build the Editor, you can "Create your Own Code", "Open Source Javscript Library" or "CSS3 SVG solution".
  • You can use one of these suggested libraries (or use your own choice which meets the requirements):

Message Flow Editor Use Case

  • Start from a user click on the “Containers” menu, then a flyout submenu is presented (screenshot: 03_2_message_flow_designer.png)
  • User should be able to drag a new shape into the existing flow (screenshot: 03_3_message_flow_designer.png)
  • Update cursor icon into “move” shape
  • Selected Shape being dragged with a transparent style (screenshot: 03_4_message_flow_designer.png)
  • Drop the shape to a desired area (screenshot: 03_5_message_flow_designer.png)
  • User should have ability to rotate the shape when cursor hovers on top of shape, displayed with a rotation guide (screenshot: 03_6_message_flow_designer.png)
  • User should be able to resize the shape when the cursor hovers at each shape corner, displayed with stretch/collapse guides (screenshot: 03_7_message_flow_designer.png)
  • User should be able to move the shape when cursor is inside the shape and clicked/dragged (screenshot: 03_8_message_flow_designer.png)
  • Match effects to the storyboard, including how the current icon state changes when hovering on the shapes and outside the shapes
  • Hover on the shape line to present a connect action (screenshot: 03_9_message_flow_designer.png)
  • Simulate click and drag, let user draw a line between 2 shapes (screenshot: 03_10_message_flow_designer.png)
  • Release mouse to attach line to a target shape (screenshot: 03_11_message_flow_designer.png)
  • Hover on the “T” within a shape to allow user to add a label (screenshot: 03_12_message_flow_designer.png)
  • Enter a label (screenshot: 03_13_message_flow_designer.png)
  • Selection of <<Enter>> key or clicking outside the shape should save the label (screenshot: 03_14_message_flow_designer.png)
  • Click Add Component (screenshot: 03_15_message_flow_designer.png)
  • User should see a floating input box; User should see an autocomplete function as they type (screenshot: 03_16_message_flow_designer.png)
  • Clicking on the “EndPoint” menu item should show another flyout submenu (screenshot: 03_17_message_flow_designer.png)
  • Clicking on the arrow on menu should show the same submenu hierarchically (screenshot: 03_18_message_flow_designer.png)
  • Right click on a shape in the Message Flow, and user should be presented with available options (screenshot: 03_19_message_flow_designer.png)
  • Right click on a line in the Message Flow should show options specific to the Line object (screenshot: 03_20_message_flow_designer.png)

5. Configurations (screenshot: 04_component_configuration.png)

  • Clicking on the “ACMESolution” shape in the Message Flow should show this modal window
  • Simulate the Tab representation in the modal form
  • Clicking on “x” button / Cancel should close the modal
  • “?” can be dead link for this prototype
  • Match modal form visual to the storyboard provided
  • Implement the toggle button effect for the https field

6. Custom Mapper  (screenshot: 05_1_custom_mapper.png)

  • Clicking on the “Custom Mapper” shape in the Message Flow should show this modal Window
  • Clicking on “x” button / Cancel should close the modal
  • “?” can be dead link for this prototype
  • Modal content is organized in 2 columns
  • Each Column to be identified by a label and a dropdown containing a list of objects
  • User should have the ability to hover on a data row in these columns, which should highlight the row and present a drag cursor icon
  • Upon click of a highlighted datarow, a line connection should be presented (screenshot: 05_2_custom_mapper.png)
  • On dragging the cursor over a target datarow on the right column, and releasing the mouse, the line connection should snap to the target data row, simulating a mapping action (screenshot: 05_3_custom_mapper.png)
  • On completing a map action, the line connection should be represented as grey (screenshot: 05_4_custom_mapper.png)
  • When user hovers on a mapped row, it should highlight the line and the connected target row (screenshot: 05_5_custom_mapper.png)
  • User should have the ability to change the mapping line connection to another row item (screenshot: 05_6_custom_mapper.png & screenshot: 05_7_custom_mapper.png)

CODE GUIDELINES: HTML5, CSS3, & Javascript

  • Provide comments for a clear explanation of the code usage
  • Please use clean INDENTATION
  • Ensure no conflicts nor errors in naming
  • If HTML, please use HTML to make the HTML code clean; If CSS3, Please use CSS3 styling wherever possible
  • If Javascript, please provide any Open Source Javascript you think will help show the functionality and design of the application and please separate data elements on the individual pages into respective JSON files, and do not hardcode them into the script / HTML pages. You may use a standard set of values to simulate the use case requirements. You are NOT REQUIRED to build the ability to save/manage the different state of the data across the prototype.
  • Provide source code

IMAGES

  • Images should be properly compressed while still having good visual quality
  • Please use best practices for background based image
  • Please use sprites when using icons for your submission

BROWSER REQUIREMENTS: Latest version of Firefox, Safari, & Chrome, as well as IE 10+

ELIGIBLE EVENTS:

2015 topcoder Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30048343