Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to  FAST 24hrs - eRulemaking CAA Search Portal Design Challenge. This challenge will focus on designing the UI for a simple web application, purpose of the app will be to perform a search against pending EPA laws and regulations based on search criteria that aren’t available today, and see if and how it is related to Clean Air Act enforcement as well as show linkages from the laws or regulations to programs that might be related.

This is a FAST challenge, you have just 24hrs - show us what you got!
This is a TCO17 eligible design challenge!
We are really excited to see your designs for this challenge.

For this challenge, you will be designing the screens for a web application. 

Objective of this program:
The objective of this project is simple, the development of a search portal that allows users to perform a search against pending EPA laws and regulations based on search criteria that aren’t available today, and see if and how it is related to Clean Air Act enforcement as well as show linkages from the laws or regulations to programs that might be related.

Personas:
Some examples of what kind of people will use this web app and example situations where a search might happen:
- A business owner, who wants to know if there are rules pending that affect him or her business, according to NAICS code
- A concerned citizen, who wants to know if there are rules pending that affect the area in which he/she lives
- A concerned industry representative, who wants to know if the EPA program with which he/she must comply might be affected, according to program name
- A concerned scientist or other party, who wants to know if there are rules pending that affect a particular substance, according to substance name

For all personas, the following use cases are at a minimum supported:
- Search pre-rules, according to the attribute that concerns me me most (NAICS code OR Postal Zip Code OR Program Name OR Substance Name)
- View rules that match my search (bonus feature: also show why the match happened eg indicate what the search hit on: NAICS, Zip, Program, Substance)
- Click on a rule that seems relevant in order to learn more about it and see additional factors
- When viewing that rule:
- - - see the rule text, and,
- - - see also a clear indication that the rule affects or is impacted by substances that are listed in Section 7412(b) of the Clear Air Act, and
- - - See additional factors below the rule that may increase or decrease its relevance to the viewer, in particular, a list of programs associated with the rule

Challenge Assets:
Web Application Sketch (you have screen ideas and more help information / notes on the purpose of each elements on the page)
- High Level Flow

Design Guidelines:
- We would like to have modern designs
- Please have the screens of size 1280px width and height as required
- Make sure all the UI elements you design are scalable vectors, so we can resize as required.

Important Definitions:
CFR: Code of Federal Regulation. These are the actual rules we all follow, which are distilled from legislation
Rule: A proposed rule for consideration. Rules become CFRs
Proposed Rule: A rule that is not yet settled. Public can comment on rules before they become CFRs. We're focusing on these in this project.
CAA: Clean Air Act - sweeping legislation that has us track the greenhouse gases, ozone layer, haze, etc
Program: Programs can be reporting programs or permitting programs, but are ways that the EPA tracks pollutants.
Facility: These are regular old buildings and businesses, everything from Rite Aid to schools. Regulated sites and entities must report things under certain programs to the EPA. Eg a high school may have to report controlled lab substances like sulfur. Facilities are linked to programs (which can be linked to CFR by LRS).
Substances: A chemical. The SRS service links substances to programs and facilities.
NAICS: A code that indicates which industry the business is in.

Required Screens:
1. Homepage:
(Reference: Sheet 1 in google sheets)
- In this page, show a welcome message
- Before a user can begin the search, user will choose the state
- They will then enter the search criteria which includes the below:
- - - NAICS Code (Autocomplete on NAICS code and show the industry name to the right of the box (or in the box, doesn’t matter))
- - - Substance (Autocomplete if possible, else not)
- - - Program Name (Autocomplete)
- - - City, State or Street Address (have fields that would be appropriate here)
- "Go" button: when a user clicks on the this button, we retrieve the results from regulations.gov API
- You can take a look at the below reference for search page: this example reference search shows you how you can search for a facility. Don't need all these attributes, just included here for reference https://www.epa.gov/enviro/frs-query-page

2. Search Results:
(Reference: Sheet 2 in google sheets)
- We retrieve results from regulations.gov API
- See the provided excel sheet to see how the rules that match the search criteria will be listed.
- User will be able click on a rule to learn more about it, including relationship to programs, substances, facilities, etc

3. Rule Details:
(Reference: Sheet 3 in google sheets)
- This page will show the details about the rule.
- The rule details will include:
- - - Rule Docket Title
- - - Relationship to CAA
- - - Rule Text (ex: https://www.regulations.gov/document?D=EPA-HQ-OAR-2015-0355-0001)
- Show these “The following facilities in your area might be affected, if you searched geography:”, below this.
- - - Show list of facilities
- - - Provide option for the user to view each of these facilities in a map...clicking on a link / icon should allow them to view the location of the facility within a google map (similar to  4. Map but this will need to show just the location of the one that was just clicked)
- Show these text” More Information about this Rule and how it might affect you. Click a link for more data” below this we need to show a table with the following columns:
- - - Programs affected (Program names - list all the programs that are referenced by this rule. Will have to pull from the body text, and confirm by matching to known programs that are linked to the CFR listed for this rule)
- - - NAICS affected (NAICS codes - should be linkable through LRS. Not sure)

4. Map:
This will show a Map of the zipcode/whatever searched by the user, we just needThis need to show a list of all facilities that are participating in a program that is affected by this rule

Target Audience:
- Business owner, concerned citizen, concerned industry representative, concerned scientist or other party

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
- Keep your designs open, modern and clean

Stock Artwork:
We are allowing stock photos and stock icons for this challenge
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions   
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN

Judging Criteria:
- Overall User Experience and UI design
- Completeness and accuracy of the designs as defined in the attached requirements.
- How well your designs provide a consistent user flow and style
- How well your designs captures all the requirements.
- Any suggestions, interactions and user flows you recommend (provide any notes or comments for the client)
- Wow factor! We want to be impressed with the overall design and execution.
- Innovative ideas and ways to interact and handle the content. This could be via functionality and/ or UI elements.

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
You must upload your submission to InvisionApp so we can provide direct feedback on your designs.

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. See more information about Final Fixes

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2017 TopCoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar
  • Sketch

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30055708