TECAMS - Appointments App Design Challenge

Welcome to the "TECAMS - Appointments App Design Challenge". In this challenge, we need your help to create the best possible UI and UX for our new TECAMS application that will be used to help manage a commissioning appointment requests from all stakeholders involved in the app.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Round 1

Submit your initial designs for checkpoint feedback
01) Homepage/Dashboard Screen
02) New Appointment Details Screen
03) Appointment Time Slot Screen - Business Hours
04) Appointment Time Slot Screen - After Hours
05) My Work Schedule Screen 

• 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs with all checkpoint feedback implemented
01) Homepage/Dashboard Screen
02) New Appointment Details Screen
03) Appointment Time Slot Screen - Business Hours
04) Appointment Time Slot Screen - After Hours
05) My Work Schedule Screen 
06) Interaction Screens

• 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

CHALLENGE OBJECTIVES

• Design concepts for a Responsive web application (Focus on Desktop for this challenge)
• Understanding the problem and providing an engaging solution

 
BACKGROUND OVERVIEW

• TECAMS is a new application that will manage the requesting, fulfillment and maintenance of commissioning appointment requests.
• A commissioning appointment is an agreed date and time where a Technician will be remotely available to login to the customer's managed devices and remotely action the agreed work as per the appointment tasks and work types.
• There are two main types of appointments:
  • Business Hours: real-time allocation and reservation of a Technician
  • After Hours: an appointment request which is raised and then needs to be manually approved and allocated to the one or more Technicians
• The application requests will mostly be for corporate/enterprise customer types, no consumer/retail requests are expected.

 
CHALLENGE GOAL

• The goal of this design challenge is to design the best UI for our new TECAMS application and cover all required scenarios in the app

 
USER

• The following user roles are supported by TECAMS. A person may hold multiple roles from the list. Application privileges are always positive not negative (ie having a role unlocks a capability, but never denies you by having one):
  • Appointment Requestor: A project manager or coordinator who is liaising with the customer to agree on the time slots and raises the appointment requests. This user role also will request management actions like canceling or updating existing appointments
  • Resource Manager: Responsible for after-hours approval and resource allocations. Typically a team leads or manager for the Technician users
  • Technician: Person who is actioning the tasks of the appointments. Will update the tasks in TECAMS on completion, view appointment details or reject a task if needed
  • System Admin: The IT support team only for TECAMS
  • Reference Data Manager: Will manage the list of values and other configurations in TECAMS
  • Reporting Access: Will manage the list of values and other configurations in TECAMS

DESIGN CONSIDERATION

• We are looking for an intuitive, easy-to-use, corporate, modern design
• Best Practice for Responsive Web Application (Need to support Cross-Browser - Focus on Desktop for now)
• Use color or great visual comparison to highlight a comparison or important information
• Easy to navigate the investment process, encourage iterative experimentation
• Intuitive for the user; should never be left asking "what do I do next?"
• Easy viewing for pages that may be over overcrowded with information

CHALLENGE FORUM

• If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum: https://apps.topcoder.com/forums/?module=ThreadList&forumID=724877

SCREEN REQUIREMENTS

APPOINTMENT REQUESTOR ROLE SCREENS
01) Homepage/Dashboard Screen

• Refer to “TECAMS-Project Manager - Home Page(WIP).png” (very basic reference - be more creative!)
• The dashboard screen will allow users to use TECAMS capabilities that are allowed as per the role assigned to them. Capabilities exposed on the dashboard screen will differ according to the user role. Example: Only the users with the role of Appointment requestor will be allowed to create new appointments and only the user with the role of Resource Manager allowed to manage after-hours request
• We need to create a dashboard for Appointment Requestor after they logged in
• Show a list of all requested appointments available in the current system and based on the appointment status.
• In the appointment list, show the summary of the appointment (customer, technician, task, date and time, type, status appointment, etc)
• Need a button where the user can create a new appointment
• Provide Main navigation where user can navigate and explore all app features 
• Ability to Sort, Filter, or Search appointment on the screen to find an appointment?
• User Profile information (user roles, name, etc)
• Ability to navigate and drill down into appointment details (View More)
• Ability to navigate and edit appointment details
• Ability to reschedule an appointment 

