Fujitsu - DPM Application Responsive Design Concepts Challenge

Welcome to Fujitsu - DPM Application Responsive Design Concepts Challenge! The goal of this challenge is to design the user interface of the application, which contains several screens for Project management feature and Dashboard.

For this first design concepts challenge, we are looking to focus on a new and modern design direction for this application and to create an effective dashboard design.

We are really excited to see your designs for this challenge.
Good Luck!

Round 1

Submit your initial designs for Checkpoint Feedback

All Users
00 Dashboard
We want to atleast the below features in your designs:
- Number of Projects
- Resource Utilization
- Project Trend
- Transitive graph for the number of projects (Month/Year)
- Summary of elapsed days by Tasks

A. Sales:
01 Project Application Input

B. Project Managers:
02 Project List / Search
03 Project Details
03-1 New Project Workflow
03-2 Project Go/No-go decision
03-3 Project Continuation Decision

C. Producer:
03-4 Interview with Sales

E. Project Member (producer, designers or developers)
03-8 Interview with customer
03-9 Project Activity Input/Phase Input
03-10 Project Activity Input/Task Input

You must upload your submission to MarvelApp so we can provide direct feedback on your designs.
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note 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 the required designs with all Checkpoint Feedback implemented.
All Users
A. Sales
B. Project Managers
C. Producer
D. FM
E. Project Member (producer, designers or developers)

You must upload your submission to MarvelApp, for the final submission - you can reuse the prototype that you shared for checkpoint
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

The goal of this challenge is to design the user interface of the application, which contains several screens for Project management feature and Dashboard.

The key requirements on artifacts are following:
- To enable sales persons and project member to report daily project activity status quickly, easily and smoothly. (Project Management)
- To enable manager persons to form appropriate teams for projects. (Project Management)
- To enable manager persons to judge good deals quickly. (Dashboard)
- To enable manager persons to check status of activities in projects in real time. (Dashboard)

Background Information:
This project is to develop application for managing consulting projects proposing digital business, which is called DPM (Digital Producer Management) System. The application need to have features of Project Management, Talent Management, Knowledge Management for managing 200 to 1000 consultants. And also it provides Dashboard so that managers can check the status of projects with updated information on a daily basis.

The client asks Topcoder community to realize high UX for this application to support all users to perform their tasks on projects and operate the system itself smoothly and continuously.

Design Considerations:
- This will be a responsive web application!
- Desktop view: Design for desktop display 1366px and height as required.
- Mobile view: Design for iPhone 6S Display 750px x 1334px (portrait) - this is optional but we would want the winner of the challenge will be required to create the mobile view in final fixes!
- It’s priority for the client to realize operation with less clicks. For example, they want to open a project for input some information with a few clicks rather than to find it from the list or to search.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!- Make sure your design consider responsiveness and will look good on both tablet and mobiles.
- Particularly for Dashboard components, you’re encouraged to use graphs and charts to visualize important data.
- Feel free to suggest any tools/functions that can bring good User Experience for this application.

Documentation:
- Supporting Document (Google Excel Sheet) - Component details, Item list, Use cases
- Business Workflow Overview (bwo.png)

Branding Guidelines:
Corporate Color and Fonts
Following is their corporate color. It is expected that you follow this color for Red and Gray portion of the design:

Red:
- 255R 0G 0B Primary Color
- 163R 11G 26B
- 134R 23G 24B
- 104R 26G 20B
- 72R 25G 10B

Gray:
- 238R 238G 238B
- 218R 217G 214B
- 198R 198G 192B
- 177R 177G 172B
- 157R 156G 149B
- 135R 134G 126B Neutral Gray
- 112R 111G 103B
- 87R 86G 79B
- 60R 60G 53B

Fonts:
This is standard font used as a branding, it is okay to choose other fonts for the design:
- Segoe UI
- Font Size 14px.
- Existing guides can be found here:
http://www.fujitsu.com/uk/solutions/cloud/k5/guides/

Required Screens
- Below are list of screens that need to be designed.
- We have supplied a supporting document for your reference to help with:
- - Component details - the descriptions of each components
- - Items list - the list of fields that need to be included in each of the pages
- - Use cases - the overall flow of the application.

All Users
00 Dashboard:
- Number of Projects
- Resource Utilization
- Stagnated Projects
- Expected Sales Amount / Actual Sales Amount
- Number of Closed Projects
- Project Trend
- Transitive graph for the number of projects (Month/Year)
- Transitive graph for the number of active projects (Month/Year)
- Transitive graph for Expected Sales Amount (Month/Year)
- Transitive graph for Actual Sales Amount (Month/Year)
- Summary of elapsed days by Tasks
- Top-N Time Consuming Projects List

A. Sales:
01 Project Application Input:
- Sales person makes an entry for a potential project in Project Application Input.
- Please take a look at the list of items (from the attached google sheets) that will be included / entered in the project application input.

