IBM - Data Center Mobile Application Wireframe Design Challenge

Welcome to the IBM - Data Center Mobile Application Wireframe Design Challenge

The purpose of this application is to provide real-time visibility of Data Centers to Infrastructure Operations Personnel. It will allow the user to monitor critical information, and enable them to respond to requests on go.  This application will be a HUGE help to people who need to keep track of the status of our data centers.

For this wireframe challenge, you need focus on delivering top-notch features, The application should be intuitive, and easy to navigate and incorporate best practice for User Experience (UX) on mobile devices.
The audience for this application will be executives and data center managers -- so we are looking for clarity and ease of use over fancy graphics. 

Round 1

Intial IBM - Data Center Mobile Application Wireframe Design
1. Login
2. Home Page (Data Center List for Manager)
3. Data Center Details for Manager
4. Home page for Data Center supervisor  
Note: Submit as much Application Features as you can for our review.

 

Round 2

Final IBM - Data Center Mobile Application Design with updated Checkpoint Submission Feedback.
1. Login
2. Home Page (Data Center List for Manager)
3. Data Center Details for Manager
4. Home page for Data Center supervisor  
5. New Service Request (Data Center Supervisor)
6. All Service Requests (Data Center supervisor)
7. View service request (Data Center Supervisor)
Note: Submit as much Application Features as you can for our review.

 

Wireframe Requirements:
IBM - Data Center Mobile Application should help users to provide real-time visibility and monitor information remotely.

Notes:
- This application will be developed on the iOS platform as a native application.
- Your wireframe submission needs the ability to drill down through all the page flow
- Show your wireframe solution on Portrait View. Use Mobile Portrait View as your submission screen size
- Suggest best practice User Experience solution that capture all required functionality as stated below.
- The more details your incorporate in the wireframe will greatly help us to understand the application flow

Users Roles:
Data Center Manager
- Responsible for multiple Data Center operations (Spread across different geographic locations). On a day-to-day basis the executive will be very interested to know how the Data Centers are performing, what parts of the SLA (Service Level Agreement)  have been violated, any cost implications around Site, any critical alerts pending action, any service request waiting for their approval, network performance, and when planned or unplanned outages occur. At some instance these business executive will also be interested to know the number of resources present at on any particular site on particular day/time.

Data Center Supervisor
This group of users represents the Operations personnel who are responsible for smooth data center operations and execute the required activities, they perform Root Cause analysis, and  will be first to respond / work on events, alerts, service requests, and giving updates regarding each of those items’ status. Additionally,  DC Operators are responsible for maintaining accurate data/asset information on the respective repository."

IBM - Data Center Mobile Application Main Features:
- Accessing the Data Center Information and Key Metrics  (SLA, Site Operational status),
- Allow user to access and respond to service requests & alerts,
- User will be able to make search requests on Data center floor layout,
- App would exhibit good performance, consumes minimal battery as processing would take place in core engine

User Flow:
Data Center Manager Flow
- Open up app dashboard view
- Looks at key metrics  & alerts (To view and analyze site performance)
- Looks at SLA Status and Cost implications
- Navigate to desired Site/Data Center and takes a look at Site Specific details
- Looks at any pending approval and approves the request or comments

Data Center Supervisor
- 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

Real-Life Illustration / Use Case:
- On a Sunday evening I start to get alerts for a temperature increase in my data centers,
- I start making calls to facility folks and come to know that have taken an emergency shutdown of facility devices along with my Data Center (DC) Air Condition Units.
- Knowing this fact I immediately open up my u201cManage your DC affairs with fingersu201d app and start the standby mini AC systems placed next to my critical IT hardwareu2019s before the thermal meltdown happens.
- While walking into office on a Monday morning, using my DC app I check my DC performance metrics and vital facility parameters and comes to know that one of UPS bank is losing its batteries, using app I look into DC map and identifies IT system connected to that particular UPS,
- On same map I also identifies the owner for those machines and send outs the relevant notification mail.
- Meanwhile my boss too has this app and he is happy to see all of his data centeru2019s performance charts showing green at par with Industry efficiency levels, no alerts have been waiting for acknowledgements.
- After a while, I decided to go for coffee, while Iu2019m on my way I see service tickets coming on my way to locate few IT Systems in my DC for audit requirements,
- I open the DC app map, navigate to search tab enters the asset details and map shows the exact location information such Row and Rack number of the asset,
- I snapshot the screen and email to requester.

