Colas USA Construction - Site Ticketing Application Design Challenge

Welcome to the Colas USA Construction - Site Ticketing Application Design Challenge. In this challenge, we are looking to create a mobile screens for a responsive website based on the given requirements, you have been provided with some sketches that helps with the content.

We are looking for you to define the initial design direction for this application by using best UX practices.

Good luck, looking forward to your designs!

Round 1

Submit your initial designs for Checkpoint Feedback

Please submit all variation on the My Jobs/Ticket Details (See Design Guidelines)
1) Login
2) My Jobs
3) Ticket Details

- Readme.jpg: Provide notes about your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.

All screens (See Design Guidelines)
1) Login
2) My Jobs
3) Ticket Details
4) Individual Job Graph Screen
5) Graph All Jobs Screen
6) Admin Alert Screen

- Readme.jpg: Provide notes about your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Purpose of this challenge is to come up with an mobile screens for a responsive web application. This website is to help formen on the job giving them alerts and important information via the ticket system.

Design Guidelines:
- Looking for a modern design interface!
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- In terms of the color palette, reference their website: http://www.colasusa.com/
- Please use the logo provided.

Required Design Sizes:
- Feel free to use the device mockups as required to show your designs. (make sure to comment about the link from where you are using the device mockup)
- In terms of viewport size, use mobile (iPhone 6 screen Layout) - 750 x 1334px

Challenge Assets:
- Brand logo: Please use them in your designs wherever applicable
- Navigation and Ticket Screen PDF: These shows the overall flow (might help a little with the contents), please do not copy - we are looking for you to improve the overall layout and user experience based on the contents required.

Required Screens:
We need below screens to be designed for this application..

1) Login Screen:
- Come up with a design for the login screen
- We get minimum details from the user
- - User Name (Accommodate up to 10 characters (field))
- - Password (Accommodate up to 10 characters (field))
- - Login Button 
- Clicking on login button will take the user to My Job screen.

2) My Jobs:
Reference: Please see Navigation.pdf
- My Jobs Today (Title of the screen)
- We need a date range selector i.e. allow user to select start and end date (to be defaulted to today's date), this need to be in consistently shown at the top.
- In this page, we show list of jobs and there could be many jobs (please see an example below)
- Each job will have four buttons (View Ticket, Export Ticket, Graph, Subscribe to Alerts).
- Below that we show the list of tickets, there could be many tickets within a job, so show varying number of tickets within each of the job.

At the bottom of the screen:
- We need “Graph All Jobs” (Takes the user to the Graph All Jobs Screen) and “Admin Alerts” (Takes the user to the Admin Alert Screen) Button
- These button need to be constant at bottom of the display (i.e. should be shown at all times)
- Looking for your thoughts on how all these information can be put up on the screen.

For Example:
Job 1 (with four buttons)
- - View Ticket Button (Takes user to the Ticket Information Screen)
- - Export Ticket Button (Exports a PDF copy of the Ticket Information Screen)
- - Graph Button (Takes user to the Ticket Graph Screen)
- - Subscribe to Alerts Button (Creates an alert on the Alert Screen)

List of Tickets for Job 1
- Ticket #1 (Displays up to 10 digits)
- Ticket #2 (Displays up to 10 digits)
- Ticket #n (Displays up to 10 digits)

Job 2 (with four buttons):
- - View Ticket Button (Takes user to the Ticket Information Screen)
- - Export Ticket Button (Exports a PDF copy of the Ticket Information Screen)
- - Graph Button (Takes user to the Ticket Graph Screen)
- - Subscribe to Alerts Button (Creates an alert on the Alert Screen)

List of Tickets for Job 2
- Ticket #1 (Displays up to 10 digits)
- Ticket #2 (Displays up to 10 digits)
- Ticket #n (Displays up to 10 digits)

Job N (with four buttons):
- - View Ticket Button (Takes user to the Ticket Information Screen)
- - Export Ticket Button (Exports a PDF copy of the Ticket Information Screen)
- - Graph Button (Takes user to the Ticket Graph Screen)
- - Subscribe to Alerts Button (Creates an alert on the Alert Screen)

List of Tickets for Job N
- Ticket #1 (Displays up to 10 digits)
- Ticket #2 (Displays up to 10 digits)
- Ticket #n (Displays up to 10 digits)

and so on...

3) Ticket Information:
- This shows the ticket details 
- It needs to show the below details in it..
- - - Ticket Number (Displays up to 10 digits)
- - - Date and Time (Displays a Date (Month/Day/Year – 10/8/15) and Time (11:30AM))
- - - Plant Name (Displays up to 20 characters and Links to Location Information screen)
- - - Customer Number (Displays up to 10 digits and Links to Customer Information screen)
- - - Customer Name (Displays up to 20 characters and Links to Customer Information screen)
- - - Product Number (Displays up to 10 digits and Links to Product Information screen)
- - - Product Name (Displays up to 20 characters and Links to Product Information screen)
- - - Order Number (Displays up to 10 digits and Links to Order Information screen)
- - - Order Name (Displays up to 20 characters and Links to Order information screen)
- - - Quality: Displays a ranking (Excellent, Good, Average, Poor)
- - - Unit of Measure (Displays up to 10 characters)

4) Individual Job Graph Screen:
Reference: Page 2 in Ticket Screen.pdf
- We need to display a graph for the activities within that job.
- There is an example graph shown at the bottom of page 2 in Ticket Screen.pdf..this shows the quantity against the time.

5) Graph All Jobs Screen:
Reference: Page 3 in Ticket Screen.pdf
- This needs to show a bar graph of all the jobs compared to one another
- For example: bar graph for Job A, Job B…...Job N, etc..
- Looking for your thoughts on how this need to be shown in the design.

6) Admin Alert Screen:
Reference: Page 4 in Ticket Screen.pdf

Global Settings
- - - Subscribe to 1st ticket of the day button
- - - Subscribe to all tickets button
- - - Subscribe to running totals button
- - - Subscribe to shift totals button

Specific Ticket Listings
- Need to lists all subscribed alerts with the ability to delete each on individually.
- This could show a list of each of the job with a option to delete the subscription (see example below)

For Example:
- Job A Alert (Delete button)
- Job B Alert (Delete button)
- Job N Alert (Delete button)

Target Audience:
- Foreman working on construction projects

Judging Criteria:
We will be judging on:
- How well does your design align with the objectives of the challenge
- Creativity of your visualization
- Cleanliness of your graphics and design
- Overall Design and User Experience

Submissions 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 for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

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. See more information about Final Fixes.