Challenge Summary
Welcome to Drone Series - Service Provider B2B UI Design Challenge!
We are looking to help plan out our new drone B2B marketplace for Drone Service Providers to perform a variety of tasks. We recently completed the wireframes for this application, this should help you get started with your designs!
Really excited to see your submissions for this challenge!
Round 1
Submit your initial design for a checkpoint feedback
01 DSP Marketplace
02 DSP Dashboard
03 Orders
04 Order Details Page (In Progress and Completed)
09 Fleet Dispatch Board
But 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.
01 DSP Marketplace
02 DSP Dashboard
03 Orders
04 Order Details Page (In Progress and Completed)
05 Payments
06 Tasks
07 Create New Task
08 Mission Flights
09 Fleet Dispatch Board
10 Drone Operators
11 Drones
12 My Service Catalogue
13 My Profile
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 Service providers. 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, so have your designs of 1366px width and height as required.
- We are providing wireframes to help you get started with the designs.
- 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 use the Branding that was shared, we will provide the logo, use the colors, fonts and follow the icon design styles as given in the branding guidelines.
Required Screens:
We need below screens to be designed...
01 DSP Marketplace:
- This acts as the B2B marketplace homepage..
- This shows the list of service categories
- Show the list of Tools and support links for different users (Drone Service providers, Drone operators,
- Please make sure your designs works for a B2B users.
- Think on how a user will login or sign up in the site (please see login and register page in wireframes for the details to be captured here).
Marketplace Category:
- How should this page look like?
- This shows the list of services being offered in this category, think on how it can be shown.
02 DSP Dashboard:
- How will the dashboard look like?
- What should be important in this page?
- Include the sections as shown in the wireframe.
- Looking forward to your thoughts on how this can be designed.
03 Orders:
- This need to show orders based on different status, think on how this can be shown
- Provider options to search and filter through the list of orders
- There are difference actions associated based on the status..please see below
- For New / Pending Order: We have these actions - Order Details / Accept and Reject Orders
- For Scheduled Orders: We have these actions - Order Details / Edit Task and Cancel job
- For In Progress Orders: We have these actions - Order Details / “Mark as Complete” button (this will mark as a complete)
- For Completed Orders: We have these actions - Order Details / “Send Results to client” button (this sends the deliverable to client)
- Clicking on Details will show the details in an accordion, think on how to show the details (should it be accordion? Looking forward to your thoughts).
- Accept and Reject Order will show a modal window..please plan on how to show these views.
- We like that after accepting a request it takes the user through the create task flow
- Note: On rejecting a request, user will be required to enter the reason why it’s being rejected.
04 Order Details Page (In Progress and Completed)
- Order details page with status in-progress or completed need to show some additional details than just the contact information.
Order Details - In progress:
- In the page, user will be able to see the how is the progress of the order
- They will be able to view the basic order details
- Should be able to view the drone telemetry details, route map and live video feed.
- Provide ability to
- - - Update Progress: Allows user to change start / end dates, and upload deliverables
- - - Send Progress: Allow the user to send the progress that was updated to the client
- - - Mark order as complete: Allow the user to mark the order as complete
Order Details - Completed:
- This is same as order details - in progress
- This includes just two action buttons:
- - - Update Mission Info: This is similar to “Update Progress” in ‘order details - In progress’
- - - Send results to client: User will use this button to send the final results to client.
05 Payments:
- This shows the list of pending and paid payments
- Think on how best to show this information?
- Would be good if we have a statistics of the overall amount paid so far and pending payments, total payment earned!
- User should be able to search and filter through the list of payments
- Looking forward to your designs thoughts.
06 Tasks:
- User should be able to view a list of tasks
- Provide ability to create or edit a task
- Should have option to delete a task.
- User should be able to search and filter through the list of tasks.
Task Details:
- This will have the basic task details, details about the drone that was assigned and also the profile information of the drone operator.
- Think on how these need to be shown in the designs.
07 Create New Task:
- While creating a new task, you will be required to enter basic task details and then assign drone and drone operator
- We are looking for your design thoughts on how the overall progress need to be shown and how does a user know what steps they need to complete to create a task.
- Show us how the user will choose a drone and drone operator.
- Note: For a task, only one drone and drone operator can be assigned.
08 Mission Flights:
- This need to show the list of flight plans that are new / planned, In Progress or Completed.
- We need you to show a list of flight plans for each of above status, these flight plans are mapped to the task.
- This also need to show a map of all the flight plans
- Note: There are specific actions for flight plans based on the status..please make sure to capture all the required call to actions in each of the tabs.
09 Fleet Dispatch Board:
- This shows a status and availability of drones and drone operators
- Wireframe shows a map-based view showing the orders and tasks for the selected time period (day, week, month).
- Table view with “gantt chart” with the drone operators / drones availability over time (day, week, month).
- Clicking on a user should be able to assign or unassign a task from drone and drone operators.
- Looking forward to your design thoughts on how this can be done.
10 Drone Operators:
- This shows the list of drone operators
- Should be able to add or edit a drone operator
- User should be able to search and filter through the list of drone operator.
- In the list, we see the name as well as the “Details” button linked to the same details page...so please make sure just the name is a link (we can remove the details button as it is not necessary), please think through the layout so it improves user experience.
Add New Drone Operator
- User will be able to create a new drone operator
- Capture all required details from the wireframe for the profile
11 Drones:
- This pages shows the list of drones
- Should be able to add or edit a drones
- User should be able to search and filter through the list of drones
Add New Drone
- User will be able to create a new drone operator.
- Capture all required details from the wireframe for the profile
12 My Service Catalogue:
- This allows the user to view list of pricing for each of the services
- Provide way for the user to create or edit a service
- User should be able to delete the pricing
Create New Service
- Creating a new service involves entering /selecting the name, service category, price and description.
13 My Profile:
- User will be able to view and edit their profile
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:
- Service Providers B2B
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.
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.