Challenge Overview
Welcome to the Engage Together® - Collaborative Communities Survey Tool UI Prototype Challenge, brought to you by Deloitte Pixel™!
The overall goal of this project is to redesign the survey tool that is currently included in an app for Engage Together® - a non-profit organization which fights human trafficking.
We’ve just wrapped up a design challenge for the Collaborative Communities survey tool and this prototype challenge will be implementing the winning design submission.
NOTE - This challenge has shorter review and appeal durations, reviewers please take note - thanks!
Challenge Description:
Challenge Requirements & Notes:
- The objective of this challenge is to build a responsive HTML5 web app using AngularJS (1.x) and Bootstrap
- App is expected to be locked to portrait orientation
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
- Desktop Size: 1280px width and height as required.
- Should be resizeable to function on a tablet (iPad, other), so please consider responsiveness while designing your solution.
Screen Requirements & Notes:
00a
-This is the splash screen
00b
- Once the splash screen disappears (typically 2 to 3 seconds), this intro screen is shown.
- The user will click ‘Get Started’ to move to the next step and start the survey
00c
- Clicking the ‘Get Started’ button will show the Group ID label and textbox
- The Group ID will should be pre-populated based on the current date
00d
- Intro screen for desktop (same as 00b)
00d-Intro-EventId-Desktop
- Same as 00c but for desktop
01a
- User needs to enter the following data:
-- Organization Name (mandatory)
-- Website (optional)
-- Type (single-select dropdown)
- The user will then click on > to move to 02a. At any stage, the user can click < to get back to the previous step
- Please add a "Next" button at the bottom of the screen to also allow the user to move to the next step. You may follow the style shown in "10 Styles - Engage Together.png" (attached).
01b
- Shows the validation error if organization name is not entered
- Validation should be applied to all mandatory fields
01c
- Shows the Organization name being entered
01d
- Same as 01a but for desktop
02a
- User needs to enter the following data
-- First Name (Mandatory)
-- Last Name (Mandatory)
-- Email (Mandatory)
-- Telephone (Optional)
-- Title (Optional)
- Make sure email format is validated
- Make sure telephone is formatted xxx-xxx-xxxx
02b
- Showing validations for mandatory params for this screen
02c
- Showing all mandatory params correctly filled in by the user
02d
- Same as 02a but for desktop
03a
- User can chose one or more of the options by clicking on them
03b
-Shows ‘Rescue’ operation being clicked by user
03c
- When a section such as ‘Rescue’ is clicked, the section is expanded as shown and it shows multiple checkboxes
- The user can select or de-select one or more checkboxes
- If the user clicks on the section header of an expanded section ("Rescue" in the screen design example), the section can be minimized to look how it does in 03a. If one or more boxes of a section are selected, the button shown in 3a should be blue (to indicate one or more boxes are selected under it).
03d
- Showing multiple expanded sections
03e
- Shows multiple expanded section in a scrolled state
04a
- The user can choose more than one option (i.e. more than one age group), but they must at least choose one of each demographic:
-- Age (chose one or more of the options)
-- Citizenship (chose one or more of the options)
-- Sex (chose one or more of the options)
04b
- Showing validations for mandatory params
04c
- Showing filled data
05a
- User can click any of the buttons
- Please rename the 2nd button to "Add by Zip Code" (remove the City part of the text for this button).
05b
- All other items should be disabled until the user has chosen a ‘Country’
- Once the user choses ‘Country’, the state dropdown and all other fields will be enabled
- Country and state are mandatory and must be entered to continue. Other fields are optional
05c
- Country and State should be enabled on load. Default "Country" value should be "United States".
- The user should then be able to enter County/ City or both. Note that County and City are optional
- The user can then click ‘Add’ and they will be taken to 05d
05d
- Shows a list of regions entered in previous step
05e
- Country and Zip Code should be enabled on load. Default "Country" value should be "United States".
- Please reverse the title of the input frame to "Add by Zip Code fields (Zip Code should come first, and City should be disabled until Zip Code is entered)
- User can change Country if needed, and then enter Zip Code.
-The remaining fields, City / State / County, should be auto-populated based on the entered Zip Code.
- Once the user has entered Zip Code above, it should then show the following fields in read only mode
-- City
-- State
-- County
06
- Show a textbox allowing user to add comments. The placeholder text must be removed as soon as the user starts typing. - Assume the max limit of 500 characters. The use can hit ‘Submit’ to submit the survey.
07
- Thank you screen
NOTE: Any other screens (08 onwards) are NOT in scope for this challenge (they will be completed in a seperate F2F challenge).
Supporting Documents:
- Winning Designs for app
Target audience:
- Individuals serving within existing anti-trafficking (or related) efforts - across all sectors (i.e. law enforcement, nonprofits, educators, etc.) In other words, individuals who will understand the purpose and lingo of this survey, and will be the beneficiaries of the end deliverable.
KEY CONSIDERATIONS:
- The prototype must be responsive and built using HTML5 / CSS / Angular.js. Use of Angular is REQUIRED
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Your HTML code must be valid HTML5 and follow best practices
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent).
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
JavaScript Libraries/Plugins:
All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available, and do not have copyright statements or author recognition requirements anywhere in the code.
Browser Requirements:
Desktop (latest versions)
- Chrome
- Safari
- Firefox
- IE11
Final Submission Guidelines
Submission Deliverables:
- A complete list of UI prototype deliverables can be viewed at: UI Prototype Tuorial
Final Submission:
- For each member, the final submission should be uploaded to: Online Review Tool