Challenge Summary
Welcome to CERFIB – Project Management Application Design Challenge!
The goal for this challenge is to create the look and feel for the major areas of the app, this UI will take data from Project Server Online and an associated SharePoint Project Site to drive its visual components. The experience will be a dashboard, card-based task management system, my tasks, and a new way to visualize a project plan from the perspective of the end-users.
It will allow them to work with these tasks via metadata, attachments, links, activities, lists, images, comments, timesheets / descriptions, but also maintain full fidelity to Project Server Online. It also includes a new way to visualize the entire plan, and filter out non-essential data, all using this card and micro-card based task viewing application.
You will be provided with wireframes to build the screens needed for this tool, those wireframes were built by the client.
Note: Please do not submit a colored version of wireframes as they are just meant to guide you, outline necessary screens, and further explain the application basics. You are highly encouraged to enhance the wireframes with your own design style / ideas / solutions during this design challenge.
01 Dashboard
02 Plans
03 Task Card
- 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).
01 Dashboard
02 Plans
03 Task Card
04 Search
05 My Tasks
06 Style Tile
- 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:
The goal of this product is to fill a gap in the market of project and task management. To date, project management has either maintained the rigid approach of formally managed and maintained project plans with little to no interaction with that plan by the users fulfilling the tasks. Modern tools have created Kanban style planning capabilities such as Trello, Office 365 Planner, etc. These tools are excellent for end-users to manage tasks with metadata and useful information, but leave that data isolated from a Project Manager’s ability to incorporate it into a larger plan that allows for resource, costing, portfolio reporting and management capabilities.
CERFIP is designed to bridge that gap by integrating the robust features of Project Server Online for costing, resource management, timesheets, portfolios, weighting, and deeper planning capabilities with the extremely flexible front-end plan boards and cards required by the end users. The robust front-end tasks are connected to the project plan and allow the project manager the ability to integrate only the data they require from these tasks back into their plan, but decouple the remaining task metadata for freedom of management by those users working on the tasks. The result is the best of both worlds, including an integrated site and location for synchronizing the plan, issues, documents, calendars, and more. This site contains all the traditional management capabilities of SharePoint, but also the infrastructure required to generate the user experience of the CERFIP Plan Board
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Notes:
- This is going to be a Web App.
- Desktop view: 1280px width and height as required.
- Make sure your design consider responsiveness and will look good on both tablet and mobiles.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
- Same color scheme across the app. (No defined color scheme)
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Required Screens:
- Please refer to CERFIP Wireframes.pdf you start working.
01 Dashboard:
- Please refer to page 12 in CERFIP Wireframes.pdf
- Navigation:
-- Support for standard SharePoint left-nav should be available.
- Favorites:
-- Users should be able to select a plan they have access to and mark is as favorite
- User Experience:
-- Favorite Plans are at the top of the main page.
-- Default displays Plans as cards and include a color-coded set of plan metadata. Data should include metric data from PWA about the project:
---- Meta data may be configurable or fixed, but should pull from the main project screen data in PWA to provide high-level information about the project
---- Color codes should represent total tasks, open tasks, overdue tasks, and completed tasks.
---- Other possible day 1 data: Percent Complete, Hours/Work remaining, Status (on track, in trouble, etc. – can we pull this from PWA?).
-- Display for ALL MY TASKS – better UX equivalent of the “Tasks” screen in PWA. Basically it shows each plan card where I HAVE open tasks in an expanded view so I can see the list of tasks under each plan, and jump quickly over to the Plan and card as needed.
-- Views – One View.
---- Metadata on the tasks should be: Start Date, Finish Date, Remaining Work Hours, and Percent Complete. (link directly to the task card).
-- Ability to create different views based on role or needs. PMs may want to see more overview details, while task users may want to see data filtered for their tasks specifically.
02 Plans:
- Please refer to pages 1-4 CERFIP Wireframes.pdf
- Creation:
-- A new plan can be created from PWA from an existing project (pop a screen with settings).
-- A new plan can be created from the main Plan and Dashboard let navigation.
-- Initially, new plans created outside PWA will use the default plan template.
-- A new plan can be created by copying an existing plan (only when in disconnected mode)
- Management:
-- Plans have an “Info” link at the top that pops a “task card” type interface that contains data about the plan (sourced in PWA or SP Site). Editable by proper permissioned users.
-- Plans have management settings that determine specifics of integration with PWA, Project Site, and Permissions. The goal is to flesh this out with as much OOB as possible (plan statement list with fields for CERFIP to use to determine settings. Ideally most OOB SP functions still usable via classic interface if desired. CERFIP should mostly be a wrapper around these underpinnings.
-- Swim lanes are editable buckets.
- End User Experience – Main View:
-- Labels are color coded visible attachments to task cards.
-- Swim lanes are visible buckets for cards. Drag and Drop.
-- Zoom in and out of the plan hierarchy.
-- Refine / filter by appropriate metadata (example: Assignee, status, ??).
- End User Experience – Project View:
-- Project View - All Tasks (Page 2 of wireframe)
-- Project View - My Tasks (Page 3 of wireframe)
-- Project View - All Open Tasks (Page 4 of wireframe)
- Messaging:
-- The plan board must allow for, and displays communication updates about the elements of the plan in a linear format. (Specific actions should be captured and displayed).
-- The plan should display a comments section (collapsible), and an activity stream.
-- The plan messages should be attached to the card (task) or the plan (site).
-- The plan view of all tasks must visually displays new update/message availability on each card.
-- The activity stream should report any plan or task activities chronologically.
- Navigation:
-- Left Navigation:
---- Create New Plan button launches the create new plan “task card” style UI.
---- Dashboard button takes you to the main plan dashboard
---- My tasks button takes you to the main “my tasks” location
-- In Page Navigation:
---- Top Plan navigation Contextual Links:
------ Plan: Links back to the main board.
------ Files: Links to the underlying plan doc library.
------ Discussion: Links to the plan discussion threads.
------ Project Site (TBD as this board technically represents a view of a project site) maybe this switches to classic site view.
- Integrations:
-- One Note:
---- One Note Ribbon ability to “send to CERFIP Plan”. Either as a task card or an item on an existing card.
03 Task Card:
- Please refer to pages 5-9 CERFIP Wireframes.pdf
- Creation:
-- Management Allowed: A task user must be able to create a new task and assign it as a sub-task to an existing “allowable” task. They should also be able to remove hours from the main task to assign them to the new subtask and push this data back to the project plan. PWA or similar should ensure messaging is sent to the PM.
-- Should be able to assign a task to multiple individuals.
-- Task Card Contains the following Tabs:
---- Tabs should contain notifications for items changed in the last 24 hours
------ Main (Page 5 of wireframe)
------ Activity (Page 6 of wireframe)
------ Comments (Page 7 of wireframe)
------ Attachments / Links (Page 8 of wireframe)
------ Project (Page 9 of wireframe)
---- Main Tab
------ Swimlane/Bucket, Status, Start & End Date
------ Title
------ Assignee(s) with links to their profiles
------ Preview attachment (if any)
------ Description
------ Checklist (if any)
------ Activity – last 3 elements with “more” link to Activity tab
---- Activity Tab
------ See wireframes
-- Ability to create tasks from Nintex or other workflows.
- User experience & Data:
-- Visual Indicator of approval (if required) of PWA data (timesheet, request additional time).
- Messaging:
-- The card’s main view must display a visual indicator that new messages / updates are available.
- Integrations:
-- Outlook Integration – two way integration between Outlook and CERFIP. Create from Outlook, update from outlook, and outlook tasks reflect CERFIP tasks and updates.
04 Search:
- We need to be able to perform search in this application with advanced options.
05 My Tasks:
- Please refer to pages 10 and 11 in CERFIP Wireframes.pdf
- Management:
-- Should there be any management settings?
- End-User Experience:
-- Users should be able to see Tasks in swim lanes by status
-- Users should be able to see Tasks by swim lane due date (week)
-- Users should be able to see Tasks by swim lane plans
-- All tasks should be in card format (similar to other screens)
-- All tasks should have visual indicators for due date, plan association, assignment, status, and “new” indicators”. Replica of the Project board.
-- Tasks should be fully “interact-able” from this screen similar to a Project board
- Messaging:
-- No messaging elements should be indicated in the “My Tasks” interface for Phase 1.
- Navigation:
-- Navigation should be static for left nav.
06 Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers
- Explore these references to learn more about style tiles: Reference 1, Reference 2
Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)
Typography:
We would like you to identify and define the list of fonts and the specific color, font size used:
- Headers
- Sub-headers.
- Paragraphs.
- etc.
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
Supporting Documents:
- Wireframes (CERFIP Wireframes.pdf).
Target audience:
- End users working on tasks. Professional users.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Completeness and accuracy of the designs.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Stock Artwork:
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-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.
The goal for this challenge is to create the look and feel for the major areas of the app, this UI will take data from Project Server Online and an associated SharePoint Project Site to drive its visual components. The experience will be a dashboard, card-based task management system, my tasks, and a new way to visualize a project plan from the perspective of the end-users.
It will allow them to work with these tasks via metadata, attachments, links, activities, lists, images, comments, timesheets / descriptions, but also maintain full fidelity to Project Server Online. It also includes a new way to visualize the entire plan, and filter out non-essential data, all using this card and micro-card based task viewing application.
You will be provided with wireframes to build the screens needed for this tool, those wireframes were built by the client.
Note: Please do not submit a colored version of wireframes as they are just meant to guide you, outline necessary screens, and further explain the application basics. You are highly encouraged to enhance the wireframes with your own design style / ideas / solutions during this design challenge.
Round 1
Submit your initial design for a checkpoint feedback:01 Dashboard
02 Plans
03 Task Card
- 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 checkpoint feedback:01 Dashboard
02 Plans
03 Task Card
04 Search
05 My Tasks
06 Style Tile
- 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:
The goal of this product is to fill a gap in the market of project and task management. To date, project management has either maintained the rigid approach of formally managed and maintained project plans with little to no interaction with that plan by the users fulfilling the tasks. Modern tools have created Kanban style planning capabilities such as Trello, Office 365 Planner, etc. These tools are excellent for end-users to manage tasks with metadata and useful information, but leave that data isolated from a Project Manager’s ability to incorporate it into a larger plan that allows for resource, costing, portfolio reporting and management capabilities.
CERFIP is designed to bridge that gap by integrating the robust features of Project Server Online for costing, resource management, timesheets, portfolios, weighting, and deeper planning capabilities with the extremely flexible front-end plan boards and cards required by the end users. The robust front-end tasks are connected to the project plan and allow the project manager the ability to integrate only the data they require from these tasks back into their plan, but decouple the remaining task metadata for freedom of management by those users working on the tasks. The result is the best of both worlds, including an integrated site and location for synchronizing the plan, issues, documents, calendars, and more. This site contains all the traditional management capabilities of SharePoint, but also the infrastructure required to generate the user experience of the CERFIP Plan Board
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Notes:
- This is going to be a Web App.
- Desktop view: 1280px width and height as required.
- Make sure your design consider responsiveness and will look good on both tablet and mobiles.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
- Same color scheme across the app. (No defined color scheme)
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Required Screens:
- Please refer to CERFIP Wireframes.pdf you start working.
01 Dashboard:
- Please refer to page 12 in CERFIP Wireframes.pdf
- Navigation:
-- Support for standard SharePoint left-nav should be available.
- Favorites:
-- Users should be able to select a plan they have access to and mark is as favorite
- User Experience:
-- Favorite Plans are at the top of the main page.
-- Default displays Plans as cards and include a color-coded set of plan metadata. Data should include metric data from PWA about the project:
---- Meta data may be configurable or fixed, but should pull from the main project screen data in PWA to provide high-level information about the project
---- Color codes should represent total tasks, open tasks, overdue tasks, and completed tasks.
---- Other possible day 1 data: Percent Complete, Hours/Work remaining, Status (on track, in trouble, etc. – can we pull this from PWA?).
-- Display for ALL MY TASKS – better UX equivalent of the “Tasks” screen in PWA. Basically it shows each plan card where I HAVE open tasks in an expanded view so I can see the list of tasks under each plan, and jump quickly over to the Plan and card as needed.
-- Views – One View.
---- Metadata on the tasks should be: Start Date, Finish Date, Remaining Work Hours, and Percent Complete. (link directly to the task card).
-- Ability to create different views based on role or needs. PMs may want to see more overview details, while task users may want to see data filtered for their tasks specifically.
02 Plans:
- Please refer to pages 1-4 CERFIP Wireframes.pdf
- Creation:
-- A new plan can be created from PWA from an existing project (pop a screen with settings).
-- A new plan can be created from the main Plan and Dashboard let navigation.
-- Initially, new plans created outside PWA will use the default plan template.
-- A new plan can be created by copying an existing plan (only when in disconnected mode)
- Management:
-- Plans have an “Info” link at the top that pops a “task card” type interface that contains data about the plan (sourced in PWA or SP Site). Editable by proper permissioned users.
-- Plans have management settings that determine specifics of integration with PWA, Project Site, and Permissions. The goal is to flesh this out with as much OOB as possible (plan statement list with fields for CERFIP to use to determine settings. Ideally most OOB SP functions still usable via classic interface if desired. CERFIP should mostly be a wrapper around these underpinnings.
-- Swim lanes are editable buckets.
- End User Experience – Main View:
-- Labels are color coded visible attachments to task cards.
-- Swim lanes are visible buckets for cards. Drag and Drop.
-- Zoom in and out of the plan hierarchy.
-- Refine / filter by appropriate metadata (example: Assignee, status, ??).
- End User Experience – Project View:
-- Project View - All Tasks (Page 2 of wireframe)
-- Project View - My Tasks (Page 3 of wireframe)
-- Project View - All Open Tasks (Page 4 of wireframe)
- Messaging:
-- The plan board must allow for, and displays communication updates about the elements of the plan in a linear format. (Specific actions should be captured and displayed).
-- The plan should display a comments section (collapsible), and an activity stream.
-- The plan messages should be attached to the card (task) or the plan (site).
-- The plan view of all tasks must visually displays new update/message availability on each card.
-- The activity stream should report any plan or task activities chronologically.
- Navigation:
-- Left Navigation:
---- Create New Plan button launches the create new plan “task card” style UI.
---- Dashboard button takes you to the main plan dashboard
---- My tasks button takes you to the main “my tasks” location
-- In Page Navigation:
---- Top Plan navigation Contextual Links:
------ Plan: Links back to the main board.
------ Files: Links to the underlying plan doc library.
------ Discussion: Links to the plan discussion threads.
------ Project Site (TBD as this board technically represents a view of a project site) maybe this switches to classic site view.
- Integrations:
-- One Note:
---- One Note Ribbon ability to “send to CERFIP Plan”. Either as a task card or an item on an existing card.
03 Task Card:
- Please refer to pages 5-9 CERFIP Wireframes.pdf
- Creation:
-- Management Allowed: A task user must be able to create a new task and assign it as a sub-task to an existing “allowable” task. They should also be able to remove hours from the main task to assign them to the new subtask and push this data back to the project plan. PWA or similar should ensure messaging is sent to the PM.
-- Should be able to assign a task to multiple individuals.
-- Task Card Contains the following Tabs:
---- Tabs should contain notifications for items changed in the last 24 hours
------ Main (Page 5 of wireframe)
------ Activity (Page 6 of wireframe)
------ Comments (Page 7 of wireframe)
------ Attachments / Links (Page 8 of wireframe)
------ Project (Page 9 of wireframe)
---- Main Tab
------ Swimlane/Bucket, Status, Start & End Date
------ Title
------ Assignee(s) with links to their profiles
------ Preview attachment (if any)
------ Description
------ Checklist (if any)
------ Activity – last 3 elements with “more” link to Activity tab
---- Activity Tab
------ See wireframes
-- Ability to create tasks from Nintex or other workflows.
- User experience & Data:
-- Visual Indicator of approval (if required) of PWA data (timesheet, request additional time).
- Messaging:
-- The card’s main view must display a visual indicator that new messages / updates are available.
- Integrations:
-- Outlook Integration – two way integration between Outlook and CERFIP. Create from Outlook, update from outlook, and outlook tasks reflect CERFIP tasks and updates.
04 Search:
- We need to be able to perform search in this application with advanced options.
05 My Tasks:
- Please refer to pages 10 and 11 in CERFIP Wireframes.pdf
- Management:
-- Should there be any management settings?
- End-User Experience:
-- Users should be able to see Tasks in swim lanes by status
-- Users should be able to see Tasks by swim lane due date (week)
-- Users should be able to see Tasks by swim lane plans
-- All tasks should be in card format (similar to other screens)
-- All tasks should have visual indicators for due date, plan association, assignment, status, and “new” indicators”. Replica of the Project board.
-- Tasks should be fully “interact-able” from this screen similar to a Project board
- Messaging:
-- No messaging elements should be indicated in the “My Tasks” interface for Phase 1.
- Navigation:
-- Navigation should be static for left nav.
06 Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers
- Explore these references to learn more about style tiles: Reference 1, Reference 2
Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)
Typography:
We would like you to identify and define the list of fonts and the specific color, font size used:
- Headers
- Sub-headers.
- Paragraphs.
- etc.
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
Supporting Documents:
- Wireframes (CERFIP Wireframes.pdf).
Target audience:
- End users working on tasks. Professional users.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Completeness and accuracy of the designs.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Stock Artwork:
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-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.