02) New Appointment Details Screen

• Refer to:
  • TECAMS-Search slots - Appointment details page.png
  • TECAMS-Search slots - Sample Error.png
  • TECAMS-Search slots - Appointment details page-With Appointment extensions.png
  • TECAMS-Search slots - Customer and Contacts.png
  • TECAMS-Search slots - Tasks and Dates.png
  • TECAMS-Search slots - Appointment Review page.png
• User (Appointment Requestor) can access this page if they click the “New Appointment” button
• Provide a notification/modal window/popup to notify users that they need to clear the previous session or request. Previous requests should be cleared each time any user starts a new operation. Provide a button in the notification so the user can clear out the previous session or request.
• User will need to enter all detail information before able to navigate and move forward to the next steps
• There are several detailed pieces of information regarding the appointment that the user needs to fill in, so let’s provide a way to manage and help the user to fill the appointment details 
• The user will need to enter appointment information details into the system, such as:

Appointment Details information 

• Refer to:
  • TECAMS-Search slots - Appointment details page.png
  • TECAMS-Search slots - Sample Error.png
  • TECAMS-Search slots - Appointment details page-With Appointment extensions.png
• Choose Appointment Priority (values: Standard or Urgent)
• Choose Appointment Type (Values: Business Hours or After Hours)
• Choose Appointment Sub-Type (values: Cutover or Non-Cutover)
• Each Appointment type is associated with a list of appointment sub-types.
• Therefore, appointment sub-type should display option values associated with the selected appointment type only.
• Once the sub-type is confirmed, an API will be triggered to fetch the required additional appointment details based on the Appointment type. Please refer to Create New Appointment – Business hours flow to understand the touchpoints where UI needs to integrate with backend APIs during the journey of raising a new commissioning appointment

Customer & Contacts 

• Refer to:
  • TECAMS-Search slots - Customer and Contacts.png
• Users will enter details of the customer and contacts in this screen 
• When the user typing customer or contacts name, it should show auto-suggestion of the available customer or contacts from the system.

• Refer to: 
  • TECAMS-Search slots - Tasks and Dates.png
• User will enter details of the task that needs to be done by the technician by the customer request
• Users will need to select the preferred date for the appointment.

• Refer to:
  • TECAMS-Search slots - Appointment Review page.png
• Users will be able to review all appointment details from previous steps and do necessary editing if there is something that needs to be adjusted. 

 

• Once the user done filled in all appointment information and validate it via review page, they will be able to continue to the next step to find available slots based on their appointment request 

03) Appointment Time Slot Screen - Business Hours

• Refer to:
  • TECAMS-Search slots - Success.png
  • TECAMS-Search slots - Success- Display time slots.png
  • TECAMS-Reserve Appointment.png
• This screen will appear once the user  (Appointment Requestor) click “Search available slots” button and finish fill in all appointment request information in the previous page
• This screen will appear if the user selects “Business Hours” in the Appointment Type
• In this screen, users will be able to select the date and time slots to schedule the appointment request 
• Based on the preferred date that the user selects earlier on the appointment details, the system will show available time slots in the system for their preferred date.
• There will be a selection of available time slots based on the business hours for their preferred date. However, If there are no slots available (all full) for that date, the system will notify the users to select other dates and show the available/empty time slots options for them. This process is automatic and once the date and time is set, there is no further more action needs to be done by the users
• Provide a confirmation window or preview so users can review their appointment date and time request
• Once the date, appointment type and time confirmed, use then will be able to submit the appointment and get a notification that their appointment request has been scheduled (TECAMS-Reserve Appointment - Success.png)
• Refer to “Create New Appointment - Business hours.png” flow chart to see the complete flow for Business Hours and it’s interactions

