Challenge Summary
Welcome to QED - SHARE Web Application Design Challenge.
We need to build a short website and a web application (portal) that will allow users (primarily survey respondents) to see the results of the survey they took, compare their responses to others, and begin a conversation around the results. Users should have a nice visualization of the collected data, we need your help!
Best of luck!
1. Website > Home (Desktop and Phone)
4. Portal > Login (Desktop and Phone)
5. Portal > Dashboard (Desktop and Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
2. Website > Contact (Desktop and Phone)
3. Website > FAQ (Desktop and Phone)
4. Portal > Login (Desktop and Phone)
5. Portal > Dashboard (Desktop and Phone)
6. Portal > Reports (Desktop and Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to come up with the look and feel of a website and a webapp. Donors, beneficiaries and QED will use this application for data monitoring purposes mostly, to ease out the results of surveys. Both sites must be thought and conceived as responsive (desktop and phone — all screens).
Workflow
- User performed a face-to-face interview with QED staff, replying a survey. After finishing he/she receives a code (doesn’t need a design).
- User lands in the home page, can see an informative page with short navigation, including a link to the portal/webapp (to see survey results).
- Once user activates the portal link, it opens the portal access screen.
- User performs login through an access code he/she previously received through private contact.
- User can see a dashboard with results, message/feedback area to exchange ideas and compare results to other respondents.
Concept Goals
Overall, this product will address the issue that often times, people take surveys and never know what happens to their answers and generally are not included in the conversation. This is a service to our donors.
From users perspective, donors will perform an evaluation through replying a provided survey by QED staff (face-to-face, outside the portal). Donors will receive richer information from their evaluation effort in the webapp/portal. Beneficiaries benefit because they actually get something in return for the data they give us when they respond to an in-depth interview, focus group discussion or survey. QED staff benefit because reports become a part of change, rather than something filed and archived.
We envision two areas overall to accomplish our project goals:
SHARE Website
Site available to the public, informative page with link to the webapp/portal.
SHARE Webapp/Portal
Dashboard-like look and feel. Suitable for reports and management features.
As for style, we prefer flat/solid/clean design without looking too dull. Professional but interesting.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
1. Home (Desktop and Phone)
Create an informative landing page. Use the provided document data to be implemented as an interesting infographic http://take.ms/OI31X.
Create a space for qualitative stories, such as video of some of the most poignant responses, something very attractive (see the reference section but do not just copy)
Navigation should include: Contact QED, FAQ and a link to “Survey Respondent Portal”.
Avoid creating a “salesy products” kind of generic page. It should be original content wisely using the provided information as infographic.
2. Website > Contact QED (Desktop and Phone)
This page allows the user to fill a form with:
- Name.
- Email.
- Subject.
- Message.
- Send button.
User should be able to see an address and phone contact numbers.
3. Website > FAQ (Desktop and Phone)
This page shows the user most frequent questions and answers, how to enter code, what to do if you forgot code, among other topics.
4. Portal > Login (Desktop and Phone)
The webapp/portal will have four user roles: donor, beneficiary, QED staff and admin.
- Beneficiary will access a survey results page (only one page) connected to his/her access code.
- Admin, QED staff and donors share the same access privileges. They have access to survey replies from all portals.
- Admin has an additional unique feature: reports.
This page is the entrance to the dashboard. Simply have a text input where user can enter a given access code.
Add a ”I forgot my code” link.
5. Portal > Dashboard (Desktop and Phone)
Once user is logged in, system automatically recognizes the user role.
Navigation and look & feel should be different than the website since this is a private area (dashboard-like): Dashboard, Reports, Additional Resources.
5.1. Dashboard - Beneficiary view
This page will show the results of the survey that the user participated in, connected to his/her access code.
Survey Results
- Typical content of a survey would be this http://take.ms/8kgcm.
- The visuals should highlight which 5 replies selected by the user.
- Show a visual that can hold N amount of questions. In the provided sample there’s one single question but there could be from 1 to N. Provide a scenario of 20 questions as for this challenge.
- This data should be displayed in table form, graphical form too, be creative with the possibilities of interesting data visualization for the user.
- Note: users won’t take any surveys in the whole experience overall, just to make it clear. They see results only.
Feedback
Create a comments section below the survey results that allows the user to:
- See a list of comments. No profile pic, no name (users are anonymous), just a “Respondent” label for user, date and comment content.
- Leave new comments.
- Reply comments (should display indentation).
5.2. Dashboard - QED staff/donor/admin view
- User will see a list of available portals/surveys. The list should consist of:
-- Name/title.
-- Location (State, city).
-- Date of survey.
-- Link to go to details view.
- Details view of a selected portal would be the same as 5.1. Dashboard - Beneficiary view.
6. Portal > Reports (Desktop and Phone)
User (admin only) should see dashboard metric data related to the survey replies, usage, behaviour, among others. We are open to suggestions to the data that could be displayed here according to the ecosystem you’re designing for, please show us ideas.
Reference
The following content is meant to be reference and inspiration. DO NOT COPY ANYTHING.
- Aswat interactive quotes/data could be interesting for website home page.
Branding Guidelines
- Follow the attached branding book for colors, style and typography. Use Century Gothic font only from those ones available. You can mix it up with a web safe font if you want to, but there should be some main branding typography use with Century Gothic.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com). Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
QED organization, donors and beneficiaries related international development working field.
Judging Criteria
- How interesting and engaging is your survey results workflow?
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- Cleanliness of your graphics and design.
- Are mobile-first considerations appropriately applied to the design concept?
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 Sketch, Adobe Photoshop or Illustrator. Layers should be named and well organized.
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.
We need to build a short website and a web application (portal) that will allow users (primarily survey respondents) to see the results of the survey they took, compare their responses to others, and begin a conversation around the results. Users should have a nice visualization of the collected data, we need your help!
Best of luck!
Round 1
Submit your design for a checkpoint feedback.1. Website > Home (Desktop and Phone)
4. Portal > Login (Desktop and Phone)
5. Portal > Dashboard (Desktop and Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
1. Website > Home (Desktop and Phone)2. Website > Contact (Desktop and Phone)
3. Website > FAQ (Desktop and Phone)
4. Portal > Login (Desktop and Phone)
5. Portal > Dashboard (Desktop and Phone)
6. Portal > Reports (Desktop and Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to come up with the look and feel of a website and a webapp. Donors, beneficiaries and QED will use this application for data monitoring purposes mostly, to ease out the results of surveys. Both sites must be thought and conceived as responsive (desktop and phone — all screens).
Workflow
- User performed a face-to-face interview with QED staff, replying a survey. After finishing he/she receives a code (doesn’t need a design).
- User lands in the home page, can see an informative page with short navigation, including a link to the portal/webapp (to see survey results).
- Once user activates the portal link, it opens the portal access screen.
- User performs login through an access code he/she previously received through private contact.
- User can see a dashboard with results, message/feedback area to exchange ideas and compare results to other respondents.
Concept Goals
Overall, this product will address the issue that often times, people take surveys and never know what happens to their answers and generally are not included in the conversation. This is a service to our donors.
From users perspective, donors will perform an evaluation through replying a provided survey by QED staff (face-to-face, outside the portal). Donors will receive richer information from their evaluation effort in the webapp/portal. Beneficiaries benefit because they actually get something in return for the data they give us when they respond to an in-depth interview, focus group discussion or survey. QED staff benefit because reports become a part of change, rather than something filed and archived.
We envision two areas overall to accomplish our project goals:
SHARE Website
Site available to the public, informative page with link to the webapp/portal.
SHARE Webapp/Portal
Dashboard-like look and feel. Suitable for reports and management features.
As for style, we prefer flat/solid/clean design without looking too dull. Professional but interesting.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
1. Home (Desktop and Phone)
Create an informative landing page. Use the provided document data to be implemented as an interesting infographic http://take.ms/OI31X.
Create a space for qualitative stories, such as video of some of the most poignant responses, something very attractive (see the reference section but do not just copy)
Navigation should include: Contact QED, FAQ and a link to “Survey Respondent Portal”.
Avoid creating a “salesy products” kind of generic page. It should be original content wisely using the provided information as infographic.
2. Website > Contact QED (Desktop and Phone)
This page allows the user to fill a form with:
- Name.
- Email.
- Subject.
- Message.
- Send button.
User should be able to see an address and phone contact numbers.
3. Website > FAQ (Desktop and Phone)
This page shows the user most frequent questions and answers, how to enter code, what to do if you forgot code, among other topics.
4. Portal > Login (Desktop and Phone)
The webapp/portal will have four user roles: donor, beneficiary, QED staff and admin.
- Beneficiary will access a survey results page (only one page) connected to his/her access code.
- Admin, QED staff and donors share the same access privileges. They have access to survey replies from all portals.
- Admin has an additional unique feature: reports.
This page is the entrance to the dashboard. Simply have a text input where user can enter a given access code.
Add a ”I forgot my code” link.
5. Portal > Dashboard (Desktop and Phone)
Once user is logged in, system automatically recognizes the user role.
Navigation and look & feel should be different than the website since this is a private area (dashboard-like): Dashboard, Reports, Additional Resources.
5.1. Dashboard - Beneficiary view
This page will show the results of the survey that the user participated in, connected to his/her access code.
Survey Results
- Typical content of a survey would be this http://take.ms/8kgcm.
- The visuals should highlight which 5 replies selected by the user.
- Show a visual that can hold N amount of questions. In the provided sample there’s one single question but there could be from 1 to N. Provide a scenario of 20 questions as for this challenge.
- This data should be displayed in table form, graphical form too, be creative with the possibilities of interesting data visualization for the user.
- Note: users won’t take any surveys in the whole experience overall, just to make it clear. They see results only.
Feedback
Create a comments section below the survey results that allows the user to:
- See a list of comments. No profile pic, no name (users are anonymous), just a “Respondent” label for user, date and comment content.
- Leave new comments.
- Reply comments (should display indentation).
5.2. Dashboard - QED staff/donor/admin view
- User will see a list of available portals/surveys. The list should consist of:
-- Name/title.
-- Location (State, city).
-- Date of survey.
-- Link to go to details view.
- Details view of a selected portal would be the same as 5.1. Dashboard - Beneficiary view.
6. Portal > Reports (Desktop and Phone)
User (admin only) should see dashboard metric data related to the survey replies, usage, behaviour, among others. We are open to suggestions to the data that could be displayed here according to the ecosystem you’re designing for, please show us ideas.
Reference
The following content is meant to be reference and inspiration. DO NOT COPY ANYTHING.
- Aswat interactive quotes/data could be interesting for website home page.
Branding Guidelines
- Follow the attached branding book for colors, style and typography. Use Century Gothic font only from those ones available. You can mix it up with a web safe font if you want to, but there should be some main branding typography use with Century Gothic.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com). Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
QED organization, donors and beneficiaries related international development working field.
Judging Criteria
- How interesting and engaging is your survey results workflow?
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- Cleanliness of your graphics and design.
- Are mobile-first considerations appropriately applied to the design concept?
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 Sketch, Adobe Photoshop or Illustrator. Layers should be named and well organized.
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.