Challenge Summary
Welcome to iOS Design - TC Challenge Tracker Design Concepts Challenge!
In this challenge we are looking for your help in creating a mobile application that will allow our clients to track their challenges from tablets and other mobile devices. We are looking for your help in creating a great customer experience for our clients to follow their projects with the community.
Please reference all of the relevant design direction, documents and inspiration that you need to have a successful submission for the challenge. Make sure you are reading the spec and information provided here carefully. Good luck and have fun!
Round 1
Submit your design for a Checkpoint feedback:
1. Dashboard.
2. Project Dashboard.
3. Project Detail Dashboard.
4. Challenge Detail Dashboard.
5. Project Gameplan Detail.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final Design plus any Checkpoint feedback:
1. Dashboard.
2. Project Dashboard.
3. Project Detail Dashboard.
4. Challenge Detail Dashboard.
5. Project Gameplan Detail.
6. Log In
7. Calendar
8. Alerts & Notifications
Additional Screens to Explore (Not required, but good to consider)
- Workflow status (A infographic page that shows a challenge workflow and status that includes Pre-Challenge Approval, Checkpoint Review, Final Review, Final Fix Review, and Approval)
- Detail screens that are expanded from challenge detail dashboard (Registrants, Countrries Participating, Submissions, Team List, Team Member detail, Chat & Messaging, Forum Management/ Posting)
- Chat: We'd like to explore adding in "chat" functionality similar to Slack as part of the project/ challenge management
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Description:
This challenge is focused on creating design concepts/visual ideas to create the challenge tracker tool for topcoder clients.
We are looking for you to provide design concepts and click-paths based on the provided user story.
We are looking for the [topcoder] design Community to help us with planning our new client "user experience" (UX) when interacting with Topdocer projects and challenges.
Supporting Documents:
- Branding Guideline (Invisionapp Link), please see Branding Guidelines section. (We are exploring a Version 2 of the Topcoder brand. This inital challenge is just an exploration. Please use the provided branding guideline for your designs. We DO NOT want to see existing Topcoder brand in your design submissions)
- Fonts (Invisionapp Link), please see fonts section.
- IA USER FLOW & DESIGN DIRECTION DOC (TC-Challenge-Tracker-UserFlow.pdf); This will give you an idea of how the screens are linking and working for the application. We will be focusing in a few key screens in this challenge. Make sure you follow the requirements outlined in the spec.
- Design Direction (TC-Challenge-Tracker-Design-Direction.pdf).
- Inspiration (Invisionapp Link), please see inspiration section.
Design Goals:
- Suggest user screen flows and navigation.
- What should the priority features be?
- How quickly could you find information?
- What is the best UX for a customer trying to launch a challenge?
Screen Sizes:
- Tablet Resolution: Design for iPad 2 Retina Display 2048px x 1536px.
Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
Use Case Scenario:
Adam is a account director at Saphire Worldwide. He has recently been using Topcoder for several of his current projects. Adam is interested in following, and tracking his projects that the Topcoder community is working on.
The Topcoder Challenge Tracker App allows Adam to gain valuable insight into his projects with Topcoder. After logging in to his account Adam is presented with a dashboard that gives him a high level understanding of his current engagement with Topcoder. He is able to view his active projects and challenges, have a current update on his budget and current spend, see any notifications or alerts for his projects, his team members, and his overall account information including # of projects/SOWs, burn rates, and budget alarms.
Organized by projects, Adam can browse thru his archived, and active projects. After finding the project he is looking for, Adam can click into a project to see the game plan, project budget, budget spend, project status, # of challenges run, draft challenges, open challenges, closed challenges, community participation metrics, team members (Copilots, Expert Services, Project Manager, and Account Director), and current phase of the project. At this level he is able to see the project game plan and challenges for each deliverable and milestones.
Clicking into a specific challenge, Adam is presented with a high level summary of the challenge goals, challenge documentation, and is able to track submissions, # of registrants, challenge phase, time left to submit, and manage forum activity.
Suggested Screens & Features:
This is a design concepts challenge and those are only suggested screens from us, so please feel free to add anything you think will work well for this app.
1) Dashboard:
The Topcoder Challenge Tracker App allows Adam to gain valuable insight into projects with Topcoder. After logging in to his account Adam is presented with a dashboard that gives him a high level understanding of his current engagement with Topcoder. He is able to view his active projects and challenges, have a current update on his budget and current spend, see any notifications or alerts for his projects, his team members, and his overall account information including # of projects/SOWs, burn rates, and budget alarms.
2) Project Landing Page:
Clicking into the "My Projects" section of the dashboard takes the user to an expanded project page. Here in a gallery or list view, Adam can browse thru the projects that he has going on with Topcoder. Organized by projects, Adam can quickly view all past and current projects he has with Topcoder. He can filter and browse projects in a list, or gallery view. Archived projects as well as current projects will be available in this view.
3) Project Detail Dashboard:
Organized by projects, Adam can quickly click into a project to see the game plan, project budget, budget spend, project status, draft challenges, active challenges, closed challenges, # of challenges run, community participation metrics, team members (Copilots, Expert Services, Project Manager, and Account Director), and current phase of the project. At this level he is able to see the project game plan and challenges for each deliverable and milestone.
4) Challenge Detail Dashboard:
Clicking into a specific challenge, Adam is presented with a high level summary of the challenge goals, challenge documentation, and is able to track submissions, # of registrants, challenge phase, time left to submit, and manage forum activity.
5) Project Gameplan Detail:
Clicking into a project asset or gameplan, Adam is taken to a detailed view of the document where he can read, and make comments on the document, as well as share it with other team members of the project.
6) Log In:
Provide a log in screen for the Challenge Tracker App
7) Calendar:
Several areas in the APP we have a calendar view. On both the project and challenge level, it is important to show milestones, meeting dates, review schedules, and other aspects of project and challenge management that the client can track against a calendar
8) Alerts & Notifications:
Explore how you can push notifications and alerts to the client on the various aspects of project and challenge management.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target Audience:
- Topcoder Customer – Topcoder Customers are the users that are interested in running challenges and utilizing the Topcoder community to complete projects.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
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.