Challenge Summary
Welcome to Sunshot - Livable Analytics - Survey Report and Benchmark Tool Design Concepts Challenge. This challenge is focussed on creating the charts and overall visualization for an interactive survey results report
About Survey Report and Benchmark Tool:
This tool will provide an interactive survey results report for a single building and showing comparisons (benchmarking) to the overall database.
We are looking for Design Concepts on what should the user see and experience when using the application!
Good luck and we look forward to your design concepts!
NOTE: We are awarding $150 for all best submissions at checkpoint!
Round 1
Submit your initial designs for Checkpoint Feedback
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.
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)
The Purpose of this challenge is to come up with the the look & feel and flow for this web application. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
Design Ideas:
- Looking for modern, intuitive user interface
- Focus on the design being a great user experience, think simple but effective solutions!
- Come up with design concepts that shows out-of-the-box solutions.
- 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
- What should the priority features be?
- How quickly could you find information?
- We had shared few UI Examples to help you get inspired (please do not copy)
- Branding is open to the designers
- Please use a placeholder for logo!
- Design Size: Desktop 1280px width and height as required
Chart Reference:
- As a part of this challenge, we would like you to design charts as necessary to showcase your designs.
- Client would like you to make use of D3 Charts in your designs - while you design the charts, please research/go through D3 Chart Reference: https://github.com/mbostock/d3/wiki/Gallery
Content Reference:
Survey (demo):
http://www.cbesurvey.org/survey/demos2010/
- This shows the exact demo of the survey taken by a user in a building.
- A user will be presented with appropriate survey questions based on the type of building the user is in!
(This is not in scope of this challenge)
Survey Result (demo):
http://www.cbesurvey.org/CBESurvey/Common/ReportSurveySelectTEST.asp?NF=0&report_user_ID=1209
- Select “CBE Survey Report Demo” and click on “View Report” to view the survey results report.
- This is just for content reference, please don’t copy this survey result report as we are specifically looking for your help to improve the overall user experience and make it more interactive. (Note: Report works correctly in Chrome and IE only.)
- Based on the answers received from users for above survey, these results report is shown.
- Looking for your help to make this Survey Result Report more interactive, intuitive and provide great experience!
PDF Reference:
We had attached a PDF copy of the survey results report for your reference!
Required Pages:
We are looking for the below screens to be designed/considered in your concepts..
For this challenge, you will be designing the survey result report summary graphic and overall visualizations required for this chart!
Approach for this Survey Results Report:
We want an approach that shows “Overview first, zoom (drill-down) and filter, then details on demand”
IMPORTANT: Make it more interactive!!
1) Login:
- Come up with a login page that allows the user to enter username and password
- How will the error screen look like? show us your ideas!
2) Survey Results Report - Overview:
Reference: Page 9 in PDF or please have a look at the “survey results” in the link above.
- Survey Results Report overview will show the summary of survey results for single building and benchmarks.
- We need to display the name of survey for which the results are being displayed (please see page 9 to see the notes that explains different sections).
- Survey Details need to be shown i.e. dates when the survey were conducted and how were the response from users, etc.
Summary Graphics:
- We need a summary graphic and numerical scores for 10 major categories that have 7-point scale questions (3, 2, 1, 0, -1, -2, -3), 3 indicates “Very Satisfied” and -3 indicates “Very Dissatisfied” (please see page 8 in the attached PDF to see how a user selects a rating for a survey question).
- For these major categories: show the percentile rankings (how the building compares to others) and the average for all other buildings (benchmark) and the percentage satisfied (see the provided example - page 13 in pdf), this should be at least numerical and possibly graphical.
- We are looking for your ideas on what other graphics in overview page will be useful (please also go through other graphs in page 15, 16 and 17).
- Looking for your help to make this graphic/page appealing.
2.1) Landing Page Expanded:
- Users will have the ability to click on any of the 10 categories in the summary graphic to drill-down to see more details such as overall scores for individual questions (and maybe with benchmarks).
- It could be an accordion to reveal more detailed questions, and/or links to open another screen to view more detailed results for individual questions (point 3).
- We are open to your thoughts/ideas!!
Filters:
- In these chart views, it would be good if we provide the ability to filter the results. For example, to see only results for a specific group in the buildings (such as location, job description, gender, age, etc).
- Users should have the ability to turn-on/off the filters.
Navigation:
- We need to have some navigation that follows the survey structure of categories (please see page 9 in pdf).
- Under each of the category there will be one or more questions.
3) Detailed Results for Individual Questions:
Reference: Page 10 in PDF
- This page could show detailed results for individual question results, with “branching” and text based results.
- These shows the results for individual questions, which are either 7-point scales, selection questions, or text boxes.
- We need to have some navigation that follows the survey structure of categories with one or more questions.
- We are looking for your ideas to represent them in a better way than what we currently have.
- A category within the survey result may have one or more questions, so we need to show different types of charts under a category (see below).
Branching Questions (Reference: Page 11 in PDF):
- Based on the answer to individual question, the branching questions are shown.
- Results for “branching questions” that only dissatisfied people respond to (To understand what branching questions are, please take a look at the current “Survey Results Report” or page 9 in pdf, in the left sidebar, you see sub-sections under “Office Layout, Thermal Comfort, Air Quality, Lighting...etc..), these contain few additional questions and these questions are answered by users who would have chosen “0, -1, -2 or -3” in 7-point scale in previous step).
- A category within the survey result may have one or more questions, so we need to show different types of charts under a category (see below).
Chart Types:
7 Point Scale Chart:
For this, we need a chart that will:
- Display the exact wording from the survey question
- Histogram for responses (shows the number of respondents with the percentage satisfied and dissatisfied) - please see page 10 in PDF
- Indicate the Total number of responses that were received
- Provide a way to view the branching follow-up questions (these would have been answered by dissatisfied occupants)
Single/Multiple Choice Chart:
The question would have allowed a user to select a single choice (could have been radio buttons, drop-downs etc), in those cases - we need following elements in the chart:
- Display the exact wording from the survey question
- Histogram for responses - please see page 11 in PDF
- Indicate the Total number of responses that were received.
- Provide a way to view the comments from the occupants who would have chosen “Other” incase if they didn’t appropriate answer in the list of options.
Other chart types:
- Please add any other charts that you think will be needed in this type of application.
Target Audience:
- Manufacturers, Owners/Operators/Tenants, Architects/Engineers, Commissioning Agents, Researchers/Utilities
Judging Criteria:
- Is the design styled to be appealing and desirable?
- Is the design visually resolved and does it evoke an emotional connection with the user?
- Does the design convey the function and use unambiguously and intuitively
- Does it clearly convey what the app is supposed to let you achieve / what problem it is designed to solve.
- Is it consistent of IA, visual and interaction design throughout the site?
- Does the design perform the function it was designed for?
- Is the design easy to use and understand?
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.