Challenge Overview

Welcome to the Cisco - APIC EM - Prototype UI Challenge.

In this challenge we will be asking you to help us prototype an application that allows different types of users to interact with network related data to make key decisions depending on their role.

We will be providing you with a design direction document and sample data for you to show us the visualization for this data as a topology and drill down to detail information based on an end user role as it has been designed. The data will consist of sets of routers and switches, links and applications as well as some attributes and metrics around this data. The goal of this challenge would be to come up with the best way to simulate this web application displaying this information, graphics and personalized layouts for each of our target end users. We have designed dashboard and detail views for the following user personas: Line of Business (LOB) Owner, IT Operations Personnel and Application Owner.  You'll be using the design artifacts from the previous Challenge that we need you to produce a usable and easy to understand prototype for user testing and illustrating the interaction model.



Final Submission Guidelines

IMPORTANT!
- All pages of Cisco - APIC EM - UI Prototype must support responsive design solution.
- As possible we need all pages on this prototype linked each other.  Let us know if you need clarification about the flow.
- All forms input on every page MUST follow storyboard design look consistent across required browsers.
- Match All Fonts like on storyboard.
- For this Desktop Version, suggest how hover state look for every buttons and links. Make sure the style not far off from our current theme. Remember, hover state need disable in Mobile version. We need solution that can easy to updated in the future.

File Downloadables
Storyboard.zip - Cisco - APIC EM Storyboard Design

PAGE REQUIREMENTS:
1. Welcome Page
screenshot: 1-1_Welcome.png
- This is the default landing page for a first time user of the application.
- On this page, we will have an overview of how the application works.
- We need the ability for users to self select what type of user they are and how they would like to view the data.
- Cisco Logo and left sidebar can use fixed width
- Cisco Logo will take to Welcome Page
- Header bar need to be fluid as browser screen
- APIC EM title placed in the left side
- Search button can be dead link
- User Icon need wrapped with rounded css properties.
- Welcome Guest can be dead link
- Left sidebar menu need use fluid height as browser height
- Left sidebar background using black color for this page, make sure you optimize the Cisco and Main Navigation icons usage for different background. Do not create redundant icons with different background color.
- Match content and text style for Welcome page
- Play button above the video thumbnails need load the video, you can put dummy youtube link to simulate the play button
- View All can be dead link
- 3 columns layout need adapted browser screen fluidly
- All rounded corner need rendered from css properties
- Click Login button on each boxes need show different modal window style that reflected box colors (screenshot: 01-2_Welcome.png), read details below:

Login button on Line of Business box
- Title: Welcome Line of Business Owner
- Header background: Blue color
- Login button: Blue color
- Click Login button will take to Line of Business Owner Dashboard

Login button on IT Operations box
- Title: Welcome IT Operations Personnel
- Header background: Green color
- Login button: Green color
- Click Login button will take to IT Operations Dashboard

Login button on Application Owner box
- Title: Welcome  Application Owner
- Header background: Orange color
- Login button: Orange color
- Click Login button will take to Line of Business Owner Dashboard

Notes:
- Inputs style and checkboxes need consistent across different modal windows
- Forgot Password and Register can be dead link
- Click “x” button need close the modal window

2. Line of Business Owner Flow
Dashboard
screenshot: 02a-1_LBO_Dashboard.png
- This will be the dashboard for a "Line of Business Owner".
- Left sidebar showing different color theme
- Showing active and inactive state based on color theme for left navigation
- User area in the header show user information, there’s arrow in the right. Suggest us sub menu look, you can put dummy for now. Make sure style not far off from current design
- Page area divided by Dashboard content and Right sidebar
- Dashboard content need fluid as browser screen
- Right sidebar can use fixed width

Content Area
- All boxes inside content need use fluid layout as browsers screen
- Topology content need remain centered when resize browsers
- Performance Box scrollbar need adapt browser screen, if all graphs can displayed, scrollbar in the bottom should hidden, and vice versa when reduce browser width

Topology Box
- For topology network, any suggested plugins can use for this?
- We might update the topology device, line and icon placement in the future. Is your solution configurable?
- Think about how the easy way to set up the icons, border color, and alert icons.
- Each devices need able to see the device details information when hover above the icons (screenshot: 02a-2_LBO_Dashboard.png)
- Selected device need show transparent border. Apply for all devices.
- Performance graph pointer need show animated function on tooltips load
- Hover out the box need hide the details information
- Match layout and content for details information
- Also for the Alert/Warning icons need able to see the details (screenshot: 02a-3_LBO_Dashboard.png)
- View Details can be dead link
- Request IT Button can be dead link
- Zoom In and Out can be dead link

