Challenge Summary
Welcome to "Topcoder Checklists Concept Ideation Challenge". In this challenge we are looking for your creativity to come up with ideas on how to design checklists for the community members and Connect customers. This is a new feature Topcoder is developing and we need your help to come up with different explorations on how they would work.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge. Feel free to ask any questions in the challenge forum.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages havecorrect flow! Use correct file numbering. (00, 01, 02, 03).
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages havecorrect flow! Use correct file numbering. (00, 01, 02, 03).
Project Background
Workflow
In this challenge we would like to explore work requirement flow and member profile flows. The flow steps are not fixed/ predefined - you can come up with other different steps in order to show how a checklist (tasklist) gets completed. Below are our proposed flows:
Work requirement flow (Customer)
A customer’s checklist might refer to a couple of steps required for him to complete, in order to create a project in Connect. For example the tasks in a list can be the following:
You don’t have to design all these pages only one that you chose to show a task in progress of being completed, we are just giving the others as an example so you understand of what other steps can be.
Note: this is a concept ideation challenge, so you can come up with other ideas on what the checklist for the customers could be.
Complete profile flow (Member)
A member’s checklist might refer to completing his Topcoder profile before competing. For example the tasks in a list can be to complete the following:
You don’t have to design all these pages only one that you chose to show a task in progress of being completed, we are just giving the others as an example so you understand of what other steps can be.
Note: this is a concept ideation challenge, so you can come up with other ideas on what the checklist for the members could be.
User Roles
The target user for this challenge are new registrants, either Connect customers or community members, who joined the site and need to be guided to do certain things.
Challenge Architect / Copilot: they will complete the task lists in Connect
Member: they will complete the tasks listed in the Community site
Screens/Features
For this challenge, we would like you to design the checklist with different states and placed in the different screens mentioned above. Please show all the pages mentioned in the customer flow and member flow.
When you think at checklist, you should imagine something like Linkedln has. It is a list of tasks that needs to be completed by the user. The checklist should show:
In order to understand better how checklists work, please do your research on how Linkedln and other sites show them.
Places where a checklist can be displayed:
A checklist can be:
Note: you can use existing sources for the Community design dashboard and the Connect designs. They are in Sketch, but if you are working in another program, like PS, AI or XD, you can just re-use the attached JPGs and apply a close visual style to what we have. As this is a concept ideation challenge, we are interested more in the UX than the UI, which will be updated soon more. The style you see in those pages is the new Topcoder style, but we are still working on refining it.
Branding Guidelines
Branding guidelines: please follow a close style to the new one developed, which is found in the Connect and Community Designs Google Drive or you can check it on Marvel Handoff.
JudgingCriterias
Final Deliverables
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge. Feel free to ask any questions in the challenge forum.
Round 1
Submit your initial designs for checkpoint review.- Work requirement flow (Customer)
- Complete profile flow (Member)
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages havecorrect flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your final designs plus checkpoint feedback implemented:- Work requirement flow (Customer)
- Complete profile flow (Member)
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages havecorrect flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Objectives
- Web design
- Design of a checklist component and show its completion progress
- We are providing existing screens where you should integrate the component
Project Background
- The purpose of this project is to design a list of tasks to be completed by the users
- The tasks list will be displayed in Connect and the Community site
- The tasks list will be viewed by members and customers
Workflow
In this challenge we would like to explore work requirement flow and member profile flows. The flow steps are not fixed/ predefined - you can come up with other different steps in order to show how a checklist (tasklist) gets completed. Below are our proposed flows:
Work requirement flow (Customer)
- Customer lands on project dashboard
- Checklist is presented either on dashboard card or sidebar (we’d like to see both options) and the customer clicks on checklist item
- Check list item target is loaded (this is one of the pages mentioned below)
- Task is completed
- Customer goes back to dashboard
- Checklist is updated
A customer’s checklist might refer to a couple of steps required for him to complete, in order to create a project in Connect. For example the tasks in a list can be the following:
- Project name and type (Solutions, API Development, QA & Testing, Data Science)
- Project Details - this is a form
- Select device: web/ phone /tablet (icons to select option / dropdown)
- Add description (text area)
- Application goal (textbox)
- Notes
- Attachments
- Team Members (the customer can add more of his employees into Connect)
You don’t have to design all these pages only one that you chose to show a task in progress of being completed, we are just giving the others as an example so you understand of what other steps can be.
Note: this is a concept ideation challenge, so you can come up with other ideas on what the checklist for the customers could be.
Complete profile flow (Member)
- Member lands on dashboard
- Checklist profile is placed on the sidebar or dashboard or a challenge details page at one time (we’d like to see all options)
- Member clicks on checklist item
- Target page is shown (this is one of the pages mentioned below)
- Task is completed
- Member goes back to dashboard
- Checklist is updated
A member’s checklist might refer to completing his Topcoder profile before competing. For example the tasks in a list can be to complete the following:
- Basic Info
- Tracks and Skills
- Tools
- Email Preferences
- Payment Settings
- Notifications Settings
You don’t have to design all these pages only one that you chose to show a task in progress of being completed, we are just giving the others as an example so you understand of what other steps can be.
Note: this is a concept ideation challenge, so you can come up with other ideas on what the checklist for the members could be.
User Roles
The target user for this challenge are new registrants, either Connect customers or community members, who joined the site and need to be guided to do certain things.
Challenge Architect / Copilot: they will complete the task lists in Connect
Member: they will complete the tasks listed in the Community site
Screens/Features
For this challenge, we would like you to design the checklist with different states and placed in the different screens mentioned above. Please show all the pages mentioned in the customer flow and member flow.
When you think at checklist, you should imagine something like Linkedln has. It is a list of tasks that needs to be completed by the user. The checklist should show:
- Checklist name
- Overall progress for the entire checklist
- Individual progress of each task. This can be shown as percentage or using visual cues or both. Do your research and brainstorm about this.
- Any other info you find useful
In order to understand better how checklists work, please do your research on how Linkedln and other sites show them.
Places where a checklist can be displayed:
- Checklist on a Connect card
- Checklist in the Community and Connect sidebar
- Checklist on the community dashboard
- Checklist on a challenge details page (for a member to complete his profile)
- Note: for Connect, the card can be placed either on sidebar or on a Connect card and it should show only in one place at a time, however we would like to see both explorations. The same applies for the community part.
A checklist can be:
- Mandatory checklist - you have to finish all steps, in order
- Optional checklist - you can finish any step at any time
Note: you can use existing sources for the Community design dashboard and the Connect designs. They are in Sketch, but if you are working in another program, like PS, AI or XD, you can just re-use the attached JPGs and apply a close visual style to what we have. As this is a concept ideation challenge, we are interested more in the UX than the UI, which will be updated soon more. The style you see in those pages is the new Topcoder style, but we are still working on refining it.
Branding Guidelines
Branding guidelines: please follow a close style to the new one developed, which is found in the Connect and Community Designs Google Drive or you can check it on Marvel Handoff.
JudgingCriterias
- How much you explored the different options in showing a checklist
- How intuitive the experience is
- How easy is to locate the checklist and it’s progression
Final Deliverables
- All original source files.
- Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file, Sketch or Adobe XD
- All submission files.
- Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to keyla.blue1@gmail.com
- You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).
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.