Hoherberg Ski School Design Challenge Series #1 - Reservations UI Design

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 the 1st of a Design Challenge Series to create the initial HoherbergSki School application look and feel. For this challenge we need you to focus specifically on the Reservation section and create a "design theme" and UI that can be reused on the next Hoherberg Ski School Design Challenge Series challenges.

Round 1

Submit your initial design for a Checkpoint Feedback for these following features:
1). Login
2). Reservation Check in
3). Create Reservation
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). Login
2). Reservation Check in
3). Create Reservation
4). Booking
5). Edit Reservations
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 already 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.

Assets

• Check the winning wireframe from here: http://tc-wireframe.herokuapp.com/hoherberg-scheduler/merge/ff4/index.html
• 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

Individual Requirements
1). Login

• This will be a simple login to capture username and password
• Display Remember Me and Forgot Password links

2). Reservation Check-In

• We need to display smart search on top to search the reservations data
• Availability widget on top displays the Adult/Child availability information on a daily basis. This widget will be use on other pages as well. Design this for quick access
• User can change the custom date that will affect the availability column
• Hovering on a cell needs to display tooltips for Instructor availability and skill level
• Below the user can see the table list
• Each column needs to be sortable
• There is additional input/dropdown to search on that column. How should this work to make it more user friendly?
• There will be lots of data to display, we need to support pagination where it makes sense
• Click on table row will display Customer Information and Reservation Information
• Match required CTAs and buttons
• Clicking the Update button needs to display the update contact form
• Clicking the Check-In button needs to load the success message and another reservation information
• Edit Reservation needs to take the user to a separate page explained below
• Cancel Reservation needs to load confirmation with additional buttons for Refund Credit Card, Capture Booking Fee and Cancel

3). Create Reservation

• Create reservation will display options for Private Lessons, Group Lesson, and Learn to Ski
• There are a few different Create Reservation flows that need to be created. All are based on the same general layout with just different widgets or components being switched in and out
• We need you to create user friendly selection to capture some options before go to Reservation page:
  • New or Existing Skier
  • Private or Group Lessons
  • Specific or Any Instructor

Flow 1: Private Any Instructor - Existing Client

• This is a Private Lesson with any instructor for an existing client
• Design how the step wizard should look for the application
• Hover over the cart to view the total amount details
• Need the ability to search for an existing Skier
• There’s a modal window to find the Skier
• Select the Skier needs to return data to the Step Wizard page
• Under Reservation Date/Time, we need the ability to add another date
• See dynamic update for start and end date for p-code 1 and times between 9-10 in the start time and 10-11 in the end time.
• Calendar timeline displayed on the right side to view availability on selected date
• Need ability to add additional Skiers
• There will be Skier history data in this page
• Reservation Details contains the meeting details, note and taken by
• Skier details contains current Skier information, need ability to pull data for the existing skier
• Reservation contact will be for parent contact information (if minor)
• There are 2 flows for confirmed button that will be explained in more detail below
• Click + add reservation needs to load the modal window that contains some additional information
• Exit needs to alert the user that data will be lost

Flow 2: Private Specific Instructor - Existing Client

• This is for Private Lessons with a specific instructor and an existing client
• How to present this flow in your designs? Follow the wireframes for guidance
• Flow 3: Private Specific Instructor - New Client
• This is for Private Lessons with a specific instructor and a new client
• How to present this flow in your designs? Follow the wireframes for guidance

Flow 4: Private Any Instructor - New Client

• This is for a Private Lessons with any instructor and a new client
• How to present this flow in your designs? Follow the wireframes for guidance

Flow 5: Group Any Instructor - New Client

• This is for a Group Lessons with any instructor and new clients
• For Group lessons the widget will display different data
• Skier input criteria needs to display different data fields
• Reservation date uses less columns
• Calendar Availability will be displayed per-day
• Reservation info remains the same
• Reservation contact displayed on bottom

4). Booking
There are a few different Booking flows that need to be created. All are based on the same general layout with just different widgets or components being switched in and out:

Flow 1: Booking 1, Confirmed

• This is for a booking with 1 Skier, confirmed
• Cart needs to display the number of bookings
• Display booking summary information
• There will be a checkbox to send an email to the Skier (confirmation)
• Need ability to waive the booking fee
• Add notes to the booking receipt/ confirmation email
• Checkboxes for, has the cancellation policy been explained to the client?
• Credit Card & Billing Address information displayed on the bottom
• Clicking Book needs to load the success message

Flow 2: Booking 1 Group, Confirmed

• This is for booking a Group Lesson, confirmed
• Make sure it’s easy to distinguish between Private and Group lessons

Flow 3: Booking 3, Confirmed

• This is for booking with a Skier with 3 different dates/times confirmed

Flow 4: Booking 3, Confirmed, 1 Pending

• This is for booking a Group Lesson, confirmed
• Make sure it’s easy to see/ understand the booking status and details

5). Edit Reservations

• User lands on this Edit screen from the Booking page
• Need the ability to edit the Reservation information
• Notice that some information, like Credit card details, is not editable

Target Device
We are targeting for a Desktop Application

• Desktop: 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 attached logo on your design submission.
• Branding is open to the designer, but we should be implement client primary colors:
  • #9d2b2a
  • #fe1913
  • #b18b10
  • #ffffff
  • Grays
• 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
• Overall idea and execution of UI
• 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 either Adobe Photoshop, Illustrator, XD, or Sketch and saved as editable layer
 
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colours.