Challenge Summary
Welcome to Fujitsu – Project Management Application Design Challenge – Part 1!
Fujitsu is looking to update their corporate design guidelines which includes websites and web/mobile application style templates. We’re looking for the help from Topcoder community to provide them with new design idea and inspirations to incorporate into this new design guidelines.
In this 2 challenge series, we will be asking the community to design an imaginary project management application, where landing (application description), login, and project management app dashboard should be designed. Also providing its style guide.
We will provide you with the list of key elements and widgets for each of the pages. Please note that although Fujitsu is looking for new idea and inspirations, the design should follow the key concepts of Fujitsu’s corporate identity - The human concept and design derived from the Moodboard.
Also, the current design have some known issues that we will describe in challenge description below. The challenge is not just to come up with the new design idea and inspirations for the new guideline, but Fujitsu is also looking for the community to help provide a new design that solve these issues that match Fujitsu requirements.
For this challenge we will cover only the landing page and login screens.
Good luck everyone!
01 Landing Page
02 Login Page
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link.
- Readme.txt : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
01 Landing Page
02 Login Page
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link.
- Readme.txt : 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 challenge is to design Landing (description of application) and Login screens for the imaginary project management application and solve their current problems. We have very clear requirements on content for each page with clear evaluation criteria.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Please note that we are looking for new design ideas and inspirations, but it should be within the Fujitsu’s core concept (Fujitsu Human Concept) and the Moodboard. The concept and Moodboard are provided in the Supporting documents section.
About the Imaginary Project Management Application
- This application is a imaginary project management web service application that Fujitsu has created which is used for software development. We will call this as "TCPMApp".
- Main functions
-- Repository (Git) function
-- Chat function for collaboration between members
-- Schedule forecasting and tracking of tasks
-- Document storage
-- Wiki and/or Forums
-- Reporting function etc.
- We assume that this application has free plan for initial use. The customer will be charged when making projects private or increasing storage capacity.
- Although the app is a service primary on the "cloud", the app should also offer installation into enterprise private data center, or private cloud servers.
- Social registration and login should be possible
- Please note that their is no need to design an icon for "TCPMApp" as they have a rule to not create icons per app - just text base logo if necessary.
Notes:
- This is going to be a web application.
- Although Contents.xml.zip have list of elements that needs to be designed, please be free to add any elements and dialogs that fit the goal of this challenge.
- Desktop view: Design for desktop display 1366px and height as required.
- Mobile view (Mobile Resolution: Design for iPhone 6S Display 750px x 1334px).
- 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.
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Current design guideline issues we need to solve:
- Please refer to current issues.zip to see the examples we are talking about.
-- The design becomes too "plain" in a screen without a graph (example_1_too_plain.png)
-- If the amount of information is small, the screen looks “poor” (example_2_looks_poor.png)
-- Navigation area is wide, but the content area is narrow (example_3_contents area narrow.png)
-- As this is for business applications, Fujitsu uses the application built on design guideline to demo an application in sales cycle. The demo don't look good enough for some pages. No sharpness.
-- Fujitsu's corporate color is Red. If we use this color inside business app, it could be seen as application ERROR. (example_4_seen_as_error.png)
-- We want "dark version" for the application. Current design guideline only have "light" version.
-- Current design guideline was created to build Web Application. It's hard to create attractive design for standard Web sites or online manuals. (example_5_not_attractive_for_standard_websites.png)
Some Keywords looking into the design:
- Professional
- Used within business (note that the apps built on new guidelines will mainly be used for business applications)
- Clear
- Easy to Communicate
- Friendly
- Natural
- Pure
- Reliable
- Motivated
- Flexible
- Clear and Sharp, clear focus, and Make the low and high points
- Not boring
- Sophisticated
Keywords that should NOT bee seen in the design:
- Rude
- Too Aggressive
- Discriminatory
- Provocative
- Disrespectful
- Old & Classical
- Cheep
- Luxury
The design needs to be independant from specific culture or race. For example, following keyword design are not what we're looking for.
- Closed, Ethnic, Girly/Feminine, Too cute, Sweet, Childish, Tropical, Cartoon, Too gorgeous, Mysterious, etc.
Required Screens:
01 Landing Page:
- Please refer to Content.xlsx.zip, Landing page sheet
- We are looking for 2 versions of this page, one for mobile and one for desktop, but we are not looking for Light/Dark versions, as we think that landing page would be a mix of Light and Dark design combined. What ever you come up with for landing page is fine.
- This page should contain following. Please refer to Content.xlsx.zip which has background information on these items. Note that you are free to add other elements or components to match the overall goal of this project:
-- Header.
-- Mast Head (Hero)
-- Entry Form
-- Login Button
-- Company list
-- Topic list
-- Service plans
-- Feature list
-- User's voice
-- Hero
-- Related Links etc.
-- Back to Page Top.
02 Login Page:
- Please refer to Content.xlsx.zip, Login page sheet
- We are looking for 2 versions of this page,one for mobile and one for desktop, and for each of these versions we need to see Light and Dark designs.
- This page will contain:
-- Service Information
-- Login Form
-- Social Login
-- Related Links 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
Landing page samples:
- https://www.atlassian.com/
- https://evernote.com/?noredirect
- https://www.google.com/drive/
- http://keysoft-wp.keydesign-themes.com/
- https://proto.io/
Login page samples:
- https://www.amazon.com/gp/navigation/redirector.html/
- https://www.icloud.com/
- https://account.windowsazure.com/signup?offer=ms-azr-0044p&appId=102&l=en-us&correlationId=e1920fe3-5775-4171-abfa-441c3933e9e4
- https://jp.pinterest.com/logout/
- https://proto.io/en/signin/
Target audience:
- Landing page is for business users looking for information of this app, to decide if it’s worth to use the app or not.
- Signup/Login page is for the business users to start using the app.
Supporting Documents:
- Fujitsu Human Concept (FGNP_human_concept.ppt.zip)
- Fujitsu Moodboard (fgnp_moodboard.jpg.zip)
- Current design issues and current design samples (Current Issues.zip)
- Logo (Logo.zip) - Please read design_notes.txt on how you should use the Fujitsu Logo inside design
- Pages content (Content.xlsx.zip)
Judging Criteria:
- Are you following the "Human concept"?
- Is the design in the worldview of Moodboard?
- Is it possible to solve as many current issues as possible?
- Is the design considered so that it can be applied to a wide variety of industries? - Note that Fujitsu’s websites and applications are primary used for business application and use cases.
- Does text has moderate contrast and readability?
- Keywords indicating the direction of design are felt.
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.
Fujitsu is looking to update their corporate design guidelines which includes websites and web/mobile application style templates. We’re looking for the help from Topcoder community to provide them with new design idea and inspirations to incorporate into this new design guidelines.
In this 2 challenge series, we will be asking the community to design an imaginary project management application, where landing (application description), login, and project management app dashboard should be designed. Also providing its style guide.
We will provide you with the list of key elements and widgets for each of the pages. Please note that although Fujitsu is looking for new idea and inspirations, the design should follow the key concepts of Fujitsu’s corporate identity - The human concept and design derived from the Moodboard.
Also, the current design have some known issues that we will describe in challenge description below. The challenge is not just to come up with the new design idea and inspirations for the new guideline, but Fujitsu is also looking for the community to help provide a new design that solve these issues that match Fujitsu requirements.
For this challenge we will cover only the landing page and login screens.
Good luck everyone!
Round 1
Submit your initial design for a checkpoint feedback:01 Landing Page
02 Login Page
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link.
- Readme.txt : 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 Landing Page
02 Login Page
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link.
- Readme.txt : 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 challenge is to design Landing (description of application) and Login screens for the imaginary project management application and solve their current problems. We have very clear requirements on content for each page with clear evaluation criteria.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Please note that we are looking for new design ideas and inspirations, but it should be within the Fujitsu’s core concept (Fujitsu Human Concept) and the Moodboard. The concept and Moodboard are provided in the Supporting documents section.
About the Imaginary Project Management Application
- This application is a imaginary project management web service application that Fujitsu has created which is used for software development. We will call this as "TCPMApp".
- Main functions
-- Repository (Git) function
-- Chat function for collaboration between members
-- Schedule forecasting and tracking of tasks
-- Document storage
-- Wiki and/or Forums
-- Reporting function etc.
- We assume that this application has free plan for initial use. The customer will be charged when making projects private or increasing storage capacity.
- Although the app is a service primary on the "cloud", the app should also offer installation into enterprise private data center, or private cloud servers.
- Social registration and login should be possible
- Please note that their is no need to design an icon for "TCPMApp" as they have a rule to not create icons per app - just text base logo if necessary.
Notes:
- This is going to be a web application.
- Although Contents.xml.zip have list of elements that needs to be designed, please be free to add any elements and dialogs that fit the goal of this challenge.
- Desktop view: Design for desktop display 1366px and height as required.
- Mobile view (Mobile Resolution: Design for iPhone 6S Display 750px x 1334px).
- 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.
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Current design guideline issues we need to solve:
- Please refer to current issues.zip to see the examples we are talking about.
-- The design becomes too "plain" in a screen without a graph (example_1_too_plain.png)
-- If the amount of information is small, the screen looks “poor” (example_2_looks_poor.png)
-- Navigation area is wide, but the content area is narrow (example_3_contents area narrow.png)
-- As this is for business applications, Fujitsu uses the application built on design guideline to demo an application in sales cycle. The demo don't look good enough for some pages. No sharpness.
-- Fujitsu's corporate color is Red. If we use this color inside business app, it could be seen as application ERROR. (example_4_seen_as_error.png)
-- We want "dark version" for the application. Current design guideline only have "light" version.
-- Current design guideline was created to build Web Application. It's hard to create attractive design for standard Web sites or online manuals. (example_5_not_attractive_for_standard_websites.png)
Some Keywords looking into the design:
- Professional
- Used within business (note that the apps built on new guidelines will mainly be used for business applications)
- Clear
- Easy to Communicate
- Friendly
- Natural
- Pure
- Reliable
- Motivated
- Flexible
- Clear and Sharp, clear focus, and Make the low and high points
- Not boring
- Sophisticated
Keywords that should NOT bee seen in the design:
- Rude
- Too Aggressive
- Discriminatory
- Provocative
- Disrespectful
- Old & Classical
- Cheep
- Luxury
The design needs to be independant from specific culture or race. For example, following keyword design are not what we're looking for.
- Closed, Ethnic, Girly/Feminine, Too cute, Sweet, Childish, Tropical, Cartoon, Too gorgeous, Mysterious, etc.
Required Screens:
01 Landing Page:
- Please refer to Content.xlsx.zip, Landing page sheet
- We are looking for 2 versions of this page, one for mobile and one for desktop, but we are not looking for Light/Dark versions, as we think that landing page would be a mix of Light and Dark design combined. What ever you come up with for landing page is fine.
- This page should contain following. Please refer to Content.xlsx.zip which has background information on these items. Note that you are free to add other elements or components to match the overall goal of this project:
-- Header.
-- Mast Head (Hero)
-- Entry Form
-- Login Button
-- Company list
-- Topic list
-- Service plans
-- Feature list
-- User's voice
-- Hero
-- Related Links etc.
-- Back to Page Top.
02 Login Page:
- Please refer to Content.xlsx.zip, Login page sheet
- We are looking for 2 versions of this page,one for mobile and one for desktop, and for each of these versions we need to see Light and Dark designs.
- This page will contain:
-- Service Information
-- Login Form
-- Social Login
-- Related Links 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
Landing page samples:
- https://www.atlassian.com/
- https://evernote.com/?noredirect
- https://www.google.com/drive/
- http://keysoft-wp.keydesign-themes.com/
- https://proto.io/
Login page samples:
- https://www.amazon.com/gp/navigation/redirector.html/
- https://www.icloud.com/
- https://account.windowsazure.com/signup?offer=ms-azr-0044p&appId=102&l=en-us&correlationId=e1920fe3-5775-4171-abfa-441c3933e9e4
- https://jp.pinterest.com/logout/
- https://proto.io/en/signin/
Target audience:
- Landing page is for business users looking for information of this app, to decide if it’s worth to use the app or not.
- Signup/Login page is for the business users to start using the app.
Supporting Documents:
- Fujitsu Human Concept (FGNP_human_concept.ppt.zip)
- Fujitsu Moodboard (fgnp_moodboard.jpg.zip)
- Current design issues and current design samples (Current Issues.zip)
- Logo (Logo.zip) - Please read design_notes.txt on how you should use the Fujitsu Logo inside design
- Pages content (Content.xlsx.zip)
Judging Criteria:
- Are you following the "Human concept"?
- Is the design in the worldview of Moodboard?
- Is it possible to solve as many current issues as possible?
- Is the design considered so that it can be applied to a wide variety of industries? - Note that Fujitsu’s websites and applications are primary used for business application and use cases.
- Does text has moderate contrast and readability?
- Keywords indicating the direction of design are felt.
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.