Challenge Summary
Welcome to John Hancock - Project Snapshot First to Finish Design Challenge
This challenge is focused on making additional graphical changes to a pre-existing design and expand various points of the user interface.
Challenge Description:
The goal of this challenge is to allow intuitive consumption of project information and allow project reviewers to interact with the project information so that positive or negative observations can be communicated with transparency.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
We very much want to see new and creative ideas for both organizing the information as well as creative interface designs. The submitted designs should follow the same graphical styling as the provided designs.
Branding Guidelines:
- Please ensure that all designs fit well visually within the current design and follow the current “look and feel”.
Target devices:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
- Tablet Resolution: Design for iPad Air 2 Retina Display 1536px x 2048px
- Desktop: Width of 1280px and height as required.
Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
Supporting Documents:
- Storyboard.zip
Required Functionality:
Expand current designs to tablet view
- As part of this challenge, please give us an additional tablet view using the provided tablet specs above.
Changes to Current Design:
- Project Card:
-- Increase the size of the symbol indicating "Health". This should also be reflected the same way at the top section of the "Project Details" screen.
-- Next to the "Health" symbol, add text in italics to display: "Health:" This should also be reflected the same way at the top section of the "Project Details" screen.
-- The Sentiment Bar is the indicator on the card view that includes the smiley face and percentage. The temperature bar to symbolize "sentiment bar" is too prominent ("Health" is more important and understood than "sentiment" by our audience in the current design). Please reduce the size of the “sentiment” bar or show us a different way we could display this same information. Any new designs must include the smiley face icon. This should also be reflected the same way at the top section of the "Project Details" screen.
-- Please show what the “smiley face” icons for project sentiment would look like at other stages of project sentiment (red and green)
-- Above the "sentiment" graphic add text in italics to display: "Sentiment:" This should also be reflected the same way at the top section of the "Project Details" screen.
- Admin Control:
-- The admin user should be able to control the ability to display or not display sentiment just like any other section. Please include on the "Columns to display" image.
- Project Details:
-- Health section - Size of the symbol indicating "Health" appears a bit small. Please increase the prominence of this graphic.
-- Sentiment section - add a "Tooltip Help" similar to the Status section on the desktop side. Come up with a solution to accommodate for this on mobile.
-- Status Section - "Current Status" needs to display on top before "Current Period Accomplishments"
-- Cost Section - Use rounding and the tool tip in the same fashion as the "Gating" section to show consistency
New Design Requirements:
- Sorting - Show sorting functionality for the following values in ascending or descending order:
-- Planned Implementation Date
-- Project Name
-- Current Health Indicator - Overall
-- Business Unit
-- Acting Project Manager
-- Executive Sponsor
-- Project Sponsor
- Business Unit Filter: Show functionality for filtering the cards to the following views:
-- All Business Units
-- JH INS’
-- JH INV’
-- JH RPS’
-- JH SII’
-- JHAS’
-- JH ANN
- Search: Show how search will be implemented as well as search results
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 to the provided designs
Target audience:
- John Hancock employees:
-- Reviewer.
-- Project Manager.
-- Administrator.
Judging Criteria
- Best possible solution for the additional requirements
- Visually appealing design changes that match the “look and feel” of the provided designs.
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. See more information about Final Fixes.
This challenge is focused on making additional graphical changes to a pre-existing design and expand various points of the user interface.
Challenge Description:
The goal of this challenge is to allow intuitive consumption of project information and allow project reviewers to interact with the project information so that positive or negative observations can be communicated with transparency.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
We very much want to see new and creative ideas for both organizing the information as well as creative interface designs. The submitted designs should follow the same graphical styling as the provided designs.
Branding Guidelines:
- Please ensure that all designs fit well visually within the current design and follow the current “look and feel”.
Target devices:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
- Tablet Resolution: Design for iPad Air 2 Retina Display 1536px x 2048px
- Desktop: Width of 1280px and height as required.
Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
Supporting Documents:
- Storyboard.zip
Required Functionality:
Expand current designs to tablet view
- As part of this challenge, please give us an additional tablet view using the provided tablet specs above.
Changes to Current Design:
- Project Card:
-- Increase the size of the symbol indicating "Health". This should also be reflected the same way at the top section of the "Project Details" screen.
-- Next to the "Health" symbol, add text in italics to display: "Health:" This should also be reflected the same way at the top section of the "Project Details" screen.
-- The Sentiment Bar is the indicator on the card view that includes the smiley face and percentage. The temperature bar to symbolize "sentiment bar" is too prominent ("Health" is more important and understood than "sentiment" by our audience in the current design). Please reduce the size of the “sentiment” bar or show us a different way we could display this same information. Any new designs must include the smiley face icon. This should also be reflected the same way at the top section of the "Project Details" screen.
-- Please show what the “smiley face” icons for project sentiment would look like at other stages of project sentiment (red and green)
-- Above the "sentiment" graphic add text in italics to display: "Sentiment:" This should also be reflected the same way at the top section of the "Project Details" screen.
- Admin Control:
-- The admin user should be able to control the ability to display or not display sentiment just like any other section. Please include on the "Columns to display" image.
- Project Details:
-- Health section - Size of the symbol indicating "Health" appears a bit small. Please increase the prominence of this graphic.
-- Sentiment section - add a "Tooltip Help" similar to the Status section on the desktop side. Come up with a solution to accommodate for this on mobile.
-- Status Section - "Current Status" needs to display on top before "Current Period Accomplishments"
-- Cost Section - Use rounding and the tool tip in the same fashion as the "Gating" section to show consistency
New Design Requirements:
- Sorting - Show sorting functionality for the following values in ascending or descending order:
-- Planned Implementation Date
-- Project Name
-- Current Health Indicator - Overall
-- Business Unit
-- Acting Project Manager
-- Executive Sponsor
-- Project Sponsor
- Business Unit Filter: Show functionality for filtering the cards to the following views:
-- All Business Units
-- JH INS’
-- JH INV’
-- JH RPS’
-- JH SII’
-- JHAS’
-- JH ANN
- Search: Show how search will be implemented as well as search results
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 to the provided designs
Target audience:
- John Hancock employees:
-- Reviewer.
-- Project Manager.
-- Administrator.
Judging Criteria
- Best possible solution for the additional requirements
- Visually appealing design changes that match the “look and feel” of the provided designs.
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. See more information about Final Fixes.
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.