Challenge Summary
NOTE: You will be following the design styles from the provided designs
Really excited to see your submissions for this challenge!
Round 1
Submit your initial design for a checkpoint feedback
A. Client:
01 Client Dashboard
02 Create Order
03 My Orders
04 Order Details (New)
B. Drone Operator:
09 Drone Operator Dashboard
10 My Tasks and Task Details
11 Mission Situation Board
IMPORTANT
- In addition to submitting to topcoder, please upload your submission to MarvelApp as well.
- Request a Marvelapp link in forums or send a mail to csystic@gmail.com or tgerring@topcoder.com
- If you are submitting multiple submissions, please request marvelapp link each of them.
Please feel free to provide any additional screens necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client.
Round 2
Submit your final design with all checkpoint feedback implemented.
A. Client:
01 Client Dashboard
02 Create Order
03 My Orders
04 Order Details (New)
04.1 Order Details (Accepted and others)
05 My Deliverables
06 Deliverable Details (Awaiting Confirmation)
07 My Order Template
08 My Profile
B. Drone Operator:
09 Drone Operator Dashboard
10 My Tasks and Task Details
11 Mission Situation Board
12 My Tools
13 My Qualifications
IMPORTANT
- In addition to submitting to topcoder, please upload your submission to MarvelApp as well.
- You can reuse the Marvelapp prototype that you shared for the checkpoint
- If you are submitting multiple submissions, please request marvelapp link each of them.
Please feel free to provide any additional screens necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
The Drone Market will be a web platform where service provider can offer services to customers who are requesting it. We want you to focus on the workflow and bringing simple (creative) solutions to how these services will be surfaced to the client and drone operators. The purpose of this challenge is to come up with designs based on the provided wireframes and improve the user experience of the overall application.
Design Considerations:
- For this challenge we are focused on the Desktop experience: 1366 x 768px
- We are providing wireframes, Do not just color the wireframes (if you do all your designs will look the same) - please make sure to follow the contents from the provided wireframes and look to improve the overall User experience.
- Please follow the overall design style from the provided storyboards.
- Please use the Branding that was shared, we will provide the logo (it should be just AIRBUS as used in the provided storyboards and not AIRBUS group), use the colors, fonts and follow the icon design styles as given in the branding guidelines.
- Your designs should follow the same layout and UI as the provided storyboards. This is VERY important. What you are designing is just another user group for the same application so it should all feel/ look the same.
- NOTE: Some screens might be repeated, please look to reuse from the provided storyboards
Challenge Assets:
Existing Storyboards and sources:
https://drive.google.com/drive/folders/0B2MK5NncVSuQM09GYnA4dGNPdzA?usp=sharing
Wireframes and Branding Guidelines:
https://drive.google.com/file/d/0B2MK5NncVSuQRjF0T1IwdjNlY1k/view?usp=sharing
Required Screens:
We need below screens to be designed...
A. Client:
01 Client Dashboard
Reference: Client Dashboard
- Need to show below sections in the dashboard, looking forward to your thoughts on how effectively these can be shown in dashboard
- My Orders (New/Pending, Accepted, Rejected, In Progress)
- Deliverables awaiting confirmation
02 Create Order:
Reference: Create Order
- There are six steps in the process of creating an order
- Think on how the overall progress of creating an order can be shown
- In “Enter Service Details” the service request contact details has an option to import the details by looking up by clicking on “Import Contact Details” link..please make sure to capture design for this look-up..show us how this will work in your designs.
- Please make sure to create designs for all the steps.
03 My Orders:
Reference: My Orders - New/Pending
- Need to see a list of orders with status/ tabs for different Order progress: New/ Pending, Accepted, Rejected, In Progress, Completed, Archived
- Each of the tabs will have orders with appropriate actions, think on how best to show these tabs.
- Click on Filter and search, and show us how these need to be put up.
- Please make sure to capture design for the date range calendar pop-up
Edit Order:
Reference: Edit Order
- This is same as the create new order, just that the fields already have the contents.
04 Order Details (New):
Reference: Order Details (New)
- This page shows the details of the order!
- Before submitting an order, user will still have edit options.
- How should this page be put up?
Order Details (Accepted and others)
- Details are almost same as a new order but there won’t be any edit option but we will have other action buttons based on the status of the order!
- We would like to think on how the status of the order need to be shown
- Please create views for the orders with all status (this will help create a flow in marvelapp)
- Clicking on “Archive Order” will show a modal window, think on how to show them!
05 My Deliverables:
Reference: My Deliverables-Awaiting Confirmation
- This page allows users to see the deliverable that are awaiting conformation and that are complete
- Show us how this will look like in your design.
06 Deliverable Details (Awaiting Confirmation):
- Clicking on “Details” button on any item under My Deliverables-Awaiting Confirmation will show this page.
- Follow the content from wireframes
07 My Order Template:
Reference: My Order Templates
- This shows the list of order templates
- Create this page as shown in the wireframe.
Create New Order Template Details:
- This is same as create new order, just that a user will entering a new name for the order template.
Order Template Details:
- This is a same as a Order details (New)
08 My Profile:
Reference: My Profile
- Follow the contents from the wireframes, we need to capture the screens for all items shown in the left sidebar
- Think on how the left sidebar need to be put up?
- Clicking on “Edit” in My account shows the edit view, please make sure capture this edit view.
B. Drone Operator:
09 Drone Operator Dashboard:
Reference: Drone Operator Dashboard
- My Schedule
- My Tools
- My Drones
- My Profile
- My Qualifications
- New Tasks
10 My Tasks and Task Details:
Reference: My Tasks and Task Details
- This shows the list of tasks.
- Clicking on Details will show the task details
- Think on how these pages can be designed / feel free to reuse any designs from the provided storyboards.
11 Mission Situation Board:
Reference: Mission Situation Board
- This shows the mission situation board in “In-Progress” state
- Please design this as shown in the wireframe
12 My Tools:
Reference: My Tools
- Think on how the list of tools available to the users can be shown?
13 My Qualifications:
Reference: My Qualifications
- This page shows the list of qualifications
- Each of the qualification that were added will have actions (Edit / delete)
- Show us the design on how a user will add a new qualification (Page reference: Add Qualification)
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target Audience:
- Client and Drone Operators
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience.
- Consistency across the UX/UI
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 for your submission files.
Submit/Share an Marvelapp link as part of your submission.
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.
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.