Challenge Overview
Welcome to MFVN Network Graph Visualizer - Main Layout UI Prototype Challenge
For this UI Prototype challenge, we need you update existing prototype to build Network Graph Visualizer page based on provided storyboard and requirements stated below.
Main requirements for this challenge need create correct page structure for Graph Visualizer and File Sharing Visualizer. The dynamic diagram and interactions will be out of challenge scope.
Final Submission Guidelines
IMPORTANT!
- Your submission must remain show of responsive layout that works on Desktop and Tablet platform.
- Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Files Downloadables
sisn-prototype.zip - UI Prototype as Base Updates
Storyboard.zip - Storyboard screens and PSD files
MFVN Network Graph Visualizer UI Prototype Requirements
1. Add Network Visualizer button
screenshot: 01A_Dashboard(Network-Visualizer-Btn).jpg
- Add new button on page header before alert icon
- Add the button to all prototype pages
- Hover state need follow consistent image background slide up/down effect.
- Show tooltip when hover on Network button (screenshot: 01B_Dashboard(Network-Visualizer-Btn-Hover).jpg)
- Re-use existing tooltip style and function
- Click this button take user to Network Visualizer page
2. Network Visualizer
screenshot: 02A_Networks-Visualizer(If networks less than or equal to 8).jpg
- This is how Network Visualizer page look and feel
- Page divided by 2 sections, left side for Network Visualizer and sidebar with tab in the right side
- Page title/breadcrumb placed on top side
- Below breadcrumb, number information can be plain text
- Load More and Load All Network buttons can be dead link
- Network Visualizer area need use fluid width.
- Important: For this challenge, network visualization can be a plain image, no need the interaction at all! We will swap with correct implement in another challenge.
- You can create separated screen showing network with more than 8 bubbles (screenshot: 02B_Networks-Visualizer(If networks more than 8).jpg)
- Create a link on “diagram” image to let user to separated page of “Single Network” View. Read more details below
Sidebar area
screenshot: 02A_Networks-Visualizer(If networks less than or equal to 8).jpg
- Sidebar area need use fixed width and always placed in the right side
- Match active and inactive tab style
- Tabs need show up are:
Quick Network Information tab
- This tab show by default when user navigate to Network Visualizer
- In the bottom of quick information there’s row with toggle function for “Organization”, “Users” and “Shared Files”
- Organization (screenshot: 02P_Networks-Visualizer(Network Activity Accordion2).jpg)
- In the right side (3 vertical dotted button), click this need show tooltips (02M_Networks-Visualizer(My Files - Actions Btn).jpg)
- Tooltip menu are: “Delete”, “Edit”, “Share”, “Download” and “File Visualizer”
- All menus are clickable, you can put dead link. Except “File Visualizer”, this “File Visualizer” menu need take user to “File Visualizer” page
- Apply same tooltip wherever that show up in Network Visualizer sidebar
- User (screenshot: 02O_Networks-Visualizer(Network Activity Accordion2).jpg)
- Shared Files (screenshot: 02N_Networks-Visualizer(Network Activity Accordion).jpg)
- For Shared Files, show a group of mini action buttons (“delete”, “download” and “graph”)
- Search input placed in the right side, no need action for now
Network Activity tab
screenshot: 02E_Networks-Visualizer(Network Activity).jpg
- This tab show connection line of Network Activity
- Username and Network Name are links, you can put dead links for now
Network Setting tab
screenshot: 02F_Networks-Visualizer(Network Setting).jpg
- This is Network Setting, there’s another sub-tab in this screen for “Organization” and “User”
- Search input placed on top of tab
- You need create auto suggest function (screenshot: 02F2_Networks-Visualizer(Network Setting2).jpg)
- Highlight text user typed with underline text
- Show hover state on auto suggest text
- After click the value, show new content below the input
- User can remove the row by click “x” button
- “Add Users/Organizations” button can be dead link (screenshot: 02F3_Networks-Visualizer(Network Setting3).jpg)
My Files tab
screenshot: 02G_Networks-Visualizer(My Files).jpg
- This is My Files Tab
- For Shared Files, show a group of mini action buttons (“delete”, “download” and “graph”)
- User can checked each My Files row, there’s checkmark placed in the right side (screenshot: 02I_Networks-Visualizer(My Files - Drag2).jpg)
- Click row with checked on icon will make the checkmark hidden (screenshot: 02H_Networks-Visualizer(My Files - Drag).jpg)
- User can drag row with checked on mark
- When row dragging, there’s indicator “2 Files” (screenshot: 02J_Networks-Visualizer(My Files - Drag3).jpg)
- bubble above draggable out of challenge scope
- Simulate after row dropped somewhere on diagram area, show message in the bottom left of Network Visualizer (screenshot: 02L_Networks-Visualizer(My Files - Drag5).jpg)
3. Single Network View
(screenshot: 03A_Organizaion-Within-Single-Network.jpg)
- For Single Network view, you can show 4 tabs. Re-use completed tabs content
- Keep in mind: Interactive diagram is out of challenge scope!
- Create a link on “diagram” image to let user to separated page of “Single Organization” View. Read more details below
4. Single Organization View
(screenshot: 04A_Single-Organization-View.jpg)
- For Single Organization view, you can show 2 tabs. Quick information and Files tab
- Keep in mind: Interactive diagram is out of challenge scope!
- Match quick information tab
- Re-use “My Files tab” from Graph Visualizer page
- Every element in this tabs need show correct function.
4. File Sharing Visualizer
screenshot: 05A_File-Sharing-Visualizer.jpg
- This screen load when user click “File Visualizer” menu in the right side of sidebar row
- Match breadcrumb on top of screen
- File icon placed in the center of graph
- Keep in mind: Dynamic graphic is out of challenge scope!
- Show 2 tabs for File Sharing Visualizer, Quick information and My Files tab
- For Organization row, user can expand/collapse the row (screenshot: 05B_File-Sharing-Visualizer (Organization-Capabilities).jpg)
- Re-use existing toggle buttons
- This is how “Comments” tab look (screenshot: 05C_File-Sharing-Visualizer (Comments).jpg)
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.
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.
Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
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
Desktop
- Safari latest version
- Firefox latest version
- Chrome latest version
Tablet
- Safari Browsers on iPad (Landscape & Portrait)