Challenge Summary
Welcome to the HCB Connected Building Design Update Challenge! This challenge is focused on updating the provided design concepts user experience. We would like you to update the dashboard, create new screens based on the new requirements, colors and updated user click paths.
In this contest we are looking for DESIGN and UX updates on how this application should work.
Round 1
Submit your updated screens for Checkpoint feedback
1. Dashboard updates + Alert variations
2. Alert Detail Page Update
3. Recomendations Detail Page (we want to be able to provide feedback to you on this)
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus any Checkpoint feedback
1. Dashboard screens
2. Alert Detail Page
3. Recomendations Detail Page
- Any screens showing interactions and user click-paths
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Contest Description
We are looking for the TopCoder design community to help update this user experience of the provided design. Download and review the provided design. Make user experience and user interaction design updates based on the details below.
Design and User Experience Updates
Dashboard
Update the Command Center user experience and click-paths
- 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 navigation to any of their systems
- The ability to see if any systems are not running efficiently
Dashboard Screen
Download and Review
- 01_command_center_ipad_portrait.png
- 02_command_center_desktop_ipad_landscape.png
- Review wireframes.pdf
- We need you to work on the colors, size and overall presentation of this page
- Update this screen for iPad/Tablet presentation/user experience - the focus is on the iPad experience!!
Navigation: (Does this go on the top or left - we are thinking top)
Primary Navigation
-- (icon) News (news/updates feed)
-- (icon) Recommendations
-- (icon) Alerts
Secondary Navigation
-- (icon) Buildings
-- (icon) Assets
Make sure to keep
- Search
- Settings
Widgets Area
- The Widgets need to be smaller - we like them but we this is going to be a “tablet” experience so not a lot (if any) scrolling (so how do you size/position this information)
- We need three widgets
1) Water/Gas (depending on the customer it could be one or the other
2) Electricity
3) Weather
- Remove “Wishard Building”
- We still need the information on these widgets - but does the smaller size require an updated experience?
- 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
Right column
We will have two type of alerts/messaging on the dashboard
1) Alerts
2) Recomendations
- Design the user experience for two seperate areas
- Question: Do these stay in this column or move to other areas of the dashboard?
Asset/Building Alerts
An alert can be sent to the manager as either an Alert about an Asset or about a Building (which could be about many Assets)
- Design: similar to what you see in the provided design but smaller (no need for the big 01, 02 etc)
- Alerts will appear in this space when when there is either an Asset alert or Building alert
- An Alert would have 2 status types (Critical or Informational) - color should be considered here
We would like to see three versions of the Alerts (3 different screens)
1) Asset/Building Alert
- We would like to see how the Alerts look if a single Asset or Building has multiple Alerts
- This alert design would have the Alert information plus a number to show how many active alerts are on that item
2) 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
3) No Alerts
- What does this area look like when there are no alerts
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
- Project related
- Maintenance related
- Portfolio Analysis
- Customer Feedback
Chatter
- This area will still need to be here (keep it simple)
- How should this be designed for the iPad experience?
- This will show ALL activity for any Assets or Buildings that the Manager is following
- 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.)
Alert Detail Screen Updates
Download and Review
- Page 3 of the wireframe.pdf
- 04_1_alerts.png, 05_1_alert_details.png
- When a user clicks on an alert from the dashboad it will take them to the Alert 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
- Update the navigation
Recomendation Detail Screen (new screen)
See page 2 of the wireframe.pdf
If a user clicks on a Recommendation it would take them to a new page "Recomendation Detail" that describes the recomendation to the Manager
- This page lists out a series of recomendations 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
Page Requirements
Please design your screen for iPad
- iPad: 1010px by 660px (or longer height wherever scrollable/required - but keep important content above the fold)
- Make this a great "tablet" experience (so consider navigation, swipes, and touchscreen)
- More items will be a touch > go to new page (less scrolling)
Files
Wireframes.pdf = Note - this is meant to show you notes that we made - this is not showing you how to design the page. Please review the notes and think about the user experience for this application
Screens = Reference PNG screens
PSD Source =��� Source files
Branding Guidelines:
Follow the existing design - feel free to update colors
IMPORTANT
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
Judging Criteria
- How well you update and think through the user experience
- Cleanliness of your graphics and design.
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.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.