Challenge Summary
Welcome to InnoCentive - Self-Service Challenge Creation UI Design Challenge. In this challenge, we are looking for storyboard designs based on the given wireframes,
About the Client:
Client is a one of the leading crowdsourcing company like topcoder where customer gets innovative solutions from the smartest people, members provide ideas and solutions to important business, social, policy, scientific, and technical challenges.
At the end of this challenge, we are looking for a modern, clean design that captures the possible interactions based on the wireframe!
Round 1
Submit your initial screen for Checkpoint feedback
1) Login
2) Dashboard
3) Create New Challenge
4) Challenge Details
Feel free to add any other additional screens that are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all required screens with all checkpoint feedback implemented.
1) Login
2) Dashboard
3) Create New Challenge
4) Challenge Details
5) My Challenges
6) My Organization Profile
7) Help
Feel free to add any other additional screens, which are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Currently, client handles the creation of a challenge internally as and when a customer approaches for solutions from the crowdsourcing community, going forward we are looking to allow the customers create the challenges themselves. Your designs need to improve and simplify overall user experience based on the given wireframes.
Design Guidelines:
- Looking for modern, intuitive user interface, application should be easy to use.
- We need simple but effective solutions! Have fun creating this - let us know how you think it should work!
- We have provided the wireframe from previous challenge to help you get started with your designs, please DO NOT COPY the screens as shown in the wireframes if you do - all your screens will look similar!
- Please follow the below branding guidelines!
- Have the size of the designs as given in the wireframes.
Branding Guidelines:
- Attached a variety of standard black & white logos in a wide range of formats and sizes.
- A sample header which we would like you to use..
- The new UX css for our main dashboard which will contain all of the important color information but our two base colors
- - Dark Blue: #194465 (primary/main color)
- - Green: #50853b (secondary/accent color)
Required Screens:
We need below screens to be designed...
0) General Requirements:
- Please use the header as mentioned in branding guidelines.
- We would like you to design the navigation that looks efficient and should be available in all pages except "login" page!
1) Login:
- This has the minimum details, please follow the wireframes.
- Also please design the error page, clicking on "Login" button and select "Case 2: Login Error" show the error message.
2) Dashboard:
Once a user logins, they will see the dashboard..
- This page gives an overall view of what challenges are currently open along with their progress, show us some interesting designs for the challenge progress!
- We need to show the draft/pending challenges.
- Each of the open challenges will have options to messages, from those messages - we show some of the latest messages here in dashboard.
- We are looking for your thoughts on how best to arrange all the above elements and feel free to add anything that you think is a benefit for users.
3) Create New Challenge:
This is one of the important page for this challenge, when user chooses to create a new challenge, we show this page..
- This is a six (6) step process..we would like to see the entire flow in your designs.
- In Step 5, on clicking "View Details" under "select the agreements" shows the agreement in pop-up, do you think we have any other better ways to show this (maybe modal)?
- In Step 6, we have the "Review" that allows user to review the details entered by them in the previous steps - you can just how this will look in your designs, not necessary to show all required details - if you are thinking of having collapsed/expand section like wireframes, then please one expanded section and others in collapsed view.
- Come up with a progress bar that helps users identify the step they are currently on, completed steps, etc..
- Each of the steps has "collective help information" which includes "Help, FAQ, Video and Examples" - show us how these would would look in your designs?
- For examples, you may probably use
- Each of the field has a pop-up which is shown on focus in the field or when the user clicks the "?" icon..how do you think we need to show this?
- When a user clicks "Save as Draft", we show them a confirmation that Draft was saved..how best can this information be shown, any simple, effective methods to show this confirmation message?
4) Challenge Details:
When a user clicks on the challenge name in "Dashboard", they are directed to this page
- This shows the overall details about the challenge, design an engaging user experience for this page
- Note that this page has couple of tabs which shows the submissions and messages - how should the user navigate to these pages?
Submissions:
- This reveals the submissions received for a challenge.
- Minimum details required for a submission are "Submission #, Submitted On, Submitted By, with options to Download and View"..
- How will the list and grid view look like?
Messages:
- Challenge participants/admins will have options to message within this open challenge
- Clicking on message thread will show more conversation within that and allows user to post and reply for messages
- "Post a Message" shows how a user can message.
- Feel free to improve the above steps - maybe club them into one, so as to give the user a better user experience
Add Supporting File:
- Users will have the ability to add supporting files to the challenge
- Come with ideas on how to simplify them.
5) My Challenges:
- This shows the challenges posted by the logged in user..
- How can better display the challenges in this page, should we follow the usual table styles or come up with any other design thoughts that you recommend?
- Show us how filters in this page will look like.
- Think on how the pagination needs to be shown along with their drop-down styles.
- User will have options in this page that helps them navigate to other pages
Edit Challenge:
- When a user clicks on "Edit" in any one in the list, then we show this page
- This is similar to "Create New Challenge" just that we won't have a progress bar..
- Any design thoughts on how each of the steps can be shown? We don't want you to show all the steps, just one step is fine - mainly looking for your thoughts on how steps/tabs can be handled.
6) My Organization Profile:
- This shows the organization profile to the user..and allows them to edit the details
- Show the default view with the all the details as shown in wireframe
7) Help:
- This shows all the help information for users.
- Help information will be organized based on topics
- Clicking on an item within the topic takes the user to detailed help page, show us how this would look in your designs.
Target Audience:
Existing and Potential Customers
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Does the screens capture all the above mentioned details?
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.