Meli - Connected Building UX Design Update Challenge

Welcome to the Meli - Connected Building UX Design Update Challenge! 

We recently ran a challenge to get the initial design concepts for an iPad Application. In this challenge, we are looking for DESIGN and UX updates on how this application should work in two main ways:
* as an iPad application running on iOS7
* in line with the ideas as presented in the client's Style Guide provided.

Round 1

Submit your updated screens for Checkpoint feedback
1. Dashboard updates + Alert variations 
2. All Assets panel view
3. All Alerts panel view
4. Assets Detail Page

Round 2

Challenge Description
The purpose of this Challenge is to update the screens for an iPad iOS7 experience with the client Style Guide as reference. We want to utilize the best design possibilities that iOS7 provides.

IMPORTANT!! Design and User Experience Updates
- We need the overall design pushed further in the direction of being an iOS7 experience for a current model iPad native application.  
- We also need the design brought up to standards as provided in the given client Style Guide (Revised_Style_Guide.pdf). 
- You are required to submit standard resolutions for both iPad landscape and portrait views (Conversion to Retina version will be a task for the winner)
- Make sure all the new UI elements which you are designing are scalable vectors
- We're starting with a design that effectively covers all of the application functions and most of the screens.
- Update this to match the provided Style Guide (Revised_Style_Guide.pdf) and as an iOS7-specific experience
- iOS7 design references can be found at: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/MobileHIG/index.html and https://www.apple.com/ios/design/
- With extra tips here: http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/ and http://www.lukew.com/ff/entry.asp?1800
- Please DO NOT COPY from any of the above references.

Required Screens:
We need the below iPad screens..

1) Dashboard (01 Dashboard Screen)
The Manager logs into the application and they can see:
- Dashboard of widgets, controls and alerts telling them what is going on
- The ability to navigate to any of their systems
- The ability to see if any systems are not running efficiently

Download and Review
- Revised_Style_Guide.pdf
- 01-Dashboard-*.png
- We need you to work on the colors, size and overall presentation of this page

1.1) Navigation: 
The navigation positioning and content are set, no need to change the navigation!

Primary (top) Navigation
-- (icon) News (news/updates feed) - this goes to a News page which is essentially a full screen Chatter view showing all Alerts, Recommendations, etc.
-- (icon) Recommendations - this goes to the 03-Recommendations page
-- (icon) Alerts - when user tapes this icon, a panel slides in showing the All Alerts panel

Secondary (left) Navigation
-- (icon) Spaces - when user taps this icon, a panel slides out from the left showing the All Spaces panel
-- (icon) Assets- when user taps this icon, a panel slides out from the left showing the All Assets panel

Make sure to keep:
- Search
- Settings

1.2) Widgets Area:
The Widgets area need to be smaller - we like them but as this is going to be a “tablet” experience, so not a lot (if any) scrolling (so how do you size/position this information). We have three widgets 
1) Water/Gas (depending on the customer it could be one or the other)
2) Electricity
3) Weather

- Review the color usage (colors need to have purpose) positive & negative numbers etc should have meaning
- Experiment: On the dials/gauges. Does it make sense to add in any additional inner color or tick marks? We do like how clean and simple they are

1.3) Right column:
We will have two type of messaging on the dashboard as shown:

1.3.1) Alerts (Asset/Space Alerts)
An alert can be sent to the manager as either an Alert about an Asset or about a Space (which could be about many Assets)
- Alerts will appear in this space when there is either an Asset alert or Space alert
- An Alert would have 3 status types (Critical or Informational) -  that will mostly be as in this design
- New: The third kind of Alert could appear in the Alerts feed:  "Energy Alert" - green is being considered as the color indicating these kind of Alerts - how could this be implemented to make sense within the design without being mistaken for other elements?
- We would like to see three versions of the Alerts (2 different screens)
-- We would like to see how the Alerts look if a single Asset or Space has multiple Alerts
-- This alert design would have the Alert information plus a number to show how many active alerts are on that item
- Individual Alerts
- We would like to see what the design would look like if every alert was just listed (so no grouping)
- No grouping number tied to the alert
- If an Asset or Building had multiple alerts it would appear as more items in the feed

