Hoherberg Ski School Design Challenge Series #2 - Products and Instructors UI

Challenge Overview
Hoherberg Ski School is very excited to see how the UI design from the previous winning wireframes come together. This winning wireframe has already addressed intensive client feedback for the past several months and they capture all required functionality to reflect their unique needs to manage the Ski School's daily activities. Good luck and let's discuss any questions you have. See you in the challenge forum!

Challenge Description
For this design challenge, we are not looking for any new concept ideas or new functionality. We are looking to take the wireframes and design the UI on top of them. We can still suggest the most optimal layouts and the best way to organize the content on the page, but these should be incremental changes, not large deviations from the wireframes.  

This is one of  Hoherberg Ski School Design Challenge Series. For this challenge we need you to focus specifically on the Products & Instructor section and remain use "design theme" from previous challenge. Expected submission design from this challenge need appear as one set that use same aesthetic design.

Round 1

Submit your initial design for a Checkpoint Feedback for these following features:
1). Products
2). Add New Product

• As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
• Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final design plus Checkpoint Updates for all features:
1). Products
2). Add New Product
3). Instructors
4). Add New Instructor

• As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
• Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

General Requirements

• This will be built as a desktop application
• The winning wireframes addressed intensive client feedbacks for the past several months to capture all required functionality and reflect the client's unique needs to manage the Ski School's daily activities
• You need to design the user interface based on the wireframes
• Click around on the wireframes to get very familiar with all interactions. We need capture all functionalities, interactions, popups, dropdowns, etc. as much as possible. There is some hidden data that is displayed after clicking certain buttons.
• We just get winning design from previous challenge. The expected results need appear as one set

Assets

• Check the winning wireframe from here: http://tc-wireframe.herokuapp.com/hoherberg-scheduler/merge/ff5/index.html#g=1&p=login___logout
• Follow client provided sitemap when design your design flow: https://www.draw.io/?lightbox=1&highlight=0000ff&layers=1&nav=1&title=Hoherberg%20Ski%20School%20V1.html#Uhttps%3A%2F%2Fdrive.google.com%2Fa%2Fappirio.com%2Fuc%3Fid%3D1dSjDOB1DUcVPxgNn9yESLq7zqSIe_MQJ%26export%3Ddownload
• Winning Storyboard Design: https://drive.google.com/open?id=18FFqpEPut1xG52wCB7-fmw4GMSX_WvkB
  • The source files are built in Adobe XD
  • We would prefer to keep 1 source file type for all design work related to Hoherberg client
  • Adobe XD is free and cross-platform (MacOS and Windows)
  • You can download Adobe XD for FREE here: https://www.adobe.com/products/xd.html

Individual Requirements
IMPORTANT: If there are screens or features included in the wireframes, make sure you include that in your UI design. We need to see everything included in the wireframes including modal windows, at least 1 dropdown style, interactions, etc. If you have any questions about if something should be included, ask in the forums

1) Products

• This is Products page look
• Add New Product button take user to Add New Product page below
• Product Category Management need load the modal window that will be able to manage the Product Category
• The user can type in the selection box to search for product names. In the actual application, the drop-down list will be filtered as the product types in the box.
• Details on the bottom will be change based on selected product
• Boxes grouped by Product Profile, Product Schedule & Skills Level also the Assignment Grouping
• Click Product Category need load tree-view selection
• Change scheduling pattern need load different condition. Capture all separate screens
• Assignment Grouping need able to change from Seasonal, Private or Other
• Need able to Add Date Specific Buffers
• Datepicker and buffer text displayed in page
• User need able to remove the Instructor Buffer row
• Assigned user will display the instructor name
• Need able to Unassigned and Swap
• Click Swap need load the Swap Instructor
• If there’s Scheduling conflicts need able to see the details via modal window
• User need able to revert changes and Save change
• Click revert changes need load the confirmation modal window
• Create any information/confirmation screen need displayed in page
• How the success and error message should look?
• Click save need load the information modal window

1a) Product Category Management modal window

• This modal show up when click Product Category Management button
• Click Add new Category need load another modal window explained below.
• Match level structure on the left side
• Need allow user to set the Category Color. How this works?
• Follow fields like on wireframe

1b) Add new Category modal window

• This is modal window that allow user to create new Product Category
• Match fields like on the wireframe
• Need allow user to set the Category Color.
• What happens after user add new POD?
• We need update this screen to capture the whole scheduling variables (scheduling pattern, dates, time, duration and days) like what we do at the product level.

2) Add New Product

• This is add new Product screen
• Boxes grouped by Product Profile, Product Schedule & Skills Level also the Assignment Grouping
• Notice requires deposit disable by default
• Need able to add Product Notes
• We need update this screen to capture the whole scheduling variables (scheduling pattern, dates, time, duration and days) like what we do at the product level.

3) Instructors

• This is Instructors page look
• Add New Instructor button take user to Add New Instructor page below
• POD Management need load the modal window that will be able to manage the POD
• The user can type in the selection box to search for instructor names. In the actual application, the drop-down list will be filtered as the user types in the box.
• Details on the bottom will be change based on selected Instructor
• Boxes grouped by Instructor Profile, Teaching Range & Skills also the Base Schedule
• Click POD need load tree-view selection
• Match fields content like wireframe
• Need able to add multiple language
• Need able to add multiple Teaching Age Rage And Skill Level
• Base schedule displayed start and end date
• User can select daily availability
• User need able to revert changes and Save change
• Click revert changes need load the confirmation modal window
• How the success and error message should look?
• Click save need load the information modal window

3a) POD Management modal window

• This modal show up when click POD Management button
• Click Add new POD need load another modal window explained below.
• Match POD level structure on the left side
• Follow fields like on wireframe

3b) Add new POD modal window

• This is modal window that allow user to create new POD
• Match fields like on the wireframe
• Parent POD need load tree-view level structure
• What happens after user add new POD?

4) Add New Instructor

• This is add new instructor screen
• Boxes grouped by Instructor Profile, Teaching Range & Skills also the Base Schedule
• Need able to add Additional Instructor Notes
• Follow fields like on wireframe

Target Device
We are targeting for a Desktop Application: 1366px by 768px (Height can expand as needed)

Target User

• Reservationist
• Ski school staff
• Management

Marvel Prototype

• We need you to upload your screens to Marvel App.
• Please send your marvel app request to lunarkid@copilots.topcoder.com
• You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).

Branding Guidelines:

• Use the provided Source Files as UI and brand guidance
  • You MUST keep things consistent and feel apart of the same application
  • We are NOT looking for new design directions, colors, global nav structures, or completely new UI style ideas. KEEP IT CONSISTENT
• Make sure we are keeping in mind that this is an application, not a website. Make sure you are using clean lines, easy to navigate user flows, good hierarchy of information/ data, smart use of color, etc.
• Important: Make sure you keep the contrast high in your designs. Text should be easy to read and CTAs should be easily noticeable. This means no light gray text on white backgrounds :)

Judging Criteria

• Your submission will be judged on the following criteria:
• Important: Consistency with wireframe functionality and concepts
• Important: Consistency with current UI functionality and design
• How well does your design align with the objectives of the challenge
• Execution and thoughtfulness put into solving the problem
• Cleanliness of screen design and user flow
• Ease of use

 
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 image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback

 
Source Files
All source files of all graphics created in Adobe XD only
 
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colours.