Challenge Summary
Welcome to the Engage Together® - Collaborative Communities Survey Tool Redesign 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.
For this first design challenge, we want to redesign their current Collaborative Communities survey tool. This current version is a simple intake form for collecting data. The goal is to improve this survey to make it fast and intuitive for users to complete. We’re looking for some basic data validation and creative ideas for entering geographic coverage data.
You will be provided with screenshots for the current app, those screenshots can be used for content (data fields) and style guide as the client like the current colors, but your job will be to improve the overall UI/UX of this responsive app. Good luck, we look forward to seeing your creative ideas!
00: Token Generation
01 Survey Introduction:
02 Basic Organization Details:
03 Primary Point of Contact Details:
04 Programmatic Scope:
05 Demographic Scope:
06 Geographic Scope:
- If you have time - 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).
00: Token Generation
01 Survey Introduction:
02 Basic Organization Details:
03 Primary Point of Contact Details:
04 Programmatic Scope:
05 Demographic Scope:
06 Geographic Scope:
07 Style Tile
- If you have time - 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 Description:
The goal of this challenge is to redesign the current Collaborative Communities survey tool for Engage Together®. The current version is a simple form for collecting data (see shared screenshots).
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX). The goal is to improve this survey to make it fast and intuitive for users to complete. We’re also looking for some basic data validation and creative ideas for entering geographic coverage data.
Design Notes:
- This is a responsive HTML5 web App.
- 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.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Goals:
1. Create a design that makes it fast and easy for a user to take the survey (improve the UI / UX).
2. Simplify the process of entering geographic area served:
- Users can enter geographic info via this hierarchy: Country -> State -> County -> City
-- Note: Not all users will drill down all the way. They should have the option to stop at any level from State and below. In other words, an organization that serves an entire state can Select State -> All Counties if they serve an entire state and the app shouldn’t require they go any further.
-- Note #2: The current survey doesn’t ask for country since we currently focus on the US. However, please make sure to include country as something the user can select at the highest level. This will allow for future usage when multiple countries are supported.
3. The survey needs to be responsive and look good on a desktop, not just a mobile device like the current design does.
4. Branding – the client likes their current colors and logo, but we are flexible on other areas of the design and open to suggestions for the designers.
Use Cases:
Although the current screenshots show all the required fields we need to collect, we want you to think through the way we are collecting this information, in what order, and in what way to make sure it is easy to fill out for a users who might serve their communities differently. We also want an end result (for each of the organizations) to easily be visualized in a heat map showing what demographic and programmatic services are provided in each of the regions (country, state, and all the way to county level)
Example Use Case:
Organization 1 is a larger non-profit, they provide services in State A and B.
- In State A they only serve county 1, 2, and 5
--- For county 1 and 2 they provide services X, Y only for Female adults
--- For County 5 they provide services X but for both Male and Female
- In State B they serve all counties
--- For all counties in state B they provide service X for all demographic
Organization 2 is a small local church, they provide services in county 1 and 2 in state C
- In county 1 and 2 they serve X, Y, C for all demographic
Organization 3 is a group of high schools, they provide services in county 1 and 2 in state C
- In county 1 they provide service X and Y and only for Female Children
- In county 2 they provide service X but for men and Female (of all ages)
- In county 2 they also provide service Y but only for adult Female
Required Data to Collect:
IMPORTANT: The attached screenshots and the numbers below are from the current survey tool only. You are welcome to completely re-design this survey and to change the order this data is collected in to improve the user experience! In fact, we’d LOVE to see your creative ideas on the best user flow to collect this survey data. Please do not limit yourself to following the existing survey flow - the main goal is to design a survey that makes collecting this information as simple as possible. We’re open to your ideas and suggestions!
00: Token Generation
- Please refer to 00 Token Screen.png
- Please have it follow all the below/above mentioned guidelines for branding, etc.
- User needs the ability to generate tokens that can be shared with users.
- Each token can be used to complete a survey one time (behavior is similar to a temporary password).
Notes:
- The purpose of this screen is to allow an admin user to generate tokens that can each be used 1 time to take the survey (the tokens will be handed out at events to specific people).
- These tokens are sort of like a temporary password.
- The goal is to make sure only approved people complete the survey.
- If YOU can think of any other interested ways to accomplish this we’re open to process or UX improvements.
01 Survey Introduction:
- Please refer to 01 Intro Screen.png
- User needs to fill in a Meeting ID; it can be auto populated with the current date (we’re open to your creative ideas on alternative ways to easily fill in the Meeting ID).
- You can think of “Meeting ID” as an identifier for a specific event. For example, if the client is hosting an event
02 Basic Organization Details:
- Please refer to 02 Step One.png
- User needs to fill Basic Organization Details:
-- Organization Name.
-- Organization Type. (Drop Down List)
-- Website.
03 Primary Point of Contact Details:
- Please refer to 03 Step Two.png
- User needs to fill Primary Point of Contact:
-- Salutation. (Drop Down List)
-- Last Name.
-- First Name.
-- Title.
-- E-Mail.
-- Telephone.
- Please make sure to capture error validation for required fields if they are not filled.
04 Programmatic Scope:
- Please refer to 04 Step Three.png
- User needs to fill in Programmatic Scope. Programmatic scope refers to the type of services an organization provides (this could include 1 or more of the following programmatic categories / sub-categories):
-- Prevention:
---- Awareness.
---- Demand.
---- Vulnerability.
-- Identification:
---- Training.
---- Outreach.
-- Rescue:
---- Intervention.
---- Temporary Shelter.
---- Services.
---- Victim Advocates.
-- Restoration:
---- Aftercare.
---- Reintegration.
-- Reforms:
---- Legal.
---- Policy.
---- Systems.
05 Demographic Scope:
- Please refer to 06 Step Five.png
- User needs to fill Demographic Scope. Demographic Scope refers to the demography of the people the organization serves (this could include 1 or more of the following demographic categories):
-- Adults
-- Children
-- Youth
-- Citizens
-- Foreign Nationals
-- Male
-- Female
06 Geographic Scope:
- Please refer to 07 Step Six-A.png & 07 Step Six-B.png & 07 Step Six-C.png
- User needs to fill in Geographic Scope for their organization (the area the organization covers). An organization may provide services in 1 or more geographic areas. They may serve an entire state, or only specific counties within a state. The end goal of this survey is to identify the coverage area for the organization (it will eventually be mapped and compared to coverage areas of similar organizations).
-- Country:
---- State 1:
-------- Country 1
-------- City 1 (optional)
- There should also be the option to add additional geographic areas of coverage (i.e. State 2, State 3, etc).
- NOTE: We are looking for your creative ideas and suggestions to make entering geographic coverage areas intuitive and easy for the users!
07 Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers
- Explore these references to learn more about style tiles: Reference 1, Reference 2
Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)
Typography:
We would like you to identify and define the list of fonts and the specific color, font size used:
- Headers
- Sub-headers.
- Paragraphs.
- etc.
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
Supporting Documents:
- Screenshots for current app that we need to redesign (screenshots.zip).
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.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Completeness and accuracy of the designs.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Stock Artwork:
- 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
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.
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.
For this first design challenge, we want to redesign their current Collaborative Communities survey tool. This current version is a simple intake form for collecting data. The goal is to improve this survey to make it fast and intuitive for users to complete. We’re looking for some basic data validation and creative ideas for entering geographic coverage data.
You will be provided with screenshots for the current app, those screenshots can be used for content (data fields) and style guide as the client like the current colors, but your job will be to improve the overall UI/UX of this responsive app. Good luck, we look forward to seeing your creative ideas!
Round 1
Submit your initial design for a checkpoint feedback:00: Token Generation
01 Survey Introduction:
02 Basic Organization Details:
03 Primary Point of Contact Details:
04 Programmatic Scope:
05 Demographic Scope:
06 Geographic Scope:
- If you have time - 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 checkpoint feedback:00: Token Generation
01 Survey Introduction:
02 Basic Organization Details:
03 Primary Point of Contact Details:
04 Programmatic Scope:
05 Demographic Scope:
06 Geographic Scope:
07 Style Tile
- If you have time - 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 Description:
The goal of this challenge is to redesign the current Collaborative Communities survey tool for Engage Together®. The current version is a simple form for collecting data (see shared screenshots).
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX). The goal is to improve this survey to make it fast and intuitive for users to complete. We’re also looking for some basic data validation and creative ideas for entering geographic coverage data.
Design Notes:
- This is a responsive HTML5 web App.
- 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.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Goals:
1. Create a design that makes it fast and easy for a user to take the survey (improve the UI / UX).
2. Simplify the process of entering geographic area served:
- Users can enter geographic info via this hierarchy: Country -> State -> County -> City
-- Note: Not all users will drill down all the way. They should have the option to stop at any level from State and below. In other words, an organization that serves an entire state can Select State -> All Counties if they serve an entire state and the app shouldn’t require they go any further.
-- Note #2: The current survey doesn’t ask for country since we currently focus on the US. However, please make sure to include country as something the user can select at the highest level. This will allow for future usage when multiple countries are supported.
3. The survey needs to be responsive and look good on a desktop, not just a mobile device like the current design does.
4. Branding – the client likes their current colors and logo, but we are flexible on other areas of the design and open to suggestions for the designers.
Use Cases:
Although the current screenshots show all the required fields we need to collect, we want you to think through the way we are collecting this information, in what order, and in what way to make sure it is easy to fill out for a users who might serve their communities differently. We also want an end result (for each of the organizations) to easily be visualized in a heat map showing what demographic and programmatic services are provided in each of the regions (country, state, and all the way to county level)
Example Use Case:
Organization 1 is a larger non-profit, they provide services in State A and B.
- In State A they only serve county 1, 2, and 5
--- For county 1 and 2 they provide services X, Y only for Female adults
--- For County 5 they provide services X but for both Male and Female
- In State B they serve all counties
--- For all counties in state B they provide service X for all demographic
Organization 2 is a small local church, they provide services in county 1 and 2 in state C
- In county 1 and 2 they serve X, Y, C for all demographic
Organization 3 is a group of high schools, they provide services in county 1 and 2 in state C
- In county 1 they provide service X and Y and only for Female Children
- In county 2 they provide service X but for men and Female (of all ages)
- In county 2 they also provide service Y but only for adult Female
Required Data to Collect:
IMPORTANT: The attached screenshots and the numbers below are from the current survey tool only. You are welcome to completely re-design this survey and to change the order this data is collected in to improve the user experience! In fact, we’d LOVE to see your creative ideas on the best user flow to collect this survey data. Please do not limit yourself to following the existing survey flow - the main goal is to design a survey that makes collecting this information as simple as possible. We’re open to your ideas and suggestions!
00: Token Generation
- Please refer to 00 Token Screen.png
- Please have it follow all the below/above mentioned guidelines for branding, etc.
- User needs the ability to generate tokens that can be shared with users.
- Each token can be used to complete a survey one time (behavior is similar to a temporary password).
Notes:
- The purpose of this screen is to allow an admin user to generate tokens that can each be used 1 time to take the survey (the tokens will be handed out at events to specific people).
- These tokens are sort of like a temporary password.
- The goal is to make sure only approved people complete the survey.
- If YOU can think of any other interested ways to accomplish this we’re open to process or UX improvements.
01 Survey Introduction:
- Please refer to 01 Intro Screen.png
- User needs to fill in a Meeting ID; it can be auto populated with the current date (we’re open to your creative ideas on alternative ways to easily fill in the Meeting ID).
- You can think of “Meeting ID” as an identifier for a specific event. For example, if the client is hosting an event
02 Basic Organization Details:
- Please refer to 02 Step One.png
- User needs to fill Basic Organization Details:
-- Organization Name.
-- Organization Type. (Drop Down List)
-- Website.
03 Primary Point of Contact Details:
- Please refer to 03 Step Two.png
- User needs to fill Primary Point of Contact:
-- Salutation. (Drop Down List)
-- Last Name.
-- First Name.
-- Title.
-- E-Mail.
-- Telephone.
- Please make sure to capture error validation for required fields if they are not filled.
04 Programmatic Scope:
- Please refer to 04 Step Three.png
- User needs to fill in Programmatic Scope. Programmatic scope refers to the type of services an organization provides (this could include 1 or more of the following programmatic categories / sub-categories):
-- Prevention:
---- Awareness.
---- Demand.
---- Vulnerability.
-- Identification:
---- Training.
---- Outreach.
-- Rescue:
---- Intervention.
---- Temporary Shelter.
---- Services.
---- Victim Advocates.
-- Restoration:
---- Aftercare.
---- Reintegration.
-- Reforms:
---- Legal.
---- Policy.
---- Systems.
05 Demographic Scope:
- Please refer to 06 Step Five.png
- User needs to fill Demographic Scope. Demographic Scope refers to the demography of the people the organization serves (this could include 1 or more of the following demographic categories):
-- Adults
-- Children
-- Youth
-- Citizens
-- Foreign Nationals
-- Male
-- Female
06 Geographic Scope:
- Please refer to 07 Step Six-A.png & 07 Step Six-B.png & 07 Step Six-C.png
- User needs to fill in Geographic Scope for their organization (the area the organization covers). An organization may provide services in 1 or more geographic areas. They may serve an entire state, or only specific counties within a state. The end goal of this survey is to identify the coverage area for the organization (it will eventually be mapped and compared to coverage areas of similar organizations).
-- Country:
---- State 1:
-------- Country 1
-------- City 1 (optional)
- There should also be the option to add additional geographic areas of coverage (i.e. State 2, State 3, etc).
- NOTE: We are looking for your creative ideas and suggestions to make entering geographic coverage areas intuitive and easy for the users!
07 Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers
- Explore these references to learn more about style tiles: Reference 1, Reference 2
Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)
Typography:
We would like you to identify and define the list of fonts and the specific color, font size used:
- Headers
- Sub-headers.
- Paragraphs.
- etc.
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
Supporting Documents:
- Screenshots for current app that we need to redesign (screenshots.zip).
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.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Completeness and accuracy of the designs.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Stock Artwork:
- 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
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.