Challenge Summary
Welcome to ODKM Survey Responsive Website Design Challenge.
Organizational Development and Knowledge Management Maturity Model Survey would be the full name of the project, FYI. We need your wise skills to help us creating a concept around a very engaging and easy-to-follow survey process to attract potential clients to acquire more services based on a survey score. You’ll see more details below.
We’re open to suggestions regarding to the workflow and ideas about how to make this process very easy to take, making the user want to complete all the questions.
Best of luck!
1. Home (Desktop and Phone)
2. Survey Us (Desktop)
3. Survey Results (Desktop)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Home (Desktop and Phone)
2. Survey Us (Desktop and Phone)
3. Survey Results (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 original ideas around a survey process needed to be simple and efficient to capture information while keeping the user engaged.
Basically, we need to create a responsive website (desktop and mobile) that will serve an engaging survey to potential clients with the goal of providing an organization development / knowledge maturity diagnosis to then buy/acquire our complimentary services to help them improving their score.
Workflow
- User gets to our very attractive landing page with information about the service/survey.
- User starts the survey process.
- User replies all the answers .
- User finishes the survey and gets to see a final score.
- User should be presented with suggestions on how to improve score and also premium service proposal.
Concept Goals
People will use this to assess the OD/KM capacities of their organization against a standard set of criteria to understand what areas need more attention. This is done through a survey that contains several sections, each section contains several questions. We are concerned about the timing and the engaging level of this process, it should be very fluid and easy to follow.
We would like a website that both is visually appealing, simple, and interesting to the user. The topic could come across as boring, so we need the design to be interesting. Should almost feel like a game or Buzzfeed quiz where the user is motivated to keep answering questions to get their results. The ease of use, no extra/unnecessary screens/texts are key elements to keep in mind when coming up with a solution. Notice that making an interesting and engaging survey process is part of the judgement criteria, very important, we don't want people getting bored halfway through.
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.
- See Survey_Overview.pdf for questions reference.
- See Survey_Questions.pdf for questions reference.
- Screens organization/flow should follow the attached Flow.jpg drawing, welcome > survey > results.
1. Home (Desktop and Phone)
Create a very welcoming landing page. The user should understand at first sight he is about to take a survey that will help him/her diagnose their current situation and probably get help to improve. How can we convey this message in a simple way?
There should be a clear call to action element (button/link) to start the survey, e.g. “Discover”.
Survey_Overview document page #1 content should be part of the home/welcome page. Notice there is a nice graphic that explains the ranking of the model and also text. We’d suggest you to maybe use icons or create some sort of short infographic to illustrate this topic to the reader, not just copy/paste.
2. Survey (Desktop and Phone)
Keep in mind that it shouldn’t take more than five (5) minutes to reply all the questions. Focus on the simplicity of the process since users will need to reply a large amount of questions. How can we make this process friendly and engage the user to keep replying?
From the Survey_Questions document, please provide a survey that has those three sections but pick 5 questions per each. You need to display 15 questions total:
1. Processes: 5 random questions.
2. Culture: 5 random questions.
3. Systems: 5 random questions.
User must fill ALL the questions, they can’t be skipped.
Questions input are yes/no or checkbox type of answers.
Final question/input to field would be an email address, this one is optional for the user.
3. Survey Results (Desktop and Phone)
After finishing the survey, the user should be able to see a friendly and prominent result overview.
This score/result is determined by the responses of the survey which will let the user know which category the organization falls into. We need your help to let the user understand this through a graphical approach most likely, radar chart, spider chart or anything you can suggest. We would like to show which areas (processes, culture, or system) an organization is weakest in, and recommend improving this area.
Overall score/result should come with a message like: “Congratulations/thanks for taking the survey, the overall result indicates your organization is at Level 3 ~ Learning”. Level three here is just a reference, it could be one, two, four, etc, depending on the replied questions. After that, we would need an explanation of what the next level up (moving from 1 to 5) would look like, so they can see what their organization should aspire to be, you should probably use the KM Maturity Model graphic somehow to illustrate the scenario and * suggestions to get there *.
Content from pages #2, #3 and #4 from the Survey_Overview document should be wisely used here (* suggestions to get there *). Notice there is a column called “Steps to achieve this stage” which states the necessary steps for achieving that goal. That would be the suggestions the user should be seeing somehow in order to know what to improve.
Place the following message also somewhere on this page: "For more information and support on how to build your organization's knowledge management capacity, reach out to The QED Group, LLC (jdahnke@qedgroupllc.com)".
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
Any type of organization leads/managers roles, most likely NGO/government/consulting firm.
Judging Criteria
- How interesting and engaging is your survey completion process?
- 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.
Organizational Development and Knowledge Management Maturity Model Survey would be the full name of the project, FYI. We need your wise skills to help us creating a concept around a very engaging and easy-to-follow survey process to attract potential clients to acquire more services based on a survey score. You’ll see more details below.
We’re open to suggestions regarding to the workflow and ideas about how to make this process very easy to take, making the user want to complete all the questions.
Best of luck!
Round 1
Submit your design for a checkpoint feedback.1. Home (Desktop and Phone)
2. Survey Us (Desktop)
3. Survey Results (Desktop)
- 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
Submit your final design plus checkpoint feedback (ALL VIEWS).1. Home (Desktop and Phone)
2. Survey Us (Desktop and Phone)
3. Survey Results (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 original ideas around a survey process needed to be simple and efficient to capture information while keeping the user engaged.
Basically, we need to create a responsive website (desktop and mobile) that will serve an engaging survey to potential clients with the goal of providing an organization development / knowledge maturity diagnosis to then buy/acquire our complimentary services to help them improving their score.
Workflow
- User gets to our very attractive landing page with information about the service/survey.
- User starts the survey process.
- User replies all the answers .
- User finishes the survey and gets to see a final score.
- User should be presented with suggestions on how to improve score and also premium service proposal.
Concept Goals
People will use this to assess the OD/KM capacities of their organization against a standard set of criteria to understand what areas need more attention. This is done through a survey that contains several sections, each section contains several questions. We are concerned about the timing and the engaging level of this process, it should be very fluid and easy to follow.
We would like a website that both is visually appealing, simple, and interesting to the user. The topic could come across as boring, so we need the design to be interesting. Should almost feel like a game or Buzzfeed quiz where the user is motivated to keep answering questions to get their results. The ease of use, no extra/unnecessary screens/texts are key elements to keep in mind when coming up with a solution. Notice that making an interesting and engaging survey process is part of the judgement criteria, very important, we don't want people getting bored halfway through.
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.
- See Survey_Overview.pdf for questions reference.
- See Survey_Questions.pdf for questions reference.
- Screens organization/flow should follow the attached Flow.jpg drawing, welcome > survey > results.
1. Home (Desktop and Phone)
Create a very welcoming landing page. The user should understand at first sight he is about to take a survey that will help him/her diagnose their current situation and probably get help to improve. How can we convey this message in a simple way?
There should be a clear call to action element (button/link) to start the survey, e.g. “Discover”.
Survey_Overview document page #1 content should be part of the home/welcome page. Notice there is a nice graphic that explains the ranking of the model and also text. We’d suggest you to maybe use icons or create some sort of short infographic to illustrate this topic to the reader, not just copy/paste.
2. Survey (Desktop and Phone)
Keep in mind that it shouldn’t take more than five (5) minutes to reply all the questions. Focus on the simplicity of the process since users will need to reply a large amount of questions. How can we make this process friendly and engage the user to keep replying?
From the Survey_Questions document, please provide a survey that has those three sections but pick 5 questions per each. You need to display 15 questions total:
1. Processes: 5 random questions.
2. Culture: 5 random questions.
3. Systems: 5 random questions.
User must fill ALL the questions, they can’t be skipped.
Questions input are yes/no or checkbox type of answers.
Final question/input to field would be an email address, this one is optional for the user.
3. Survey Results (Desktop and Phone)
After finishing the survey, the user should be able to see a friendly and prominent result overview.
This score/result is determined by the responses of the survey which will let the user know which category the organization falls into. We need your help to let the user understand this through a graphical approach most likely, radar chart, spider chart or anything you can suggest. We would like to show which areas (processes, culture, or system) an organization is weakest in, and recommend improving this area.
Overall score/result should come with a message like: “Congratulations/thanks for taking the survey, the overall result indicates your organization is at Level 3 ~ Learning”. Level three here is just a reference, it could be one, two, four, etc, depending on the replied questions. After that, we would need an explanation of what the next level up (moving from 1 to 5) would look like, so they can see what their organization should aspire to be, you should probably use the KM Maturity Model graphic somehow to illustrate the scenario and * suggestions to get there *.
Content from pages #2, #3 and #4 from the Survey_Overview document should be wisely used here (* suggestions to get there *). Notice there is a column called “Steps to achieve this stage” which states the necessary steps for achieving that goal. That would be the suggestions the user should be seeing somehow in order to know what to improve.
Place the following message also somewhere on this page: "For more information and support on how to build your organization's knowledge management capacity, reach out to The QED Group, LLC (jdahnke@qedgroupllc.com)".
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
Any type of organization leads/managers roles, most likely NGO/government/consulting firm.
Judging Criteria
- How interesting and engaging is your survey completion process?
- 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.