04) Appointment Time Slot Screen - After Hours

• This screen will appear once the user  (Appointment Requestor) click “Search available slots” button and finish fill in all appointment request information in the previous page
• This screen will appear if the user selects “After Hours” in the Appointment Type
• The after-hours type of request has the following key differences from the Business Hours type:
• Requestor gives the requested start date/time and end date/time for the work, they do not pick from any available slots.
• In the after-hours request, the user will need to provide notes or additional funding details/codes to capture. The user also will be provided with another contact role “Customer After Hours Funding Approver” which is mandatory
• The user will get an appointment ID reference once they complete the appointment request and being notified that their request will need to go through review/approval/allocations and is not confirmed to go ahead as yet. This interaction makes it differs from the business hours request where the slots are reserved and allocated immediately
• Refer to “Create New Appointment - After hours.png” flow chart to see the complete flow for After Hours and it’s interactions

RESOURCE MANAGER ROLE SCREEN
05) My Work Schedule Screen 

• This screen will be available for the Resource Manager role where they can check and view After Hours user appointment request that being assigned to them 
• For a Pending appointment, the Resource Manager will manually check the appointment request:
• Resource Manager will validate the appointment request details to see if it’s funding/data information complete or not. If the details unclear or not correct, the Resource Manager will mark the appointment request as “Rejected” or “Cancelled” and select the rejection reason from a list (use dummy list for now - the rejection reason content will be populated from API in the system later), they also need to put additional detail information in a text area why the appointment being rejected/canceled
• If the appointment request details are correct, the Resource Manager will then search and find a candidate technician that is available and able to work on that appointment in the requested date and time. If there is no candidate available to work on that task, the Resource Manager will reject/cancel the appointment request and provide information about why the request was rejected.
• If there is candidate technician available to work on the appointment request, the Resource manager will be able to see list of all available technician, view their information, and then assign technician from that list to each task in the appointment request
• There might be a single or multiple technicians assigned for the appointment request, it all depends on how many tasks need to be performed for the appointment. 
• Once the manual assignment is done, the Resource Manager needs to confirm the assignment. We need two confirmation message, one for a successful assignment, and one for error assignment due to some particular reason
• Refer to “Approval flow - After hours appointment.png” flow chart for more details on how this screen works

06) Interaction Screens

• Create any necessary interaction screens for the app, such as:
  • Error Message,
  • Success Message,
  • Expected Validation,
  • Unexpected validation,
  • Popup Style Screen,
  • Confirmation Screen,
  • GUI KIT,
  • Etc.

 
IMPORTANT

• Keep things consistent. This means all graphics styles should work together
• All of the graphics should have a similar feel and general aesthetic appearance

 
MARVEL PROTOTYPE

• We need you to upload your screens to Marvel App
• Please send your marvel app request in the challenge forum 
• 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 on this link while you upload)

 
TARGET DEVICES 

• Desktop: min 1366px width and height as required

 
DOCUMENTATION

• Google Drive: https://drive.google.com/drive/folders/1jdE1M6kXKCZsuPiPu6zRx7NsbKpZcmHc?usp=sharing 
  • Screen References (TECAMS - Search and Reserve Folder)
  • App Flowchart and Diagram
  • Logo

BRANDING GUIDELINES

• Branding is open
• Typography is opened to designers
• Stock photos and stock icons are allowed from the approved sources

TARGET AUDIENCE

• Corporate Customers
• Internal Employees

 
JUDGING CRITERIA

• Your submission will be judged on the following criteria:
  • Overall idea and execution of concepts
  • How well do the concepts engage the user in a better learning experience
  • Cleanliness of screen design and user flow

 
SUBMISSION AND 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 (Might need to convert it to PSD later), XD, or Sketch and saved as an editable layer

 
FINAL FIXES

• As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.