Challenge Summary
Welcome to Sunshot – Built Spectrum - Dashboard Graph Visualization & Logo Design Challenge!
Spectrum provides cloud-enabled building performance software for the architecture/engineering/construction industry. The software seamlessly integrates computer-aided-design (CAD), building performance analysis tools, and cloud-based intelligence. Architects receive real-time feedback on life cycle cost, energy use, and environmental impact during the early stages of the design process. Novel data visualization methods allow architects to easily create low-cost, energy efficient, code compliant designs.
Round 1
Submit the following for Checkpoint feedback:
- Submit your initial design of your concept.
- Please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final Design plus any Checkpoint feedback:
- Submit your final design plus apply any checkpoint feedback.
- Please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Details:
The goal of this challenge is to design a dashboard based on below requirements and a logo for Built Spectrum.
Visualization functionality needs to be state of the art and include far more powerful functionality than current competitor solutions.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Design Requirements:
- Visual representation of data:
-- Dynamic representation is paramount.
-- Relationships in data should be brought to the forefront.
- Customer experience should be first class priority:
-- Natural user interaction.
-- Beautiful visuals.
- Client prefers D3.js and three.js for charts.
Branding Guideline:
- Branding Guideline (Spectrum_StyleGuide.pptx).
Supporting Documents:
- Style Tile Example (StyleTile.psd.zip).
- Spectrum Figures (Spectrum Figures.ppt).
- Spectrum Table (Spectrum_Dataset_100.xlsx).
Required Features:
1. Dashboard: Displaying sustainability metrics for baseline and alternative designs:
A. Displaying baseline design:
- The task is to design a dashboard element that shows values for various parameters and objectives that comprise a baseline building design. The parameters represent variables that factor into a building’s design, the objectives represent metrics on a building’s sustainability performance, and a baseline design represents an architect’s initial design against which they would like to compare alternative designs.
- Each design consists of 33 parameters and 23 objectives.
- Spectrum_Dataset_100.xlsx provides values for the 33 parameters and 23 objectives for 100designs. For this task only the values for the first design should be used.
- The 23 objectives are broken down into five categories, each of which has primary and secondary objectives. Primary objectives are the most important metrics and should stand out. Secondary objectives are less important andmay be shown by hovering over the primary objective or using smaller font below or to the side of the primary objective.
- The five categories of objectives are as follows (primary objective shown in parentheses):
1) Energy (Energy Use Intensity)
2) Cost (Total Cost)
3) Water (Water Consumption)
4) Environmental Impact (Greenhouse Gases)
5) Daylighting (Underlit, Well-lit, Glare) Note: Daylighting has three primary objectives
- Figure 1 shows a sample visual for this task. Note: Figure 1 does not include secondary objectives or parameters. These should also be included in the design.
- Graphical icons may be added representing the various parameters and objectives, such as a sun for daylighting or a water droplet for water consumption.
B. Comparing designs against the baseline:
- The task is to design a dashboard element that compares values for parameters and objectives for a baseline and two (or more, if desired) alternative designs.
- Spectrum_Dataset_100.xlsx provides values for parameters and objectives. Use Design Number 1 for the baseline design and subsequent designs for alternatives.
- Alternative designs can be created and compared against the baseline design. The dashboard might show for example that Alternative 1’s energy use intensity is 45% greater than the baseline, but the total cost is 52% cheaper, or that Alternative 2’s cost is 28% more expensive but greenhouse gases are 33% lower. These present energy-cost tradeoffs to the architect.
- Please show us your ideas on how to show other less important values: Tile flip / slide out / show hide?:
-- Good example on tile flip can be found on http://www.lynda.com/.
- Visually show how each of the objectives for the alternative designs compare against the baseline. For example, this can be done be done with a combination of green/red up/down arrows with +/- superimposed
(+5, -2) etc.
- Labels should be added to the alternatives, such as “Alternative 1: Low Cost Design” or “Alternative 2: Water Efficient Design”
- Key parameter values that contribute to large differences in results for the baseline versus alternative designs should be highlighted somehow. For example, perhaps Alternative 1 uses stucco for the cladding material and the baseline design uses concrete, and this is the key reason why Alternative 1’s greenhouse gas value is 58% lower than the baseline design. Stucco should be highlighted as a key parameter that is important for reducing the baseline design’s environmental impact.
PDF:
- Need a button somewhere to “Save PDF”. Assume it will give the option to save baseline / Alternative 1 / Alternative 2.
C. Interactive Scatter Plot:
- Reference Link.
- The task is to display a Scatter Plot diagram that plots 100 design alternatives from Spectrum_Dataset_100.xlsx.
-- Parameters and objectives comprising each design can be shown by hovering/clicking/etc.
- Include the ability to “Use as baseline” or “Use as Alternative 1”, “Use as Alternative 2”, etc. The design will then replace current Baseline and Alternative designs.
- The user can save / name this new configuration, which should probably happen at the time of replacing the main data. Maybe a modal pops up giving them the option to name/save this new configuration.
- The Scatter Plot will have an X and Y axis that the user can change to one of the five main objectives. Only two objectives are plotted at once. These objectives may be shown as options in dropdown menus or some other visual that allows the user to change the axes.
D. Interactive Bar Chart:
- A bar chart should be designed that shows how each possible value for a given parameter influences an objective. Figure 2 shows an example, with the X axis consisting of all possible values for the glazing materialand the Y axis showing the influence on the electricity consumption Each value has a bar above it showing the degree to which it reduces the objective. The design should include a way for the user to select one of the 23 objectives for the Y axis. Multiple objectives may be selected, in which case parallel sets of bars will be plotted for each value. The value corresponding to the baseline design should be highlighted in some way, such as coloring that bar a certain color (see the green bar in Figure 2). The design should also include a way to select a value, such as through radio buttons or sliders. How the influence factor is calculated is not important for this challenge. Thought should be given how to show values for those parameters with many values such as orientation. It is suggested that two bar charts are designed, one for a parameter with only a few values (like glazing material) and one with many values (like orientation). Multiples sets of bars corresponding to multiple objectives should be shown.-Parameters and their values can be found in Spectrum_Dataset_100.xlsx.
E. Interactive Tornado Chart
- Reference Link.
- A bar chart should be designed showing how each of the 33 parameters influences a chosen objective. This task is very similar to the Bar Chart task with three differences:
1) Parameters, not their values, are shown.
2) The bars should extend horizontally not vertically, with the Y axis listing the parameters and the X axis corresponding to the influence on an objective.
3) The bars should be ranked from most to least influential (i.e., greatest to smallest length) from top to bottom.
- How the influence is calculated is not important. A representative sample of the 33 parameters may be shown. The design should include a way to switch between objectives, since each objective will generate different influence values. Multiple objectives may be selected, in which case parallel sets of bars will be plotted for each parameter.
2. Logos:
- Main logo including both graphical and textual components that capture the name “Built Spectrum”.
- Alternate logo of just graphical component.
- Alternate logo of just textual component.
- Variants of the main and alternate logos for different scales. E.g., desktop website, mobile website/app, icon-sized/favicon, and powerpoint slides.
- Please place the logos on light and dark backgrounds for demonstration.
- Keywords: Sustainability, Automation, Building design.
3. Style Tile:
- For this screen, we ask that you put together a one page style tile that clearly shows your concept for this design. Please search in google for “style tile template” to see common examples of this type of screen.
Required style tile content:
A) Color scheme, where you call out color for specific items such as:
- Clickable (non-active) link items.
- Color for active link items.
- Color for specific areas (backgrounds, header backgrounds, etc).
- Color-related scheme / rules.
B) Typography rules, where you call out typography for specific items such as:
- Headers.
- Sub-headers.
- Paragraphs.
- Lists.
- etc.
C) Navbar style (including both active and inactive styles).
D) Data visuals styles (your charts, graphs, etc).
Target Audience:
We are building an engineering tool for architects which is the challenge: how do you present quantitative information in an engaging way to a group of people that thrive on creativity, inspiration, and design freedom and less so numbers and statistical feedback?
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
- Optimal use of space and design to illustrate data insights
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 image files based on Challenge submission requirements stated above.
Source Files:
- All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
For Logo:
All original VECTOR source files of the submitted design. Files should be created in Adobe Illustrator or similar and saved as layered AI or EPS file. Your source files must meet these requirements:
1) The AI/EPS logo file with text intact (not outlined).
2) The AI/EPS logo file with text in outlined format.
Final Fixes:
- As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.