Challenge Summary
Welcome to SunShot - Kinetic Buildings - Diagnostics Application Design Challenge. In this challenge, we are looking for your help to come up with designs based on the provided wireframes.
About the Project:
Faulty operation in buildings is known to waste 15% to 30% of total HVAC energy on average - yet fault diagnostic tools have not been widely adopted by the industry due to the current lack of low-cost, accurate solutions. We have developed a technology for detecting and diagnosing faults, that that combines high-level data-driven analytics and component-level diagnostics using a Bayesian network. This combination provides holistic building diagnostics that can be readily conveyed to a building operator using a probabilistic output.
Good Luck on this challenge!
Round 1
Submit your initial designs for Checkpoint Feedback
1) Home Page
2) Buildings Overview
3) Building Diagnostics View
3.1) Diagnostics Details
3.2) Comfort Overview
4) Diagnostics Overview
5) Comfort Overview
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.
1) Home Page
2) Buildings Overview
3) Building Diagnostics View
3.1) Diagnostics Details
3.2) Comfort Overview
4) Diagnostics Overview
5) Comfort Overview
6) Service Queues
7) Style Tile
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Introduction:
We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
Design Considerations:
- We are looking for you to create simple, clean interface
- Branding is open to the designers
- Focus on coming up with a design with great user experience.
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application.
IMPORTANT: Wireframe Reference:
- Wireframes has been provided to help you get started with your designs
(Please DO NOT COPY the layouts as shown in the wireframe - it’s just for content reference. If you copy, there will be least chance of winning this challenge as all your designs will look the same).
- Client has added notes detailing the purpose of each and every field/column in the wireframe, going through and understanding each of these is a MUST, in order to come up with the best possible user interface
- Let us know if you have any questions regarding the notes in wireframe.
Required Pages:
1) Landing Page:
Reference: Page 1 in PDF
- We need a logo for this application, come up with a logo that would be apt for this application - looking forward to your ideas.
- This shows the initial screen with the list of items a user can navigate to
- We need five main buttons to be included on the page “Buildings Overview, Diagnostics Overview, Comfort Overview, Data Visualization, Service Queue”
- Screen for “Data Visualization” is not in scope for this challenge.
- In all pages across the site, we need a way to access the settings page..how can show that in your designs.
- We need a footer at the bottom with the links as shown in wireframe.
- Feel free to add anything that you feel would be appropriate.
2) Buildings Overview:
Reference: Page 2, 3, 4 in PDF
- This screen provides a basic overview of the different buildings being managed. It will be the first screen that a user will encounter with a typical workflow.
- We need to show list of buildings and each row of information is for a different building.
- The information shown for each building in the wireframe needs to be included, but the presentation of this info is entirely flexible (make sure you don’t copy the wireframe).
- Do you think having search and filter will help the users?
Include the columns as shown in the wireframe:
Site:
- Building name, campus/client, and city
- Also need some basic weather info: Current temp, high and low.
- Click on the “Campus/Client” (Ex: Drexel U. in wireframe) to see the to show only buildings from this campus/client.
- Click on city (Ex: Philadelphia, PA in wireframe) to show only buildings from this city in this view
Primary Systems:
- Need a simple way to indicate if the heating and/or cooling systems are on in the building. Can use graphics, icons, text, etc.
Comfort Index:
- Single number to estimate the % of people comfortable and color coding of the percentage works based on the range (>85% = Green, 70%-84% = Orange, <70% = Red). Click on the percentage number to expand the building comfort view for this building within this screen.
Zones:
This shows the number of zones and not zone numbers..zone colors are detailed below:
- Red = Too Hot (problem - comfort issue in the building)
- Pink = Too Warm
- Green = Normal
- Light Blue = Too Cool
- Dark Blue = Too Cold
- Click on any of these boxes to expand the building comfort view for the associated zones
Diagnostics Notifications:
(Clicking any of the notification should show “3. Diagnostics Overview”)
- This quickly allows the user to see the number of new and existing notifications for the building, along with some indication of the priority.
-Click on any of these boxes to expand the building diagnostic view for the associated zones (“3. Diagnostics Overview”)
- Do not use the layout provided. The tables / rows need to be completely rethought for a strong visual design.
Impacts of Faults
- This table shows how many “zones” in the building are impacted by the faults in the notifications, as well as the impact on indoor air quality (IAQ) and the cost of wasted energy.
- Click on any of these boxes to expand the building diagnostic view for the associated zones (“3. Diagnostics Overview”)
- Do not use the layout provided. The tables / rows need to be completely rethought for a strong visual design.
3) Building Diagnostics View:
Reference: Page 5 in PDF
- This screen expands from the building view screen and provides a listing of the building diagnostics notifications.
- The diagnostic items displayed are shown based upon which item is clicked on the building view screen. For example, if the “Comfort” area is clicked, then the diagnostics related to comfort are displayed. If the “expand diagnostics” is clicked, then all diagnostic items are shown, sorted by urgency.
(Note: we are just trying to help you understand the flow, looking for your help to think through the overall layout and interactions that will work best).
It includes below columns:
- Building / zone information
- Brief description of the fault
- Confidence (its shows the confidence of the diagnosis, a visual indicator shown based on an algorithm that indicates how certain the fault is actually occurring in the building).
- Status (Active, Dormant, Repaired)
- Priority (Low, Medium, High)
- Impact description
- Actions: User will be able to take actions from a drop-down, if a particular item needs some action then it needs to be denoted by a color indicating some action is required for it! Please show how the drop-down will look like..some values you can include in the drop-down are “In Service Queue, In Repair Queue, Repaired, Report Generated, Ignored for 10 days”
3.1) Diagnostics Details:
Reference: Page 6, 7 in PDF
- Clicking on a notification with the diagnostics in diagnostics overview (point 3 above) expands to show more details about it.
- We need some categories of text to be shown, make sure it is arranged in way that looks legible and easy to read/understand.
This section should include:
- Diagnosis
- Fault Impact
- Observations
- Recommended Actions
(NOTE: Observations and Recommended Actions can be quite long, please come up ideas on how these two text areas can be shown - show in your design where Observation or Recommended Actions has text upto 1000 characters).
Notes:
- A text area to enter the notes, currently the wireframe shows just a text box to enter notes but once the notes are entered, we need to log/save the note...so it would be good to have a list of notes (note, person name who added the note, data/time when it was added).
Diagnostic History:
- This shows the graphical view indicating the history of fault that happened over a period of time..
- We need a simple way for the users to adjust the timeline with possible options as 1 day, 1 week and 1 month.
- Create a simple graph that matches your design.
- We are looking for you to come with a style for the charts and any other suggestions that would like to show here.
3.2) Comfort Overview:
Reference: Page 9 in PDF
- This shows the list of zones that are too hot / too cold in the currently chosen building
- If you click on one of the “zone” color in building overview above, it expands to show comfort overview and based on the color box that was clicked, we show the number of zones as indicated in the color box i.e. say if the user clicks on red color (which has 2 zones in it), then we need to display only two zones that has the column with “deviation (temp)” that are red in color).
- Whereas if the user clicks on “Comfort Index” in the building overview table, we list all the zones as shown in page 9 in pdf.
- On tapping any of the rows (zone) will show the zone details with the historical chart as shown in wireframe reference: Page 10 in PDF.
- User will be able to sort by any of the columns.
4) Diagnostics Overview:
Reference: Page 8 in PDF
- This screen is designed exactly as the building diagnostic view, but is a direct link from the home screen to a summary of the diagnostics list.
- Follow the contents as shown in the wireframes.
5) Comfort Overview:
Reference: Page 11, 12 in PDF
- This screen is designed exactly as the comfort overview (3.2 Comfort overview), but is a direct link from the home screen to a summary of zones within the building that are too hot/too cold.
- Follow the contents as shown in the wireframes.
6) Service Queues:
Reference: Page 13 in PDF
- This page shows a list of building that are in either service or repair queue.
- Do you think a search / filter would help here?
- We need all columns as shown in the wireframe.
--
7) Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers
- Explore these references to learn more about style tiles: Reference 1, Reference 2
Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)
Typography:
We would like you to identify and define the list of fonts and the specific color, font size used:
- Headers
- Sub-headers.
- Paragraphs.
- etc.
Target Audience:
- The audience is a combination of service providers, building operators, building owners, and technicians.
- The majority of the customers and many of the end-users are middle-aged and grew up before the ubiquity of computers, so the assumption needs to be that the user is minimally tech savvy.
- The buildings industry is notoriously slow to adopt new software and technology, so the interface should be intuitive so the user doesn't feel like they have to "learn" how to use the software.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Your design should possible to build and make sense as an application
- 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, 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. 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.