THOLOS - Survey Application Wireframe Challenge

Welcome to THOLOS - Survey Application Wireframe Challenge!

In this challenge, we are looking for your help to come up with a set of wireframes for a web application that allows users to quickly set up and take surveys of products as they’re being tested.

We are looking for wireframe (Axure) solutions based on requirements from our client. We are also looking to the community to come up with interesting ideas for the workflow - we’re absolutely open to creative solutions!

At the end of this wireframe challenge, we are looking to have a complete solution for the user experience and flow of the application that can be used as input for our next design challenge.

Round 1

Submit your initial wireframes for Checkpoint feedback:
A- Survey Manager:
1- Login Screen.
2- Landing Page.
3- Create New Survey.
B- Participants:
1- Login Screen.
2- Profile Questions.
3- Landing Page.
4- Prototype Questions.
Notes.jpg: Any comments about your design for the Client.

Round 2

Your Final wireframes for all the required pages with all checkpoint feedback implemented:
A- Survey Manager:
1- Login Screen.
2- Landing Page.
3- Create New Survey.
4- Survey Details.
B- Participants:
1- Login Screen.
2- Profile Questions.
3- Landing Page.
4- Prototype Questions.
5- Post Testing Questions.
6- Thanks.
Notes.jpg: Any comments about your design for the Client.

Challenge Description:
This responsive web app is to help employees for a the personal care division of a major consumer company quickly set up and conduct surveys on products they’re testing. It will also allow the participants in the survey a quick and easy way to enter their answers to the product questions.

Screen Size:
- The Survey Manager screens are viewed on a computer: 1280px X  800px.
- The Participant screens are viewed on a smartphone in portrait view:  320px X 460px.

Important Wireframe Considerations:
- This is meant for a cross-platform mobile experience. Target portrait cellphone size, but keep both iPad width and landscape layout in mind as a down-the-road possibility.
- For mobile platform, assume the current OS for both iOS and Android.

Wireframe Expectations:
- Produce HTML click through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The app must be very easy to use and intuitive. Keep that in mind when designing your solution.
- This is a new application so there are no existing branding guidelines that need to be matched.
- Your wireframe must represent all the pages, functionality and flows as noted below. You should use that as a guide, but if there is a better way to display any information, feel free to show that on your wireframe.
- You must use wireframe notes on every single page you design to explain which items are addressed on that page, what you added/changed/removed, and generally just to make your idea easier to understand so that the client can provide constructive feedback.

Supporting Documents:
- User Workflow (THOLOS_User_Workflow.png).
- Personas (THOLOS_Personas.pdf).
- Profile Questionnaire (THOLOS_Profile_Questions.pdf).
- Prototype Questionnaire (THOLOS_Prototype_Questions.pdf).
- Post Testing Questions (THOLOS_post-testing-questions.pdf).

Suggested Screens:
A- Survey Manager:
Note:  design these screens to be used on the computer.

1- Login Screen:

• User ID.
• Password.
• Show error scenario on login.

2- Landing Page:

• Displayed after successfully logging in.
• Page displays a list of surveys grouped by status:
  • Closed surveys.
  • Published surveys.
  • Draft surveys.
• Each survey in the list will show:
  • Survey name.
  • Cell name.
  • Number of participants / number of completed surveys.
  • Note: clicking an item in this list displays screen 4- survey details.
• Button to Create New Survey.

3- Create New Survey:

• Fields for the following data:
  • Survey Name (required).
  • Cell Name (required).
  • Prototype Code.
    • Note: users can enter up to 3 prototype codes.
  • Number of Prototypes per Code.
  • Number of Participants in the survey.
• List of Questions:
  • Displays a library of 20 available questions grouped by:
    • Prototype questions.
    • Post-testing questions.
  • Users selects 7 prototype questions.
  • User selects 4 post-testing questions.
• Save.

4- Survey Details:

• Survey Name.
• Cell Name.
• Survey Status:
  • Draft.
• Created Date:
  • If status is Draft, show date created.
• Number of Participants / Number of Completed Surveys:
  • Note: for Draft surveys, number of completed survey is 0 (zero).
• Prototype Code(s).
• Number of each Prototype.
• List of Prototype Questions.
• List of Post-Testing Questions.
• Edit button.
• Download Participant Logins button.
• Publish button.

B- Participants:
Note: design these screens to be used on the smartphone.

1- Login Screen:

• User ID.
• Password.
• Submit.
• Show error scenario on login.

2- Profile Questions:

• Note: Only displayed after logging in for the first time.
• Show Profile Questions:
  • All fields are required.
  • See Profile Questions document for sample questions.
• Submit button:
  • Note: tapping Submit displays screen 3 - Landing Page.
• Show error scenario on submit.

3- Landing Page:

• Two Options:
  • Test a Prototype.
  • Prototype Testing Completed.
• If selects Test a Prototype, display:
  • Field to enter Prototype Code being tested.
    • Required field.
  • User uploads photo of Prototype being tested.
    • Photo is required.
  • Save.
    • Note: tapping save displays screen 4-Prototype Questions screen.
  • Show error scenario on Save.
• If selects Prototype Testing Completed:
  • User is taken to screen 5 - Post Testing Questions.

4- Prototype Questions:

• Displays Prototype Code user entered on screen 3 - Landing Page.
• Displays Prototype Questions the Survey Manager selected when creating the survey.
  • All fields are required.
  • Note: see Prototype Questions document for sample questions.
• User uploads photo of Prototype.
  • Required.
• Save.
  • Note: tapping save displays screen 3 - Landing Page.
• Show error scenario on Save.

5- Post Testing Questions:

• Displays Post-Test questions Survey Manager selected when creating the survey:
  • All fields are required.
  • See Post-Testing Questionnaire document for sample questions.
• Submit.
  • Note: tapping submit displays screen 6 - Thanks!
• Show error scenario on Save.

6- Thanks!

• Note: displayed when user Submits screen 5 -Post Testing Survey.
  • Text for the screen: We have successfully received your answers! Thanks for participating in our testing survey.

Target Audience:
This application will be used by both internal and external users. The two primary personas for this responsive web app are: Survey Manager (internal)  and Participant (external).

The Survey Manager will mainly be viewing the web app on a computer. The web app will allow him to quickly setup, publish a survey and download the data after the participants complete the survey.

The Participant will mainly be viewing the web app on a smartphone. The web app will allow her to quickly answer questions for the products she’s testing and send the results back to the company.

Judging Criteria:
Your submission will be judged on the following criteria:
- User Experience.
- Simplicity and Consistency.
- Completeness and accuracy of the wireframe.
- How well your wireframes provide a consistent user flow.
- How well you implement the idea.
- Any suggestions, interactions and user flow you recommend (provide any notes or comments for the client).

Submission & Source Files:
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Generated HTML files with all the requested contest requirements stated above.

Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.

Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.