1.3.2) Recommendations
Recommendations are messages that will be sent to the customer to recommend fixes, updates or changes they need to make to any of their Assets or Buildings
- The basic design we have for these is what we want - consider ways they can be polished or improved keeping with other design changes as specified in this Challenge

1.4) Chatter (component on several of the pages as shown in the designs)
- This area will still need to be here (keep it simple)
- How should this be designed for the iPad experience?
- The current design shows the default display package for Chatter - how can this be customized visually while still being simple, fitting the design overall and usable.
- For this and all instances where Chatter appears in the application, place the Chatter input field, button(s) and associated UI appears at the TOP of the Chatter feed. 
- Types of Chatter: System to Person = The Asset alerting the Manager about performance alerts, alarms or malfunctions.
- Person-to-Person = Discussions between the Manager and his team or with key personnel at HCB. (Example: chatter, Instant messaging etc.)

2) All Assets Panel (02 - All Assets panel view)
Images:  04_Assets-1-hor.png and Wireframe: 04-All-Assets.png
- The current design shows a full page view - we want this styled as a panel that slides out when the user taps the Assets icon in the left navigation.
- You can use the Dashboard page as the originating/background page for this example

3) All Spaces Panel (03 - All Spaces panel view)
Images:  05_Spaces-1-hor.png and Wireframe: 05-All-Spaces.png
The current design shows a full page view - we want this styled as a panel that slides out when the user taps the Assets icon in the left navigation.
- You can use the Dashboard page as the originating/background page for this example.

4) Asset Details Page (04 - Asset Detail Page Updates)
Review: Images: 02-Details-1-hor.png and Wireframe: 02-Asset-Details-*.png
When a user clicks on an alert from the dashboard it will take them to the Asset Detail page. This page shows them details of the Asset or Building that the Alert is associated with.
- Note the updated items/notes on the wireframe
- The alert that the user is trying to view should be highlighted
- Alerts should be at the top of the page with associated status
- The Chatter feed associated with an Asset or Space page should be updated as per the Dashboard with the specifications included in this part.

5) Space Details (04a - Space Detail Page (new screen))
Review: Images: 02-Details-1-hor.png and Wireframe: 02-Asset-Details-*.png
- Space Detail Page should be nearly identical to the Asset Detail Page except for a Space in this example

6) Recommendations (05 - Recommendations Screen)
Images:  03-Recommendations-1-none.png, 03-Recommendations-2-new-values.png, 03-Recommendations-3-selected.png
Wireframe: 03_Recommendations.png

If a user clicks on a Recommendation it would open a new view "Recommendation Detail" that describes the recommendation to the Manager
- This page lists out a series of recommendations for the Manager
- The Manager can input different budgets and see how things calculate
- The Manager would be able to edit, print, email this page
- Project related or Maintenance related
- Portfolio Analysis
- Customer Feedback 

7) Recommendation Detail View (05a. Recommendation Detail View (new screen))
Images:  03-Recommendations-1-none.png, 03-Recommendations-2-new-values.png, 03-Recommendations-3-selected.png - these are NOT the actual page, but the page that will originate this view - show how this fits with the 03-Recommendations Page
Wireframe: Recommendation-detail.png
- If a user clicks on a Recommendation from the Recommendations page it would take them to a new page "Recommendation Detail" that describes the recommendation to the Manager
- When on the Recommendations screen a user can focus in on a single Recommendation and Accept, Reject or Put On Hold - see wireframe provided.  We need to see how this works visually.  Buttons when tapped will read "Accepted", "Rejected" or "On Hold"

8) All Alerts Panel View (06 - All Alerts panel view)
Images:  06_Alerts-1-hor.png and Wireframe: 06-All-Alerts.png
The current design shows a full page view - we want this styled as a panel that slides out when the user taps the Assets icon in the left navigation.
- You can use the Dashboard page as the originating/background page for this example

9) Alert Details Panel (07 - Alert Focus panel view)
Images:  06_Alerts-1-hor.png and Wireframe: 07_Alerts_focus.png
The current design shows a full page view - we want this styled as a panel that slides out when the user taps the Assets icon in the left navigation.
- You can use the Dashboard page as the originating/background page for this example.

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

Judging Criteria:
- Cleanliness of your graphics and design.
- How well your capture the above requirements in your designs
- Concepts for displaying the information in a unique/creative manner.
- User Experience!

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 for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.