Challenge Summary
We just completed IBM - Data Center Mobile App wireframe in previous IBM Challenge.
This time we need your help create the storyboard design to leverage User Interface and User Experience of the application.
Remember, when you designing the application, all graphic elements must stick with IBM Design Language.
Round 1
Your submitted checkpoint design solution for client review.
1. Login
2. Dashboard (Manager Role)
3 Data Center Detail
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Round 2
Final pages of design solution with updated solution based on client checkpoint feedback
1. Login
2. Dashboard (Manager Role)
3. Search Result
4 Data Center Detail
5. Supervisor Role Flow
6. Application Icon
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
IBM - Data Center Mobile Application should help users to provide real-time visibility and monitor the informations remotely.
File Downloadables
wireframe.zip - Wireframe
IBM_ciolab_ifund-graphics.ai - Client’s Logos
existing-datacenter-map.png - Current Data Center layout
Design Guidelines
- Click around IBM Design Language to get familiar with expected design brand!
-- Layout: http://www.ibm.com/design/language/framework/visual/layout.shtml
-- Typography: http://www.ibm.com/design/language/framework/visual/typography.shtml
-- Iconography: http://www.ibm.com/design/language/framework/visual/iconography.shtml
-- Color: http://www.ibm.com/design/language/framework/visual/iconography.shtml
-- Interaction: http://www.ibm.com/design/language/framework/visual/color.shtml
-- App Inspiration: http://www.ibm.com/design/language/inspiration.shtml
- You may submit iPhone 6 Portrait Screen Size for this challenge submission: 750px x 1134px. You must anticipate that your design will works when we convert into smaller mobile device screen with responsive design solution.
IMPORTANT
- Please reference the provided wireframe as starting guidelines for your submission! You’re encouraged to submit better Visual Interface.
- You need capture all page flows in your storyboard design.
- This application will be an iOS native application. Taking into account that it should allow for swipe, accelerometer, GPS, keyboard and all the advantages that comes with the performance of native apps.
- We want this to be MODERN UI & Out of The Box solution! application!
- Use shape format on your .psd so we not lose quality when resize into Standard version.
- DO NOT just coloring existing wireframe, we need you suggest ideas on layout and functionality within the application. If you just follow existing wireframe every submission will look same.
Data Center Mobile App Submission Requirements
1. Login
- Create login page that showing these fields:
-- Intranet ID
-- Password
- Add IBM Logo in this login page (IBM_ciolab_ifund-graphics.ai).
- Add page title “Data Center Mobile App”
- Create Validation Error for “Validation” and “Connectivity Error”
- When user logged in, you need show 2 different flows:
-- Manager Role Flow
-- Supervisor Role Flow
2. Dashboard (Manager Role)
- This is Dashboard view for Manager Role
- For Manager role, there’s supervisor name displayed
Manager Role Scenario / Use Case
- Login and open up app dashboard view
- Looks at key metrics & alerts (To view and analyze site performance)
- Navigate to desired Site/Data Center and takes a look at Site Specific details
- Zooms into desired/particular assets for deep-down information
- Respond to alerts by selecting them individually
- Will be responding to Service Requests & be able to raise service requests
Search Input Field
- User can search Data Center by type on text input
- There’s advance button to allow user search specific options by:
-- Pending Approval Status
-- Overall Data Center Status
-- Location
-- PUE (Power Utilization Effectiveness) Status
-- Data Center Utilization (Threshold bar)
-- Data Center UpTime (Threshold bar)
-- Outage (dropdown menu)
-- Any other field can added in page?
- Search button placed in the bottom
Main Navigation
- Create how sidebar design look in your submission
- The possibility menu navigation are:
-- Dashboard
-- Alert/Notifications
-- Messages
-- Profile
-- Setting
-- Logout
- Any other menu can removed or added?
Data Center List
- This area show list of Data Center that Manager is in-charge person.
- You need put way to let user reload and syncing the Data Center informations
- Data Center divided by “All” and “Outage” tab
- Table list consist of this columns:
-- Data Center Name
-- Actions Required
-- Performance
-- Overall Data Center Status
- User can sort on any column, show active/inactive column sort state.
- Click on Data Center name will display additional data. How you integrate iOS feature to display this?
- Match data need displayed in the additional data
- You also need add View Detail button that will take user to Data Center Detail page
- “Actions Required” is quick way to let user know what part of Data Center need “immediate actions”
- FYI: Actions button need easily tell Manager which section have problems
- PUE or Power Utilization Effectiveness, indicate by numbers. Should we also use different color indicator?
- Overall Status is overall indicator for Data Center, there will be 3 status for this column, Red(Alert), Yellow(Warning), Green(Normal)
3. Search Result
- User landing on this page after type and click Search button on Dashboard
- Back button and reload/syncing data displayed in page
- Show Search Result found information in page. You might also add information if user do specific advance search
- Search Result table displayed below
- User can also view additional data by click on Data Center row
4 Data Center Detail
- User landing on this page after type and click View Detail button on on Data Center quick information
- Back button and reload/syncing data displayed in page
- Supervisor information displayed on top of page
- Data Center Detail page consists of detailed section of each Data Center
Overview Tab
- 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 displayed for all events/outage. Click this need show Escalation Matrix Window.
- Escalation Matrix Window display information of All users role responsible for Network Outage
- Power Usage Efficiency, divided by Current, Month and Year
- Business Critical Applications, show status for Online and Offline
- Tickets, display numbers of Request ticket
- Resource on Site, this is Informations of resources
Performance Tab
- 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
Request Tab
- For this screen show “Pending Approval” and “All” tab
- In “All” tab, you can display 3 categories for Requests: “Open Tickets”, “Work in Progress” and “SLA Violation”
- Each section need able to drill down.
- View Request Ticket take to Detail page
- Back button take to Request tab
- Manager can add comment to the ticket
- On Detail page for Manager, there’s Approve and Reject Request buttons
Outage Tab
- Current Uptime and Overall Uptime placed on top page
- This page contain Upcoming and All Outage tabs
- User can view this page month and week format
- Show easy way to navigate weekly Outage
- Also how outage look on Monthly view?
- User can see details information of each Outage
- Inside the Outage detail there’s information of Resource and Impace
Utilization Tab
- 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
Misc Tab
- This tab contain some miscellaneous Information like:
-- Location Information
-- Disaster Recovery Site Location
-- Cost Implication, and
-- History
5. Supervisor Role Flow
- This is Dashboard view for Supervisor Role
- Think about how make the Supervisor and Dashboard page easy to recognize the differences
- On this page, There’s Manager name displayed on top of page
Supervisor Role Scenario / Use Case
- Login and open up app dashboard view
- Looks at key metrics & alerts (To view and analyze site performance)
- Navigate to desired Site/Data Center and takes a look at Site Specific details
- Zooms into desired/particular assets for deep-down information
- Respond to alerts by selecting them individually
- Will be responding to Service Requests & be able to raise service requests
Overview Tab
- This is basically same with Overview tab for Manager Role
Performance Tab
- This is basically same with Performance tab for Manager Role
Request Tab
- User can search the Request tab
- There’s no tabs for Supervisor role
- Show Advance filter for search
- There’s Create New Ticket button in page
- Match form fields when user create the ticket
- Supervisor can comment the Request details
Outage Tab
- This is basically same with Outage tab for Manager Role
Utilization Tab
- This is basically same with Utilization tab for Manager Role
Map Tab
- This Map only viewed for Supervisor
- Search Asset displayed on top
- Show how advance search should look?
- User have ability to zoom in/out the map
- Data Center View have filter option
- Supervisor can Create New Assets
- Match Create New Assets form
- There are some asset type like Rack, Cooling Devices, UPS Server like existing application look. Refer screenshot (existing-datacenter-map.png)
- Create separate screen to show details of each asset look
- Show easy way to turn off the running asset on each details
- How you indicate the “Offline” asset?
- Show as detail screen as you can to show us how Map tab works
6. Application Icon
- Create application icon that will capture your storyboard design theme
- App Icon should created on the required sizes:
-- 76 x 76 pixel
-- 180 x 80 pixel
-- 512 x 512 pixel
-- 1024 x 1024 pixel
- Design Reference when creating icons for iOS application:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/AppIcons.html#//apple_ref/doc/uid/TP40006556-CH19-SW1
http://spyrestudios.com/40-stunning-ios-app-icons-for-design-inspiration/
http://www.appleinspires.me/tag/icons/
Target Audience
- IBM Employees
Judging Criteria
- How well you create Data Center Mobile App and keep things consistent with the existing design brand.
- Cleanliness of your graphics and design.
- User Experience for Mobile application.
- Stick with IBM Design Language.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG image files based on Challenge submission requirements stated above.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.