Challenge Summary
Welcome to the "Scout - Website Design Concepts Challenge". Our client, the Department of Energy’s Building Technologies Office (BTO), is developing a modeling system called “Scout” that will help measure the energy conservation potential of new technologies. BTO calls these new technologies “energy conservation measures” (abbreviated as ECMs).
In this challenge we are seeking a complete design concept for the Scout desktop UI. In addition to the results visualizations that have already been developed, this UI will include pages that display ECM summary characteristics – energy performance, installed cost, lifetime, and energy/CO2/cost markets over a certain time period – as well as an overview/landing page; documentation; an input data browser; and user-specific settings, ECM review and definition.
- We would like to review your initial design and provide feedback.
- Please make sure to include a “Notes.jpg”. Please ensure that it provides a brief explanation regarding your submission, the reasoning/thoughts behind the design and any other detail you may want to provide.
- Your final design and files.
- Any updates and refinements from the Checkpoint review.
- Please make sure to include a “Notes.jpg”. Please ensure that it provides a brief explanation regarding your submission, the reasoning/thoughts behind the design and any other detail you may want to provide.
Challenge Description
The purpose of this challenge is to expand an initial Scout desktop website UI design concept with additional pages, as outlined in the Design Requirements section. In particular, this challenge will involve the design of an additional page (or pages) that allows users to browse through Scout ECM summaries and, where needed, suggest amendments to these summaries or submit new ECMs. The base Scout UI design and branding has been established through a previous design challenge that sought to visualize ECM results data. We will use the current challenge to supplement these existing results with the site elements described in the Design Requirements and ensure the cohesiveness/completeness of the UI as a whole.
Design Requirements
Main navigation would be as follow: ECM Summaries, Analysis Results, Market Calculator, Resources. Refer to the Sitemap for additional information/ visual.
Screen 01 - ECM Summaries
- A browsable list of existing Scout ECMs that can be filtered in various ways (see e.g., left hand filtering menu on existing data visualization designs). It is expected that about 200 ECMs will be included in the initial Scout ECM database. This will require some pagination and UI solutions to handle that many items.
- Concise and visually engaging summary of key ECM features (e.g., performance, cost, lifetime, market entry year, market - see supplemental document with more details on each of these variables)
- Note: not all data and information should be shown on the initial ECM listing. We are open to ideas around expandable/ collapsable panels, accordions, etc. that reveal the entire data for each ECM and shows the graph (each ECM will have a graph)
- We are NOT looking to add additional pages or screens when a user clicks on an ECM.
- Clear way for users to suggest edits to existing ECM summaries - feedback could be submitted through a pre-defined form or through comments added under the details of each measure definition.
- Clear way for users to generate new ECMs and submit them for review by BTO through a set of form fields. These fields would include at minimum the variables outlined in the supplemental document, as well as fields for the sources behind each variable’s data. This can just be an a button on the screen that opens and overlay/ modal window to input the information
- "Save" functionality for the user to save an ECM to their profile (Screen 05 - User Profile)
Screen 02 - Analysis Results (Data Visualizations)
- Current data visualizations from the previous designs would go here
- Need to include a link in the main navigation for this section
- Note: the sub-navigation should remain (Energy, CO2, Costs, Financial Metrics)
- We Need to add a toggle or option for the user to switch between 2 different graph types. This could be placed within the "filters" area or somewhere else.
-- Note: the toggle will need to be present on the Energy, CO2, and Costs tabs
-- You DO NOT have to design the alternate graphs, we just need the UI element to switch between the two.
-- The graphs will be: "Radar" and "Sankey"
Screen 03 - Market Calculator
- A page that allows users to explore the Scout input data and obtain energy and CO2 data for specific markets.
- A version of this page is available here.
- Take this content and reformat it to work within and match the current design layouts and branding
Screen 04 - Resources
- The Resources screen can be pretty straightforward and simple.
- This page would have 2 sections: Scout overview and download/access.
- Overview: An overview of the Scout simulation tool (placeholder text is fine). Access to a documentation wiki on Github ("view more" type link that directs to the Github wiki)
- Analysis engine access: Ability to download the Scout analysis engine and/or contribute to its development on Github. ("Download" and "View on Github" links)
Screen 05 - User Profile
- View saved ECMs and/or ECM results.
- This page would be accessible through the "Profile" icon on the header in the current designs.
Design Notes
- Design concepts produced in this challenge will be implemented using web standard approaches (e.g., d3.js) and can incorporate interactive features.
- No istockphoto allowed in this contest. Use your own designs and illustrations.
- Please make sure you list all fonts you’ve used in your design to avoid failing screening.
Supporting Documents
- Detailed description of Scout ECM data to summarize (found here)
- Previous/current designs (Storyboard.zip)
Branding Guidelines
- Use the current designs as your source of input for UI, colors, fonts, and overall design style. Do not reinvent these elements to differentiate your designs; focus should be placed on the organization, planning, and layout.
- We are NOT looking for new branding concepts.
Target Audience
- Technology and program managers within BTO (Building Technologies Office)
- DOE (Department of Energy) offices
- Federal agencies
- External BTO partners (e.g., universities, national labs, industry organizations)
Judging Criteria
- Clear, concise, and visually engaging approach for summarizing measure ECM data
- Clarity/cohesiveness of overall UI structure and design
- Quality of the organization, planning, and layout of your screens
- Adherence to the current designs/branding
Submission & Source Files
Submission Notes
Please make sure to include a “Notes.jpg”. Please ensure that it provides a brief explanation regarding your submission, the reasoning/thoughts behind the design and any other detail you may want to provide.
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 file.
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. As part of final fixes you may be asked to fix or update your screens to meet any missed Requirements, Forum requirements or Checkpoint requirements.
In this challenge we are seeking a complete design concept for the Scout desktop UI. In addition to the results visualizations that have already been developed, this UI will include pages that display ECM summary characteristics – energy performance, installed cost, lifetime, and energy/CO2/cost markets over a certain time period – as well as an overview/landing page; documentation; an input data browser; and user-specific settings, ECM review and definition.
Round 1
Round One (1) - Submit your design for Checkpoint feedback:- We would like to review your initial design and provide feedback.
- Please make sure to include a “Notes.jpg”. Please ensure that it provides a brief explanation regarding your submission, the reasoning/thoughts behind the design and any other detail you may want to provide.
Round 2
Round Two (2) - Final design plus any Checkpoint feedback:- Your final design and files.
- Any updates and refinements from the Checkpoint review.
- Please make sure to include a “Notes.jpg”. Please ensure that it provides a brief explanation regarding your submission, the reasoning/thoughts behind the design and any other detail you may want to provide.
Challenge Description
The purpose of this challenge is to expand an initial Scout desktop website UI design concept with additional pages, as outlined in the Design Requirements section. In particular, this challenge will involve the design of an additional page (or pages) that allows users to browse through Scout ECM summaries and, where needed, suggest amendments to these summaries or submit new ECMs. The base Scout UI design and branding has been established through a previous design challenge that sought to visualize ECM results data. We will use the current challenge to supplement these existing results with the site elements described in the Design Requirements and ensure the cohesiveness/completeness of the UI as a whole.
Design Requirements
Main navigation would be as follow: ECM Summaries, Analysis Results, Market Calculator, Resources. Refer to the Sitemap for additional information/ visual.
Screen 01 - ECM Summaries
- A browsable list of existing Scout ECMs that can be filtered in various ways (see e.g., left hand filtering menu on existing data visualization designs). It is expected that about 200 ECMs will be included in the initial Scout ECM database. This will require some pagination and UI solutions to handle that many items.
- Concise and visually engaging summary of key ECM features (e.g., performance, cost, lifetime, market entry year, market - see supplemental document with more details on each of these variables)
- Note: not all data and information should be shown on the initial ECM listing. We are open to ideas around expandable/ collapsable panels, accordions, etc. that reveal the entire data for each ECM and shows the graph (each ECM will have a graph)
- We are NOT looking to add additional pages or screens when a user clicks on an ECM.
- Clear way for users to suggest edits to existing ECM summaries - feedback could be submitted through a pre-defined form or through comments added under the details of each measure definition.
- Clear way for users to generate new ECMs and submit them for review by BTO through a set of form fields. These fields would include at minimum the variables outlined in the supplemental document, as well as fields for the sources behind each variable’s data. This can just be an a button on the screen that opens and overlay/ modal window to input the information
- "Save" functionality for the user to save an ECM to their profile (Screen 05 - User Profile)
Screen 02 - Analysis Results (Data Visualizations)
- Current data visualizations from the previous designs would go here
- Need to include a link in the main navigation for this section
- Note: the sub-navigation should remain (Energy, CO2, Costs, Financial Metrics)
- We Need to add a toggle or option for the user to switch between 2 different graph types. This could be placed within the "filters" area or somewhere else.
-- Note: the toggle will need to be present on the Energy, CO2, and Costs tabs
-- You DO NOT have to design the alternate graphs, we just need the UI element to switch between the two.
-- The graphs will be: "Radar" and "Sankey"
Screen 03 - Market Calculator
- A page that allows users to explore the Scout input data and obtain energy and CO2 data for specific markets.
- A version of this page is available here.
- Take this content and reformat it to work within and match the current design layouts and branding
Screen 04 - Resources
- The Resources screen can be pretty straightforward and simple.
- This page would have 2 sections: Scout overview and download/access.
- Overview: An overview of the Scout simulation tool (placeholder text is fine). Access to a documentation wiki on Github ("view more" type link that directs to the Github wiki)
- Analysis engine access: Ability to download the Scout analysis engine and/or contribute to its development on Github. ("Download" and "View on Github" links)
Screen 05 - User Profile
- View saved ECMs and/or ECM results.
- This page would be accessible through the "Profile" icon on the header in the current designs.
Design Notes
- Design concepts produced in this challenge will be implemented using web standard approaches (e.g., d3.js) and can incorporate interactive features.
- No istockphoto allowed in this contest. Use your own designs and illustrations.
- Please make sure you list all fonts you’ve used in your design to avoid failing screening.
Supporting Documents
- Detailed description of Scout ECM data to summarize (found here)
- Previous/current designs (Storyboard.zip)
Branding Guidelines
- Use the current designs as your source of input for UI, colors, fonts, and overall design style. Do not reinvent these elements to differentiate your designs; focus should be placed on the organization, planning, and layout.
- We are NOT looking for new branding concepts.
Target Audience
- Technology and program managers within BTO (Building Technologies Office)
- DOE (Department of Energy) offices
- Federal agencies
- External BTO partners (e.g., universities, national labs, industry organizations)
Judging Criteria
- Clear, concise, and visually engaging approach for summarizing measure ECM data
- Clarity/cohesiveness of overall UI structure and design
- Quality of the organization, planning, and layout of your screens
- Adherence to the current designs/branding
Submission & Source Files
Submission Notes
Please make sure to include a “Notes.jpg”. Please ensure that it provides a brief explanation regarding your submission, the reasoning/thoughts behind the design and any other detail you may want to provide.
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 file.
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. As part of final fixes you may be asked to fix or update your screens to meet any missed Requirements, Forum requirements or Checkpoint requirements.
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.