Challenge Summary
Welcome to John Hancock - Project Snapshot Design Challenge
This challenge is focused on creating design concepts/visual ideas to create a new application to present the status of different active projects using an engaging and intuitive interface.
Round 1
Submit your design for checkpoint feedback:
- Submit your initial design for checkpoint feedback.
- 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:
- Submit your final design.
- 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 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 interface should appear modern and professional but also interesting and visually appealing. It is not required to adhere to John Hancock branding standards for this challenge. We do not want to limit community creativity.
Branding Guidelines:
- The brand colors and fonts are open to designers.
Target devices:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
- 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:
- PPM Information (PPM Information.zip).
- Data Sample (Project Status 05102016.xlsx)
Required Functionality:
A- When the user accesses the application, he will not have to provide user credentials:
- The application must use the credentials available from the company provided device or from his domain credentials. (Nothing to design here)
- If credentials are not available, the application must present a message indicating that the application is only available from company provided resources. (Design the message).
B- When a user uses the application for the first time, the user will have to personalize the display order of the projects using the following values in ascending or descending order:
- Planned Implementation Date.
- Project Name.
- Current Health Indicator – Overall.
- Business Unit.
C- If the user successfully completes personalization:
- The application must remember the selections that the user has made. (Nothing to design here).
- The user must be notified that he can modify these selections at any time.
D- If the user did not complete personalization, the application will:
- Notify the user that he can modify these selections at any time.
- Use a default order based on:
-- Planned Implementation Date: in descending order.
-- Project Name: in ascending order.
-- Current Health Indicator - Overall: in ascending order.
-- Business Unit: in ascending order.
E- The application will:
- Display the following information for each of the active projects:
-- An image or a video uploaded by the Project Manager
-- Project Name
-- First n characters from Description
-- Current health from Current Health Indicator – Overall:
---- This is currently represented by the following words, ‘Red’, ‘Yellow’ and ‘Green’.
-- Current sentiment from Current Status.
---- This is currently in text format. When the Current Status text is run through a sentiment analyzer, the status sentiment will be a number from 1 to 100.
-------- Sample sentiment analyzer: https://text-analytics-demo.azurewebsites.net/
-- Planned Implementation Date.
-- PMF Phase.
-- The number of Likes and Dislikes the project status has received.
-- The number of comments for the project status.
Notes:
1- For simplicity, this collection of information will be called a Project Card.
2- Text in italics are column names that match PPM Information.
3- We will rely on YOU to recommend the order and layout of the information.
4- Filtering projects is not necessary. The feed to be provided will only contain projects that must be displayed.
- Display each of the Project Cards in the order set by the user or by the default order.
- The display layout of the page must take advantage of the device’s page orientation.
- If the user is an Administrator, the user will have:
-- An ability to select or deselect which columns to display in the project details (only column D and onwards).
---- The columns selected will be displayed in the project details.
---- Any column selection / deselection must be reflected to other users when they refresh the page.
-- An to edit/update the project data feed 24/7 with the edits able to take place upon submission.
F- When the user selects a Project Card, the application will display the project details.
- Refer to the PPM Information sections to determine the project information to be displayed.
- If the user is a Project Manager AND the user is the Acting Project Manager, the user will have the ability to upload one image or one video for the project:
-- If another image or video is uploaded, the new file will replace the current file.
-- It will not be necessary to keep older versions of the file
- From the project details, the user will be able to:
-- Like or Dislike the project status.
-- Comment on the project status.
-- See the number of Likes and Dislikes the project status has received.
-- See the names of users who have Liked and Disliked the project status.
-- See the comments users have provided.
---- The comments will be ordered by the comment creation date in descending order
-- See the name of users who provided the comment.
Notes:
- We will rely on YOU to recommend (1) The order and layout of the information, and (2) How the user will be providing input.
- Project information can be grouped into the following:
-- General Information.
-- Health / Sentiment.
-- Status.
-- Gating.
-- Costs.
-- Risk and Issues.
-- Next Steps.
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:
- John Hancock employees:
-- Reviewer.
-- Project Manager.
-- Administrator.
Judging Criteria
- Overall User Experience.
- Completeness and accuracy of the designs as defined in requirements.
- How well your designs provide a consistent user flow.
- How well your designs captures all the requirements.
- Any suggestions, interactions and user flows you recommend (provide any notes or comments for the client).
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.