Challenge Summary
Welcome to Technician Scheduling Tool Storyboards Contest Part 2. We need you to design pages for a web application based on an existing design as baseline.
Round 1
For your R1 deliverables please submit the following pages:
1) Supervisor Home
2) Add Technician
4) Technician Details
5) Customers
7) Customer Details
8) Equipments
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) Supervisor Home
2) Add Technician
3) Edit Technician
4) Technician Details
5) Customers
6) Add Customer
7) Edit Customer
8) Customer Details
9) Equipments
10) Add Equipment
11) Edit Equipment
12) Equipment Details
13) Super User Home
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. There are storyboards from a previous contest you will use as start point for graphic reference. 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.
- Notice “consistency” is part of the judgment criteria. Your design must follow the same guidelines than the provided storyboards.
- Your design must fit 1024 pixels wide screen resolution.
- Follow colors from the original design. 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) Supervisor Home (Wireframes: Supervisor Home - Technicians)
- Show filter search in a friendly way.
- Show technicians table. Take care of "view schedule".
2) Add Technician (Wireframes: Supervisor Home > Add Technician)
- Show all interaction workflows (add photo, add another, calendar).
3) Edit Technician (Wireframes: Supervisor Home > Edit Technician)
- Same as #2 but filled with data and editable information.
- Take care of photo update/remove interaction workflow.
4) Technician Details (Wireframes: Supervisor Home > Technician Detail)
- Follow wireframes.
- Make sure to re-use map and calendar features from the original storyboards.
5) Customers (Wireframes: Supervisor Home > Customers)
- Show table with search feature.
- Take care of interaction workflows (delete customers).
6) Add Customer (Wireframes: Supervisor Home > Customers > Add Customer)
- Show attachments workflow.
7) Edit Customer (Wireframes: Supervisor Home > Customers > Edit Customer)
- Same as #5 but filled with data and editable information.
- Show attachments workflow.
8) Customer Details (Wireframes: Supervisor Home > Customers > Customer Details)
- Show interaction workflow for delete button.
9) Equipments (Wireframes: Supervisor Home > Equipments)
- Show table with search feature.
- Take care of interaction workflows (delete equipment, view schedule).
10) Add Equipment (Wireframes: Supervisor Home > Equipments > Add Equipment)
- Follow wireframe.
11) Edit Equipment (Wireframes: Supervisor Home > Equipments > Edit Equipment)
- Same as #9 but filled with data and editable information.
12) Equipment Details (Wireframes: Supervisor Home > Equipments > Equipment Detail)
- Design a user friendly page, very understandable. Map and calendar are important.
- Show delete workflow.
13) Super User Home (Wireframes: Login > Super User Home - Accounts)
- Take care of interaction workflows (add user, edit user, overlays, permissions).
Target Audience
Clients, vendors and internal teams.
Judging Criteria
- Consistency with the original design.
- 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.