Use Case List Requirements:
- Users can navigate to desired site/data center
- Users can navigate to desired asset location and its information like Sl.No, Owner, dimensions/project owned / Rack Number etc
- User can respond to alerts
- User can respond to Service Requests
- User can approve / decline requests
- User can initiate On/OFF command to supported devices (Supported Facility or VM's)
- User can view consolidated dashboard views
- User can search for items like Asset
- One of the Feature use case is : User should be able to Drag and Drop the DC assets (Move within the DC layout - Floor Diagram)

Wireframe Screen Requirements:
Check attached screenshots.zip for sketch example.

1. Login
- Create login page that showing these fields:
 -- Intranet ID
-- Password
- How validation error look?
- Please Add IBM Logo in this login page
- Add page title related to “IBM Data Center Mobile Application”

2. Home Page (Data Center List for Manager)
Sketch example: picture-example-1.png
- Each manager can be in charge of several data centers. So this page contains a list of data centers that this person manages, with a Red/Yellow/Green status for each.
- User can click to open the details for any data center. 
- From this page, user can also refresh the list, which will fetch the status again, and can log out.
- We also need supervisor's name responsible for Data Center, in addition to just showing the status.
- How initial each data center look displayed on this page?

3. Data Center Details for Manager
Sketch example: picture-example-2.png
- This screen contains information about a particular data center.
- The types of information on this screen are:
-- Status
-- Threshold Breach
-- Performance History
-- Pending Approval
- Need ability for them to Approve or reject.
- The manager needs a way to navigate back to the home page from here.

4. Home page for Data Center supervisor
- This page has 2 tabs: one with data center details, and one with a map.
- Need add a way to create New Service Request in page

Tab 1  (Data Center Details)
Sketch example: picture-example-3.png
- This Data Center Details will have almost similar look with Data Center Details for Manager
- Each supervisor is in charge of a single data center.  
- So this user's home page is centered around the contents of the data center itself.
- From here, the user can see details of the status, can view all open service requests and can open a new ticket himself.
- Open Service Request and View Service Request placed in the bottom

Tab 2  (Data Center Map)
Sketch example: picture-example-4.png & picture-example-5.png
- Tab 2 is a generated map view of the data center itself,
- Need functionality to zoom in,
- View details of a particular rack, and
- Need ability to search for a specific asset:
-- Category Search: “All”, “Planned” & “Unplanned”
-- Search criterias are divided by “Simple” & “Advanced” type
-- Simple type, user can type keyword into single input
-- Advanced Type, contains these following fields: “Name”, “Model”, “Category”, “Product Line”, “Description”, “Serial”, “Asset Numbers” and “Barcode”
- The layout information comes from a separate program, but this tool needs to be able to allow the user to zoom in, navigate, and search.  
- Check screenshot from the tool that generates the map.

5. New Service Request (Data Center Supervisor)
- The new service request is a form with fields for
-- Summary,
-- Detailed description,
-- Location,
-- Assignment, severity.  
- The user needs to be able to submit or cancel from this page.  

6. All Service Requests (Data Center supervisor)
Sketch example: picture-example-6.png
- On this screen, the user can view all open service requests, which will look something like screenshot
- From this page, the user can open a service request to see the content (picture-example-7.png).  
- They also need to be able to get back to their home screen.
- How this page layout created? as table format? any other solution?

7. Edit service request (Data Center Supervisor)
- This screen will be a lot like picture-example-3.png, plus the supervisor can see:
-- The date/time of submission,
-- Who submitted it.  
- In addition, the supervisor can:
-- Change the severity
-- Update the description
-- Change who owns it
-- Close the ticket (if it's assigned to him)

Important!: Make sure your wireframe solution capture all User Case Information, User Flow and User Case explained above

Target Audience
- Data Center Manager
- Data Center Supervisor

Judging Criteria
- User Experience of IBM - Data Center Mobile Application
- Completeness and accuracy of the wireframe as defined in the spec requirements.
- How well your wireframes provide a consistent user flow.

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
Wireframes should be built in HTML or Axure. The resulting files are not critical in this Challenge. The most important point is that all the content is listed and the pages are linked together to show page flow.
Keep your source files out from this submission folder.

Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.

Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.