FAST!!! - Meli - Command Center UX Wireframe Challenge

Welcome to Meli - Command Center UX Wireframe Challenge.

In this challenge, we are looking for your expertise in improving the user experience of the wireframe screens based on the given whiteboard sketches.

NOTE: This is a Single Round Challenge, please make sure to track the deadline.

The purpose of this wireframe challenge is to come up with a wireframe screens for the given whiteboard sketches as a refernce and also improve the user experience and flow of the application.

IMPORTANT!! Wireframe Considerations:

• - Follow the given storyboards for contents/layout.
• - We have provided the wireframe sketches and we are looking forward for you to improve the user experience.
• - This is meant to be for an iPad experience - please take that in consideration with full range of UI elements and interactions. 
• - We are building assuming iOS7. If using interactions that are unique to iOS7 or later makes a better experience, yes, DO use them.
• - Keep Responsive Design in mind, but the focus right now is on horizontal/landscape alignment

 

General Requirements for All Screens:
Top Navigation, 3 Icons:

• - News: Goes to Chatter Page - no whiteboard page, but assume a page that looks like a full page with navigation bars and a feed like the one on the Dashboard without the Widgets
• - Recommendations: Goes to Recommendations Page (05_Recommendations_All)
• - Alerts: Opens All Alerts Panel from icon at Top (06_All_Alerts_panel, 06_Alerts_All_panel3, 06_All_Alerts_Notes1)

Left Side Navigation, 2 +1 Icons:

• - Both the Logo and Dashboard Icon ("Dial" icon) taskes the user to the Dashboard - on some of the whiteboard diagrams this Icon is shown as a House - choose one and keep it consistent in your version
• - "S" icon opens the Spaces Panel (02_All_Spaces ) from the left navigation - this should overlay or push aside whatever primary page the user is currently on (work with an interaction that makes the best UX)
• - "A" icon opens the Assets Panel (02_All_Assets) from the left navigation - this should overlay or push aside whatever primary page the user is currently on (work with an interaction that makes the best UX)

Required Pages:
Dashboard:  (01_Home_Page.jpg)

•  - Please follow the contents from the attached storyboard.
•  - In the right side, we need to show alerts and recommendations as two lists - individual Alerts and Recommendations are shown as rectangles.  Critical alerts are highlighted with colors inverted (white letters, dark background).  Regular alerts have bold text.   Inactive alerts have normal, medium grey text.
•  - The 3 widgets under the top navigation can be consider For Placement Only, so please use placeholder images or shapes to indicate layout
•  - Tapping on an individual Alert goes to Asset Details Page with the Alert focused (04_ADP.jpg, 04_ADP_Notes 1.jpg,  04_ADP_Notes 2.jpg)
•  - Tapping on an individual Recommendation goes to Recommendation Details page
• - You may use the attached mockup 04_Asset_Details_mockup1.jpg as an example of how a Dashboard, Asset or Space's Chatter Feed will look, including the focused Alert as highlighted (when appropriate) and other page elements, ssuch as the very rough navigation icons. 

Asset/Space Panels:  02_All_Assets, 03_All_Spaces

• - These panels come from their related icons on the left
• - These panel displays alerts, recommendations and Chatter Posts associated to the selected Asset
• - If no records are available, then we display "No Records Available"
• - For these Panels, all buttons default to "Follow" on load.  Tapping on Follow button changes the button to "Following" and sets it to a highlighted state
• - Tapping on a "Following" button changes it to "Follow" and unhighlights.
• - These are two different views that are essentially identical except for labeling, their associated icon and where they link

Asset Details Page  (04_ADP.jpg, 04_ADP_Notes 1.jpg,  04_ADP_Notes 2.jpg)

• - This page allows the user to post a comment, so anyone following this asset will get the comment the user posts.  The comment is added to the Chatter feed beneath it as a regular Comment
• - We need a Show Options drop-down, that allows the user to filter to show "All Activities, Alerts and Recommendations"
• - User will see a pagination to control the number of alerts being displayed in the page.
• - Clicking on an "Alert" in this page goes to Alert Details page. (07_Alerts_focus.jpg)
• - Clicking on Recommendations goes to Recommendation Details page. (05_Recommendations_All.jpg)
• - A user will be able to tap an alert to see more information about the alert as shown in (07_Alerts_focus.jpg/07_Alerts_focus2.jpg)
• - You may use the attached mockup 04_Asset_Details_mockup1.jpg as an example of how a Asset or Space's Chatter Feed will look, including the focused Alert in grey and other page elements,such as Asset information in the left column. 
• - The Post label and field and Share button should produce a new item in the Feed beneath it with a status of "Informational" (white background with black/grey text)

Space Details Page

• - These are identical to Asset Details Page except for labeling and where they link to and from.

View Recommendations Page and Details Panel: (05_Recommendations_All)

•  - Attachment "05_Recommendations_mockup.jpg" can be used as a guideline for the content and direction for layout.
•  - This page displays all the Recommendations sorted by status.
•  - Statuses are "Released to Customer/Updated, Approved, On Hold, Rejected"
•  - On Tap in Recommendation Title, we need to show the Recommendation Details Panel for that Recommendation.
•  - Recommendation Details includes "Name, Cumulative Value ($), Value Type, Description, table, Attachments, 3 buttons "Accepted (Changes the status of the recommendation to Approved), Rejected (Changes the status of the recommendation to Rejected and show a pop-up to allow the user to enter a reason), On hold (Changes the status of the recommendation to Approved).  

All Alerts Panel: (06_All_Alerts_panel.jpg, 06_All_Alerts_panel3.jpg)

•  - This Panel is shown when a user clicks on the Alerts notification icon on the top.
•  - We need to show a drop-down called "Show Options", this will have "All Assets" as default option, other option will be "Assets and Space I follow"
•  - Also we need a Sort By option, this shows "By Date" and "By Type" ( which sorts the results by the types: "Critical", "Energy" and "Information")
•  - Clicking on an Alert will got to the Asset or Space Details page to which the Alert is associated, and the chosen Alert will be focused in that Asset/Space's Chatter feed. 

View Alert Details /Disposition Alerts

•  - This Shows the alert details when a user taps to view the alert from Asset Details or Space Details page
•  - Show the Alert Details as shown in 07_Alerts_focus.jpg/07_Alerts_focus2.jpg
•  - We will have two buttons in this panel "Acknowledge and Ignore"
•  - When a User clicks "Acknowledge" - just hide the alert panel
• - When a user clicks "Ignore" - we need to show a confirmation step before setting the alert status to "Ignore" and hide the panel, as well as the alerts shown in Assets or Space list

Target Audience

Senior IT Managers working in large server facilities with moderate application experience and may be walking around their building, and their subordinates

Judging criteria
Your submission will be judged on the following criteria:

•  - User experience
•  - Completeness and accuracy of the areas of functionality.
•  - How well your wireframes provide a consistent user flow and clear information architecture for the application

Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Generated HTML files with all the requested contest requirements stated above.

Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.

Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.