Challenge Summary
Photo Editing Windows Application Design Challenge.
In this opportunity, we need you to come up with the look and feel of a photo editing application based on Windows (desktop). We need you to go over the design problem and Microsoft’s guidelines to offer a modern looking solution.
Rolling Checkpoint
* Notice this is a simple and FAST single-round challenge. We’ll be providing quick rolling checkpoint to the submissions that are received by January 9th, 10AM EST. You can submit any screen (s) that you would like to receive feedback for.
The goal of this challenge is to design the look and feel of a modern Windows Application, under WPF, used to edit photos. The Photo Editing System is an application that can rapidly process photos of Participants in a sponsorship system so they can be used in printed material or on the sponsorship system’s website. The end user can rapidly rotate, color correct, and crop the photo, among other operations.
Design Problem
There is an existing application but it’s outdated (see sample). We like how fast and practical it is, working through keyboard shortcuts and solving UI goals fast, but the look and feel needs a refinement, as well as features polishment and UI improvement. The existing application is currently a single view. We need to keep it simple, that way.
Screens and Features
1. Login
- Design a login screen with user credentials request: username and password.
2. Photo Management
- Follow the existing sample as reference for UI flow and content.
- User can search a child record by entering his/her ID (digits).
- Once a child record is found, the application must display the following information(read only, no need to edit this information):
-- Nat Office (National Office): 10 digits number.
-- Child Number: 10 digits number.
-- Name: string.
-- Gender: F/M.
-- Birthdate: date format.
-- Project Name: string.
-- Case Number: 10 digits number.
-- Last Photo Date: date format.
- User can edit a field called "Narrative". It should be a text area (multiple lines input) to write a story about the child.
- User can select a folder for batch editing (processing queue). Once selected, the processing queue (batch area) displays a list of selectable pictures in that area. Once one of these pictures is selected the user can perform any of the available actions for photos (edit/save/reject). The list of pictures from the batch processing should display the following sortable fields (table).
-- National Office
-- Participant Number
-- Participant Name
-- Community Number
- User can see an oval outline showing the facial area recognition in the image editor (see image from the left in the UI sample).
- User can edit the photo using shortcuts or the app menu. Please provide a Windows App navigation with the following items for photo editing (the effects of editing WON'T need a visual cue, the effects apply automatically to the picture through the menu or shortcuts):
-- Rotate: the photo in either direction, either by fine or coarse increments, or by 90 degrees at a time.
-- Zoom / Crop: Final size of largest photo is 488 x 638, so display a box of that size on the screen and allow the user to zoom or crop the image within that target box. Also include an oval guide for the size of the facial area.
-- Auto Adjust (Auto Levels): automatically adjust levels based on selected portion of the image deemed to be "white" or by finding the whitest portion automatically.
-- Gamma: adjust gamma level of photo.
-- Hue: adjust hue.
-- Saturation: adjust color saturation.
-- Brightness: adjust brightness.
-- Revert: revert to the original photo.
-- ** Design/show demos of these effects being applied to a sample picture.
- User can save a photo, reset a process and exit the application. Any of these actions should display an overlay/window with warning or messages.
- User can also reject a photo (it's not in the demo screen, create it). System will display a prompt asking if they want to reject the photo and ask to select any of the following rejection codes:
-- Incorrect Child Id Number
-- Incorrect Name
-- Incorrect Gender
-- Terminated
-- Incorrect Age
-- Quality Reject
-- Other
- Ignore the status bar at the bottom.
- Ignore Scan Photo, Load Photo, View Last and Clear All buttons at the bottom.
- Design the main visual that solves the design problem and contains all the described features/stories. Keep in mind it must be done through one single main view. However, create screens to display how the features behave and the workflow of your solution.
- Show hover/active states for buttons, dropdowns, breadcrumbs, elements with interaction, etc.
MarvelApp Presentation
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype from the Copilot (mahestro@copilots.topcoder.com) or Adroc.
Branding Guidelines
- Follow color, typography and UX guidelines from the Windows Application Resources and Microsoft Development Center.
Screen Specifications
- Desktop screen full mode, 1280px width and 720px height. Consider flexibility with the height, there might be larger screens and the content/layout should flow.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork IS ALLOWED for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
- Actual users of the existing editing tool (NGO employees).
Judging Criteria
- Interpretation and adherence to the Microsoft Guidelines.
- Interpretation of the user experience.
- Is the application easy to use?
- Cleanliness of your graphics and 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. Layers should be named and well organized.
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.
In this opportunity, we need you to come up with the look and feel of a photo editing application based on Windows (desktop). We need you to go over the design problem and Microsoft’s guidelines to offer a modern looking solution.
Rolling Checkpoint
* Notice this is a simple and FAST single-round challenge. We’ll be providing quick rolling checkpoint to the submissions that are received by January 9th, 10AM EST. You can submit any screen (s) that you would like to receive feedback for.
The goal of this challenge is to design the look and feel of a modern Windows Application, under WPF, used to edit photos. The Photo Editing System is an application that can rapidly process photos of Participants in a sponsorship system so they can be used in printed material or on the sponsorship system’s website. The end user can rapidly rotate, color correct, and crop the photo, among other operations.
Design Problem
There is an existing application but it’s outdated (see sample). We like how fast and practical it is, working through keyboard shortcuts and solving UI goals fast, but the look and feel needs a refinement, as well as features polishment and UI improvement. The existing application is currently a single view. We need to keep it simple, that way.
Screens and Features
1. Login
- Design a login screen with user credentials request: username and password.
2. Photo Management
- Follow the existing sample as reference for UI flow and content.
- User can search a child record by entering his/her ID (digits).
- Once a child record is found, the application must display the following information(read only, no need to edit this information):
-- Nat Office (National Office): 10 digits number.
-- Child Number: 10 digits number.
-- Name: string.
-- Gender: F/M.
-- Birthdate: date format.
-- Project Name: string.
-- Case Number: 10 digits number.
-- Last Photo Date: date format.
- User can edit a field called "Narrative". It should be a text area (multiple lines input) to write a story about the child.
- User can select a folder for batch editing (processing queue). Once selected, the processing queue (batch area) displays a list of selectable pictures in that area. Once one of these pictures is selected the user can perform any of the available actions for photos (edit/save/reject). The list of pictures from the batch processing should display the following sortable fields (table).
-- National Office
-- Participant Number
-- Participant Name
-- Community Number
- User can see an oval outline showing the facial area recognition in the image editor (see image from the left in the UI sample).
- User can edit the photo using shortcuts or the app menu. Please provide a Windows App navigation with the following items for photo editing (the effects of editing WON'T need a visual cue, the effects apply automatically to the picture through the menu or shortcuts):
-- Rotate: the photo in either direction, either by fine or coarse increments, or by 90 degrees at a time.
-- Zoom / Crop: Final size of largest photo is 488 x 638, so display a box of that size on the screen and allow the user to zoom or crop the image within that target box. Also include an oval guide for the size of the facial area.
-- Auto Adjust (Auto Levels): automatically adjust levels based on selected portion of the image deemed to be "white" or by finding the whitest portion automatically.
-- Gamma: adjust gamma level of photo.
-- Hue: adjust hue.
-- Saturation: adjust color saturation.
-- Brightness: adjust brightness.
-- Revert: revert to the original photo.
-- ** Design/show demos of these effects being applied to a sample picture.
- User can save a photo, reset a process and exit the application. Any of these actions should display an overlay/window with warning or messages.
- User can also reject a photo (it's not in the demo screen, create it). System will display a prompt asking if they want to reject the photo and ask to select any of the following rejection codes:
-- Incorrect Child Id Number
-- Incorrect Name
-- Incorrect Gender
-- Terminated
-- Incorrect Age
-- Quality Reject
-- Other
- Ignore the status bar at the bottom.
- Ignore Scan Photo, Load Photo, View Last and Clear All buttons at the bottom.
- Design the main visual that solves the design problem and contains all the described features/stories. Keep in mind it must be done through one single main view. However, create screens to display how the features behave and the workflow of your solution.
- Show hover/active states for buttons, dropdowns, breadcrumbs, elements with interaction, etc.
MarvelApp Presentation
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype from the Copilot (mahestro@copilots.topcoder.com) or Adroc.
Branding Guidelines
- Follow color, typography and UX guidelines from the Windows Application Resources and Microsoft Development Center.
Screen Specifications
- Desktop screen full mode, 1280px width and 720px height. Consider flexibility with the height, there might be larger screens and the content/layout should flow.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork IS ALLOWED for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
- Actual users of the existing editing tool (NGO employees).
Judging Criteria
- Interpretation and adherence to the Microsoft Guidelines.
- Interpretation of the user experience.
- Is the application easy to use?
- Cleanliness of your graphics and 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. Layers should be named and well organized.
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.