Challenge Summary
Welcome to Technician Scheduling Tool Storyboards Contest. We need you to come up with the look and feel of a business web application based on wireframes.
Round 1
For your R1 deliverables please submit the following pages:
2) Planner Home
3) Create Job
5) Schedule Job
6) Job Details (6.2 Scheduled only with Schedule and Equipment tabs)
8) XORA (map view only)
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens (01, 02, 03 etc.) – it’s easier to review.
Round 2
Final design will contain all the requested screens plus any updates from client feedback.
1) Login
2) Planner Home
3) Create Job
4) Edit Job
5) Schedule Job
6) Job Details
7) Daily Job Report
8) XORA
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens (01, 02, 03 etc.) – it’s easier to review.
The primary goal of this contest is to design the look and feel of this scheduling application. You will use wireframes for workflow, layout, navigation and data.
The client provides services to industrial customers; this application will help the client to properly schedule and organize their assets. In other words, the client needs an application that would allow it to manage, schedule, and track resources (such as technicians and/or equipment), their engagement, qualification, and availability. They want to have this information at their fingertips though a well-designed application.
Branding and Guidelines
- The main design guideline is to keep the design simple. Functionality is far more important than anything else. It must be easy to understand, clean. Anything too flashy or distracting should be avoided. That being said, useful graphics are welcomed.
- Your design must fit 1024 pixels wide screen resolution.
- Use the attached logo (Logo.eps).
- Colors are open to designers. Consider the logo and client website colors.
- Use web-safe fonts for the pages content. Beware of declaring your fonts according to the Studio font’s policies.
- Show all the hover states for all UI elements you create (buttons, hyperlinks, dropdowns, etc).
Storyboard Requirements
Follow workflow and layout guidance from Tech Scheduling Tool WF.zip. You need to create storyboards to cover the following pages.
Overall
- Make sure to provide screens for popups, collapase/expandable features, error forms, and so on.
- As a suggestion, click all the buttons in the forms to understand the interaction features of the application.
- Pay attention to some notes over the wireframes with UI descriptions.
1) Login (Wireframes: Login)
- Handle form error view.
2) Planner Home (Wireframes: Login > Planner Home - Jobs)
- Show filter workflow.
- Show the design for tabs content.
3) Create Job (Wireframes: Planner Home - Jobs > Create Job)
- Show the four steps UI forms and take care of validation error scenarios.
- At 1. Job Details show Customer field workflow (click on the "..." button).
- At 2. Equipment Requirements take care of the "+" button workflows.
- At 4. Product Details show "Customer Contact(s) at Location" workflow.
3.1) New Customer
- See at 1. Job Details, click "New Customer" button.
- Design this page.
- Take care of the workflows for "Add Another" links.
4) Edit Job (Wireframes: Planner Home - Jobs > Edit Job)
- Same as #3 but fill the forms with data.
5) Schedule Job (Wireframes: Planner Home - Jobs > Schedule Job)
- Show workflow for "Find Job Resources" button.
- When job resources are displayed, show content for both tabs. Also, show "View Schedule" (click on it).
6) Job Details
- There are four scenarios for job details classified by status; unscheduled, scheduled, in progress and completed.
- Design all screens for the four scenarios.
6.1) Unscheduled (Wireframes: Planner Home - Jobs > Job Details - Unscheduled)
- Design this page with content for all the tabs.
6.2) Scheduled (Wireframes: Planner Home - Jobs > Job Details - Scheduled)
- Design this page with content for all the tabs.
- At "Schedule" tab make sure to design an easily understandable timeline chart.
- At Equipment, Technicians and Products tabs notice there are interaction workflows (add buttons, release buttons, edit forms, overlays). Take care of all of them.
6.3) In Progress (Wireframes: Planner Home - Jobs > Job Details - InProgress)
- Design this page with content for all the tabs.
- Same interaction workflows as #6.2, it's not necessary to repeat them.
6.4) Completed (Wireframes: Planner Home - Jobs > Job Details - Completed)
- Design this page with content for all the tabs.
7) Daily Job Report (Wireframes: Planner Home - Jobs > Daily Job Report)
- Follow wireframes.
- Design an extra printer-friendly page (http://en.wikipedia.org/wiki/Printer-friendly).
8) XORA (Wireframes: Planner Home - Jobs > XORA)
- Show upload technician location workflow.
- Download technician location page should be very friendly, easy to understand. It's a map which shows location of the technicians.
Target Audience
Clients, vendors and internal teams.
Judging Criteria
- Originality.
- Design execution quality.
- User Experience.
Submission File
All requested contest requirements/screens as JPG or PNG files at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Preview Image
Create a 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.