Challenge Overview
Welcome to IBM - Data Center Mobile Application Manager Role UI Prototype Challenge
The main task of this project is to create the IBM - Data Center Mobile Application UI Prototype especially for Manager Role based on the provided PSD Storyboard design.
For this challenge you need focus on Mobile layout with fluid solution that works all iPhone platform. In the end of this challenge we need solid UI prototype result with best practice solutions
Final Submission Guidelines
Notes:
- All pages need use fluid layout when transform into Landscape or Portrait view.
- Provided storyboard created on iPhone 6 size (Retina and 750px), your submission need support other size like iPhone 4, 5 and 6+ using best practices of Responsive Web solution.
- Match similar fonts in your submission. iOS iPhones bundled with "HelveticaNeue" font.
- Your prototype need submit correct contents. Pay attention to all detail things, let us know if need clarifications.
- Expected framework for UI Prototype Challenge is AngularJS. You can also use jQuery as Javascript library.
Files Downloadable
storyboard.zip - Storyboard Design
UI Prototype Page Requirements
Application Icon
- We need your prototype support App icon, so we can add to homepage. Refer this site for instruction how to add the icon to homepage
- App Icon must support these following sizes:
-- 76 x 76 pixel
-- 120 x 120 pixel
-- 152 x 152 pixel
-- 180 x 180 pixel
- Grab icons from “App Icon” folder
- Please recreate missing icons to meet all size requirements
- After add prototype to homepage, after open the app icon, prototype need displayed in fullscreen mode. Follow this page for fullscreen mode trick
1. Login
screenshot: 01-01_Login.png
- This is login page, IBM logo placed on top of page
- Application Logo and background image need remain centered when viewed on Landscape view
- Make sure input also show fluid width when viewed on Landscape view
- “Data Center Mobile App” need editable
- Login button use same width like the inputs
- Show validation error with red background and red “x” button in the right side (screenshot: 01-02_Login.png)
- Password can use dotted character instead of asterisk
- tap “x” button need clear the input value
- Tap “Login” button need show the “Verify your Data Connectivity” message (screenshot: 01-03_Login.png)
- Tap “OK” button need hide the message
- Tap Login button again take user to Dashboard for Manager
2. Dashboard
screenshot: 02-01_Dashboard_manager.png
Data Center List
- This is Dashboard view for Manager Role
- Page header, “All” and “Outage” tab also “Sort By” area can use fixed placement on top of page
- “All” tab show by default. Match active and inactive tab style
- User can sort Data List by click Sort By option (screenshot: 02-02_Dashboard_manager.png)
- Sort by pop up display in the bottom of screen (screenshot: 02-03_Dashboard_manager.png)
- Sort by filter options are:
-- Data Center Name
-- Actions Required
-- Performance
-- Status
- Pick different value need update the reflect the checkmark in the right side and update the “Sort By” value in page
- Cancel button need hide the pop up
- On table list, click on arrow name need display additional data with toggle function (screenshot: 02-04_Dashboard_manager.png)
- When additional data, use quick animated effect for “Utilized” progress (screenshot: 02-05_Dashboard_manager.png)
- Supervisor Name can be dead link
- User can call user by tap phone number
- UpTime seconds need show 1 second increments
- Show PUE in one line, make sure this look good when viewed on smaller width
- There’s a “Open Detail” button that will take user to Data Center Detail page
- User can swipe down content area starting from Sort By, then “Updating” message show up. (screenshot: 02-06_Dashboard_manager.png)
- Show animation rotation for the icons
- After some seconds, “Updating” message become hidden
Main Navigation
- “Sidebar” menu should open main navigation in the right side (screenshot: 02-07_Dashboard_manager.png)
- User photo and name displayed on top of sidebar
- Menu navigation are:
-- Dashboard
-- Alert/Notifications
-- Messages
-- Profile
-- Setting
-- Logout
- As possible we need every menu linked to correct pages
Search Input Field
- “Search” button need load search input area (screenshot: 03-01_Search_manager.png)
- Search input will replace existing “tab” placement (screenshot: 03-03_Search_manager.png)
- There’s advance button to allow user search specific options by tap the search filter button (screenshot: 03-04_Search_manager.png)
- Search input options need covered whole browser height (screenshot: 03-05_Search_manager.png)
- User can hide the advance search by tap “x” button.
- Forms need displayed are:
-- Checkbox
-- Status
-- Location
-- PUE (Power Utilization Effectiveness) Status
-- Data Center Utilization (Threshold bar)
-- Data Center UpTime (Threshold bar)
-- Outage (dropdown menu)
- Search button need show Search Result page (screenshot: 03-06_Search_manager.png)
- Search result show Data Center list, Search result need load in-page
- After type on search input, user can clear the value by tap the “x” button
- Result information placed above Search result list
3. Data Center Detail
screenshot: 04-01_Data center details_manager.png
- User landing on this page after type and click “Open Detail” button on on Data Center quick information
- Back button and “Supervisor” button displayed on top of page
- Back button take user to Dashboard page
- Tap “User” button need load right sidebar (screenshot: 04-03_Data center details_manager.png)
- You need display “Supervisor” name, phone and email information (screenshot: 04-04_Data center details_manager.png)
- Tap inside the main content or “Supervisor” button need hide the sidebar
- Back to main content, some menu buttons displayed below page header
- All menu buttons need working like tab function
- Match active and inactive style
- On smaller screen width, you need create swipe function to navigate all menu buttons
- On Page load show “Overview” by default
Overview
screenshot: 04-02_Data center details_manager.png
- Status information placed on top of page. This is let user know about overall status of Data Center
- Show message/notification to explain current Data Center Status.
- There is Escalation Matrix Icon in the right side of statu. Click this need show Escalation Matrix Window (screenshot: 04-05_Data center details_manager.png)
- Escalation Matrix Window display information of All users role responsible for Network Outage (screenshot: 04-06_Data center details_manager.png)
- “Close” button take user to “Overview” screen
- Back to Overview screen, Power Usage Efficiency, divided by Current, Month and Year
- Show animated effect when load the speedometer
- Business Critical Applications, show status for Online and Offline
- Tickets, display numbers of Request ticket
- Resource on Site, this is Informations of resources
- Blue colored are text links, you can put dead link for now
Performance
screenshot: 04-07_Data center details_manager.png
- This tab will display some series of charts:
-- DC Utilization Trend
-- Historical PUE
-- Temperature Level
-- Network Performance
-- Voltage
-- Battery Backup
- User can click dot on chart to view Performance number
- Show status for each chart
- All sections need load different charts
- Suggest use what library can use to build chart with this look and feel. Or you can start using from these following chart library references.
- User can also slide the chart to see additional chart content
- Make sure chart have fluid width ability
Request
screenshot: 04-08_Data center details_manager.png
- For this screen show “Pending Approval” and “All” tab
- “Pending Approval” tab show by default
- Each section need able to collapse/expand.
- “View” take to Detail page (screenshot: 04-09_Data center details_manager.png)
- This is Request Detail page look (screenshot: 04-10_Data center details_manager.png)
- Close button take to “Pending Approval” tab
- Manager can add comment to the ticket
- On Detail page, there’s Approve and Reject Request buttons in the bottom
- For “All” tab, you need display 3 categories for Requests: “Open Tickets”, “Work in Progress” and “SLA Violation” (screenshot: 04-11_Data center details_manager.png)
- “Preview” take to Detail page (screenshot: 04-12_Data center details_manager.png)
- This is Request Detail page look (screenshot: 04-13_Data center details_manager.png)
- Close button take to “All” tab
Outage
screenshot: 04-14_Data center details_manager.png
- “Current Uptime” and “Overall Uptime” placed on top page
- Show count-up animation effect for “Current Uptime” and “Overall Uptime”
- This page contain Upcoming and All Outage tabs
- User can view this page month and week format
- Weekly format show up by default
- Create calendar layout for Month view (screenshot: 04-15_Data center details_manager.png)
- Show different color for current date, and date with event
- User can see details information of each Outage by tap the arrow on Weekly view and by select the date on monthly view (screenshot: 04-16_Data center details_manager.png)
- "20" is current day
- Other light colored cell is day with Outage events
- Need easy way to config Outage event day
- Inside the Outage detail there’s information of Resource and Impact (screenshot: 04-17_Data center details_manager.png)
- Tab content for Impact (screenshot: 04-18_Data center details_manager.png)
- Close button take user back to Outage screen
- You can put dead link for user button
Utilization
screenshot: 04-19_Data center details_manager.png
- Current Data Center Utilization display as progress bar
- Overall Data Center Utilization display as chart format
- User can update chart by day, week and month
- Data Center Utilization by Asset Type displayed in the bottom
- Data Center Utilization need show animated progress bar
Misc
screenshot: 04-20_Data center details_manager.png & 04-21_Data center details_manager.png
- This tab contain some miscellaneous Information like:
-- Location Information
-- Disaster Recovery Site Location
-- Cost Implication, and
-- History
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
Safari Browsers on all iPhone version (Landscape & Portrait View)