Performance Box
- Each need show animated pointer on page load.
- There’s scrollbar in the bottom, match design style
- You need think easy way to set up the pointer for each graph
- Notice the differences of  percentage color status for each graph
- View button can be dead link

Right sidebar
- This is Alert & IT Request sidebar look
- View All Activities and Sort By Priority are dropdown
- Show how submenu look for both dropdown
- Alert list wrapped with scrollbar, match design look

IT Request Status
screenshot: 02b-1_LBO_IT Request.png
- This page show up after click Request button in the left sidebar
- Search input placed on top
- On focus need hide default value
- Filter button placed in the right side
- Click the filter button need how search filter options (screenshot: 02b-2_LBO_IT Request.png)
- Click Apply button or out of filter need hide the options
- Table header showing the arrow next to the title
- You need show function to sort up/down each columns with arrow icons
- View per page need show up dynamically per user selected options
- Pagination need works to navigation the page
- Request Update can be dead link

3. IT Operations Personnel Flow
Dashboard

screenshot: 03a-1_ITOP_Dashboard.png
- This is for IT Operations Personnel Flow
- Match sidebar design theme
- Right sidebar need follow different content like storyboard look

Topology Box
- Blue background with square pattern need covered all box area
- Topology on this page show additional informations
- You can see label on each devices
- There’s extra icons above the devices for Status
- Click the Status icons show different content (screenshot: 03a-4_ITOP_Dashboard.png)
- Action Item buttons can be dead link
- Click Device icons show different content (screenshot: 03a-5_ITOP_Dashboard.png)
- Match new columns layout
- Click the Alert/Warning icons also show different content (screenshot: 03a-6_ITOP_Dashboard.png)
- Action Item buttons can be dead link
- View details buttons on tooltips and box need take user to Device Details page explained below

Performance Box
- Performance box showing 2 columns format
- When resize browsers content need automatically moved up
- User still be able to scroll down the content
- Match Information for each cells
- View button can be dead link

Metric Box
- This is Metric Box need show as tab format
- Line chart show by default
- Suggest us dynamic chart plugin on page load, you can start with this : http://nvd3.org/examples/line.html
- Hover on line chart need able to see the details (screenshot: 03a-2_ITOP_Dashboard.png)
- You need make sure Day, Week and Year update the Chart look
- match all chart look and feel
- Click bar chart need show bar design theme (screenshot: 03a-3_ITOP_Dashboard.png)
- Suggest us dynamic chart plugin.
- Resize browser need also adapt fluid layout

Device Details
screenshot: 03b_ITOP_Devices details.png
- This is Device Details look and Feel
- No right sidebar displayed in page
- Whole Device Details page need use fluid layout
- On top of page there’s Device Details Information
- Back to Dashboard will take to IT Operations Personnel Dashboard

Topology
- Topology need adapt new width, content remain centered
- Details informations and Performance show up in the right side

Metric Box
- Metrix box display both Line and Bar charts side by side

Recommendation Box
- This box need to be fluid as browser screen
- Action buttons can be dead link
- Content need automatically expand when filled with more text information

Connected Devices, Interfaces and Configurations Boxes
- Each columns need to be fluid as browsers screen
- There’s progress in the right side
- Show animation progress on page load
- Each columns need have each scrollbar
- Rach title can be dead link

4. Application Owner Flow
Dashboard

screenshot: 04a_AO_Dashboard.png
- This is for Application Owner Flow
- Match sidebar design theme
- Match right sidebar content
- View Topology button can be dead link
- There’s Warning and Progress bar aligned with Application Name
- Notice there’s no table header for this page
- Status And IT Request buttons merged in one column
- No need pagination for this page

IT Request Status
screenshot: 04b_AO_IT Request.png
- Re-use completed IT Request Status from Line of Business Owner Flow


Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.

The following pages are required in your submission:
1. Welcome Page
2. Line of Business Owner Flow
3. IT Operations Personnel Flow
4. Application Owner Flow


CODE REQUIREMENTS:
HTML5

- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- You’re encouraged to use HAML to make the HTML code clean, provide source files on your submission.

CSS3
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.

JAVASCRIPT
- Plain Javascript
- Jquery
- AngularJS
- Any other suggested plugins?

IMAGES
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.

Browsers Requirements
- IE9
- IE10
- Firefox Latest Version
- Safari Latest Version
- Chrome Latest Version

ELIGIBLE EVENTS:

2015 topcoder Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30047529