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 the first challenge in this series. 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. You can also view UI clarifications from the forums of this previous challenge.
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). The next challenge in this series will be to address the Message Flow Designer, and possible future challenges may include application development using APIs.
Final Submission Guidelines
File Downloads: Storyboard.zip - Storyboard Design
Key Considerations
- Please ensure quality and efficient code works with these browsers: IE 10.0+, and latest 2 versions of Firefox, Chrome, Safari
- 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 across browsers and closely aligned with the provided storyboard design
- Prototype pages are to be linked to each other and to model each use case in the requirements (please ask if flow clarification is needed)
- Ensure to document the prototype, detailing the UI code structure and provide comments across the JS code
- Employ a responsive design framework when viewed on various desktop and laptop screen sizes
- 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
- All elements should be Pixel Precision, and please pay attention Minimum height is 768px and width 1024px for all pages
- to padding, margins, line-height, etc
- 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)
1. Dashboard (screen 1 / screenshot: 01_Dashboard.png). Content to include:
- Mid Header
- Header title should be left aligned, can 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
- 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 should support up to 3 chars without breaking the rounded shape, 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 items ‘Message Flow’ and ‘Create Flow’ should be present (although not clickable to another page)
- Right Sidebar
- Right sidebar should be fixed width; please build with an “accordion” effect and allow click on section/row area to expand/collapse or toggle the accordion
- Re-use the same right-rail content for the Activity section for the scope of this prototype
- Please utilize a 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 and dynamically re-size
- Line Chart Area
- Provide dynamic chart animation upon page load;
- Suggest / employ a good visualization plugin to deliver the expected style, ie 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
- Pie Chart Area
- Use fixed width and show dynamic chart animation upon page load while matching chart information in the bottom of progress bar
- Bar Chart Area
- Please use fluid width and show dynamic chart animation upon page load
- Suggest and employ a good visualization plugin that can build the expected style, ie http://nvd3.org/examples/discreteBar.html
2. Message Flow (02_My_message_flow.png)
- Navigate here by clicking on Message Flow menu item, and include “+ Create Flow” button in header
- Use fluid width on Message Flow table and 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 Editor
- Show animation progress for each Message Flow row, when page first loads
3. Message Flow Editor (03_01_message_flow_designer.png)
Please create only the header bar and left sidebar (future challenge to cover simulation of how Message Flow works). Area where Editor placed is out of scope for this challenge – you can leave a place-holder image for that area in your submission. Content:
- Header
- Use fluid width; include toolbar and Message Flow (please match each menu item look and feel)
- All menu items should be clickable
- Please show active and inactive state on these menu items; and reflect hover state for menu and buttons
- Quit menu action on the far right side and save button placed on the far right side
- Open Issues and Closed Issues should show number indicators
- Left Sidebar
- Use fixed width
- “Containers” menu item to show a flyout submenu with available actions; please model and match shapes from the storyboard, ie clicking the Container menu should show the Container shape options (screenshot: 03_2_message_flow_designer.png)
- Upon hover above “Containers” menu, please show additional content; upon hover at each shape, please show hover state for the background color
- “EndPoints” menu should use expandable/ collapsable function
- Please ensure cursor changes into “move” shape as appropriate
- Content Area
- This area should have dynamic width to utilize screen space, and be fluid when re-sized in any browser
- 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
- Zoom In and Out should be placed in the bottom right
- The “Message Flow” editor part can be a place-holder image for this challenge
CODE GUIDELINES: HTML5, CSS3, & Javascript
- Provide comments on code and page elements for a clear explanation of the code usage
- Please use clean indentation and ensure no conflicts nor errors in naming
- If HTML, please use HAML 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 files
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: IE 10+ latest version of Firefox, Safari, & Chrome