B. Project Managers:
02 Project List / Search:
- Should be able to see the project list (pending, projects with progress and all projects that were completed)
- Show us how the user will filter or perform a search in the list of projects
- Take a look at the google sheets (Item list) column to know what columns can be displayed and what filter items can be included.
- Looking forward to your thoughts on how this page can be shown.

03 Project Details:
Below use-cases are performed by the project managers, these activities are based on the project details page.

NOTE: 
- This is one of the important page in the application, look through the actvities and contents that need to be displayed for each of the users - based on this come up with a perfect layout that provides the best user experience.
- In general, all types of users will have access to the project detail full view, except that certain users will have fields editable only for some fields based on their user role.

03-1 New Project Workflow:
- They get notified about the new project in chat / can also access the new project from pending project list. Show us how this group chat should look like.
- They will be able to see all project details in detail view by choosing a project from the list. (Please see attached google sheet to capture the details on what need to be shown in the project detail view. NOTE: if the PM lands on this page from pending project list, then most of details will be empty and only those fields entered by the 'sales' in project application input can be seen).
- Will be able to search and assign a producer.

03-2 Project Go/No-go decision:
- Once the producer gathers more information from sales / they input the information and reports it to PM for a final decision to start the project.
- PM needs a way to be notified about this i.e. a project is awaiting their decision
- They choose the decision (Go / No-Go / Escalation)
- - - - - When the decision is "Go": The DPM system notifies the request to form a team for the project to FMs with the business chat.
- - - - - When the decision is "No-Go"": the project is going to close. PM closes the project with "Project Close Input" feature.
- - - - - When the decision is "Escalation", the decision is escalated to senior managers."

03-3 Project Continuation Decision:
After the interview with the customer, Producer reports the result to PM and asks for a decision to continue or quit the project.
- PM may find the project in Project List / Search
- PM confirms the result of interview with the customer, and then input his decision as "Go" or "No-Go" or "Escalation" with Project Continuation Decision Input feature.
- - - - - When the decision is "Go": the project goes on. the team is going to drive it with subsequent activities.
- - - - - When the decision is "No-Go": the project is going to close. PM closes the project with Project Close Input feature.
- - - - - When the decision is "Escalation", the decision is escalated to senior managers.

C. Producer:
- They have access to all the features like other users.

03 Project Details:
03-4 Interview with Sales:
- Notified about the new project in chat.
- They will be able to see all project details in detail view by choosing a project from the list.
- - Inputs the results based on the interview with the sales person (please see Item list to know the details that will be entered)

03-5 Activity Planning:
- Producer plans activities for the project.
- Specifically, the plan is to define phases with actual periods(start/end dates).
- Producer may find the project in Project List / Search or open it with the direct link.
- Producer inputs information about the project plan to the Project Activity Plan Input feature.

03-6 Project Close:
- When closing a project, Producer close the project in the system.
- Producer may find the project in Project List / Search or open it with the direct link.
- Producer close the project with Project Close Input feature

D. FM:
- Notified about the new project in FM group chat.
- They will be able to see all project details in detail view by choosing a project from the list.

Project Details:
03-7 Teaming:
- FM will have the responsibility of forming teams (designers and developers).
- They will have the ability to search for members by keywords
- Will be able to view a member profile from the search results
- Should be able to assign designers and developers.

E. Project Member (producer, designers or developers)
- Notified about the new project in project group chat.
- They will be able to see all project details in detail view by choosing a project from the list.

Project Details:
03-8 Interview with customer:
- Based on the interview with customer to gather additional details about the project, they enter the information that was received!

03-9 Project Activity Input/Phase Input:
- When beginning a phase in the project, Project member records it in the system with a starting date and an expected end date.
- Note that project phases are supported to move forward sequentially. Each period of phase does not overlap with others.
- Project member may find the project in Project List / Search
- Project member inputs information about a starting phase with Project Phase Input feature.

03-10 Project Activity Input/Task Input:
- When beginning a task, Project member records it in the system with a starting date.
- Project member updates the task according to the status, and creates customer visit histories if it's present during activities for the task.
- Note that tasks present actual activities in the project and belong to a particular phase. It's supposed that multiple tasks can run in parallel.
- Project member may find the project in Project List / Search or open it with the direct link.
- Project member inputs information about starting tasks with Task Status Input feature.
- Project member update status of tasks with Task Status Input feature.
- Project member inputs customer visit histories with Customer Visit History Input feature.

Some Keywords looking into the design:
- Easy to use/understand
- Hassle-free
- Intuitive
- Professional
- Used within business

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:
- Sales are those who make applications for potential projects of their customers.
- PMs (Program Managers) are those who evaluate projects and assign a producer to project.
- FMs (Functional Managers) are those who form teams for projects.
- Producers are those who lead projects.
- DIers (Producer/Designer/Developer)  are those who perform various activities in projects.

Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Note you would need to implement all required functionalities and items as written in the supporting document.
- 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:
For Stock Art usage, icons are allowed but stock photos are not allowed. Please refer to the following policy for other information.
- 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.