Thor DC Starter App Design Challenge

Welcome to Thor DC Starter App Design Challenge. In this challenge, we are looking for your help to create the best possible UI/UX for our Thor DC Starter App, which will be used to configure a set of devices that are included in a particular customer order.

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 design for a Checkpoint Feedback

1) Login
2) Navigation
3) Locate Page

Round 2

Submit your Final Design plus Checkpoint Updates

1) Login
2) Navigation
3) Locate Page
4) Configuration Workflow
CHALLENGE GOAL
The goal of this challenge is to mimic provided design shared in video and make same changes like shared in screenshots.

APPLICATION FLOW

• This application is used to configure a set of devices that are included in a particular customer order. 
• The user starts by entering the order number. 
• The application queries the API and retrieves the order details. 
• These details include a list of individual devices that are used to populate the devices list. The details for each device are also fetched from the API. 
• Each of these devices needs to be configured before the order is complete. 
• Devices are configured by navigating to the device details page and clicking the Configure button.

DESIGN CONSIDERATION

• IMPORTANT: The PX Blue link shared bellow is just to ref. any divergent between video/screenshot and pxblue links, please follow the video/screenshot.
• The application should adhere to the PX Blue Design System guidelines available at https://pxblue.github.io, including:
  • Using PX Blue themes: https://pxblue.github.io/development/frameworks-web/react
    • Custom styling of components outside of what is provided by the theme should be kept to a minimum
  • Using PX Blue design patterns where appropriate: https://pxblue.github.io/patterns/login
  • Using PX Blue Colors and Iconography
    • https://www.npmjs.com/package/@pxblue/colors
    • https://pxblue.github.io/style/color
    • https://pxblue.github.io/style/iconography
    • https://www.npmjs.com/package/@pxblue/icons-mui

CHALLENGE FORUM
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum.

CHALLENGE ASSETS
https://drive.google.com/drive/u/0/folders/1skiPQsxSyUUFgIIywPi_tbNC0JRhsu2J

OVERALL REQUIREMENTS
The starter application should implement the following screens. Please refer to the attached video (workflow.mov) for visual mimic/workflow (workflow.mov)

SCREEN REQUIREMENTS
For this challenge, we are looking for the below pages to mimic the provided design shared in video and screenshots.The screen functionality details listed below are functionality restrict. You need to follow exactly have in video and applying changes related in screenshots.

1) Login

• The application shall implement an authentication guard that restrict access to the application pages until valid credentials have been supplied by the user.
• Registration and Forgot Password is out of scope

2) Navigation

• The main application should have a navigation menu with four primary pages:
  • Locate
  • FAQ
  • Print
  • Settings
• FAQ, Print and Settings should all be active routes with placeholder content
• Locate should be fully implemented and is described below.

3) Locate Page

• Upon first navigating to the Locate page, the user is presented with a search field (00:03 - 00:11)
  • The Order Number and Item Number fields should accept any alphanumeric input
  • Order Number should be limited to 10 characters
  • Item Number should be limited to 5 characters
  • Search button should be disabled until a valid Order Number is entered
• Upon submitting the order, an API request should be made to retrieve the details for that order.
• After retrieving the details for the specified Order Number, the screen shall display a list of devices associated with that order (00:12 - 00:16, deviceList.jpg)
  • The order details will contain a list of devices. The details for these devices should be fetched via another API call.
  • Each device on the UI will have a status field which will contain either a description of any current errors, or a Configuration Button
  • * The design for the toolbar has changed from what is seen throughout the video – refer to UpdatedToolbar.jpg for reference.
• Clicking the Device Name will open a device details page (00:17 - 00:19)
• This page shows assorted information about the selected device
• The design for this page has been changed from what is in the workflow video – refer to DeviceDetails.jpg for reference.
• Clicking the Configure button on the details page will trigger the configuration workflow
• Clicking the Configure button in the device list row will trigger the configuration workflow

4) Configuration Workflow

• The configuration workflow should open in a modal dialog
• There are 4 steps in the configuration that should be shown in a stepper
• At each step, a description of what is occurring should be shown below the stepper
  • For this sample application, you may use a timer to automate progress through the steps (~10 seconds per step)
  • For this sample application, you need to show the successful and error conditions.
• Once the configuration process is complete, the configuration button for that device on the Locate page should be replaced with a Configured badge.
  • This should include an API call to update the status of the device in the database

Important:
- Keep things consistent. This means all graphics styles should follow a set pattern.
- All of the graphics should be exaclty as shared

MARVEL PROTOTYPE
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to contato@luizrrodrigues.com.br (Challenge Copilot) 
- 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/comments this link while you upload).
 
BRANDING GUIDELINES
- PXBlue Guidelines
- High fidelity prototype assets

TARGET DEVICES
- Web-Based Application
- Desktop: minimum 1366px Width with Height adjusted accordingly

TARGET AUDIENCES
- Field Service Engineers

JUDGING CRITERIA
Your submission will be judged on the following criteria:
- Exaclty design mimic from video and screenshots
- 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
 
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 an editable layer

FINAL FIX
- As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colors