Challenge Summary
Welcome to the Drone Series - Consumer and Provider Marketplace Website Design Challenge. The Drone Market will be a web platform where customers can request a drone to provide a service. Examples of the services would be drone delivery, mapping, monitoring and many other tasks. We want you to focus on the workflow and bringing simple (creative) solutions to how these services will be surfaced to the consumers.
At the end of this challenge, we are looking for the Topcoder Design Community to help us plan and design the user experience of our new application
01 Homepage
02 Drone Provider List
03 Drone Provider Details
04 Request a Service
05 Track Requests
05.1 Results View
07 My Requests
07.1 Assign a Drone
You must upload your submission to InvisionApp so we can provide direct feedback on your designs.
- Please request an InvisionApp link from the Copilot through the challenge forum.
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
01 Homepage
02 Drone Provider List
03 Drone Provider Details
04 Request a Service
05 Track Requests
05.1 Results View
06 Dashboard
07 My Requests
07.1 Assign a Drone
08 Request Details
08.1 Edit Telemetry Data
09 My Drones
09.1 Drone Details
10 Services
You must upload your submission to InvisionApp, for the final submission - you can reuse the prototype that you shared for checkpoint
- Please request an InvisionApp link from the Copilot through the challenge forum.
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
You are provided with wireframes from the challenge that we just ran, please make sure you don't just color the wireframes as we are looking your help in designing the user expereince of this new application. Please view/research other marketplaces like dronebase.com or taskrabbit.com for ideas but please do not copy them, if you do all submissions will look the same!
User Stories:
Consumer:
- As a consumer, I will be able to view providers based on geographical location (browser should detect my location or enter a zip code)
- View providers by category of service, photography, delivery, construction, etc…
- One I have selected my provider, I will see detailed list of services, take for an instance drone delivery, I will have 3 options
- - - Simple Delivery
- - - Delivery with photo of delivery
- - - Authenticated delivery via bluetooth
- Once I have select my service package, I will be able to request my service by choosing a location (entering address or selecting it on map), enter delivery time, my contact information and additional notes field.
- I drop the package to be delievered at the drone parcel service (Note: this package will be placed in the drone by a drone employee and sends it off to the delivery location).
- After the delivery, I can view flight telemetry data including, start and end time of the trip, any photos taken of the trip, average altitude, speed of the drone, etc
- After delivery I can rate the provider based on a star rating and provide some comments.
Provider:
- As a provider, I will be able to view requests for my services and the status of each request.
- - I can click on a request and see all of the request details and be able to accept or reject the request.
- From an accepted request, I will be able to click a button to deploy the mission parameters to my drone.
- - - I will need to be able to select the drone to deploy the work to.
- I will be able to view the status of my drones
- - - I can see by drone when they are scheduled and what requests are assigned to them.
- Upload mission results
- - - As a provider I can preview flight telemetry and photos from a mission and hit a button to publish results back to the platform.
Design Guidelines:
- Create your designs of size 1280px width and height as required
- UPDATE: Please use the attached color palette in your designs, looking for your help to coming with the initial design direction.
- Your designs need to be responsive.
- Make sure all UI elements are scalable vectors, so it helps us resize it as required!
- Please make sure the design you upload to invision fits properly and doesn't look too big.
Required Screens:
We need below screens to be designed..
01 Homepage:
Reference: homepage__before_log_in_.html
- This page will be common to both consumers and providers, so please think on how best to design this page
- User visits website, grab user’s location either using geo-location or get their zip code.
- Once the location of the user is captured, we show the list of drone providers.
- Homepage also need to show some promotional elements that captures the attention of both consumers (people looking for drone services) and providers (people offering drone services)
- We would like to have a "How it works" section
- Good to show some "Feedbacks/ratings" of featured drone providers.
- Show some of the featured services or frequent services that are being bought by consumers.
A. Consumer:
Please find the reference submissions in "Wireframe winners > Consumer Wireframes" Folder
- Most of the references mentioned below are from the 1st place unless otherwise specified
02 Drone Provider List:
Reference: drone_provider_list.html
- This page shows the list of drone providers based on the user location or zip code
- Make sure to include a filter, think on how to design them!
- We like the idea of showing maps and list, think on how to present these in the page, make sure it is not crowded!
- Like the idea of showing categories in the sidebar but feel free to move it anywhere else you think would help get more space for the maps, etc.
03 Drone Provider Details:
Reference: drone_provider_detail.html
- This page shows the drone provider details, ratings / feedbacks that were received from consumers and also the services (catalogs) done by the drone provider!
- User will choose the Catalog, assume three types of catalogs in your design "Simple Delivery, Delievery with photo of delivery, Authenticated Delivery via bluetooth"
- Once they choose the catalog, we show three types of package with appropriate pricing under it...they will be "Gold, Silver and Bronze" package (please see 2nd place submission "drone_provider_details.html" for reference, click on a service "delivery > loged in > you can see sample image and below that available packages (assume the names of the package as gold, silver, bronze)")
- Looking forward to your design thoughts on how the catalog and the packages under it can be shown.
- Once a package is chosen, they move to "Request a Service" page
- Before a user can request a service they should be logged into the website, wireframe flow doesn't show that - so please show a modal or prompt that allows them to login (think on how it needs to be shown?)
- Please provide option for the consumer to Rate/provide feedback to the provider, please see this page providerdetails-rate.html from 3rd place!
04 Request a Service:
Reference: request_a_service.html
- This page allows the user to enter details of the request.
- User will need to enter all details as shown in the wireframe, think on how to better arrange them.
- For "Item Dimensions", we would like you to indicate / provide help information on how it need to be entered (For ex: you can show placeholder text within the textbox as "Length X Width X height", etc)
- User will be able to choose the delivery location from the map
- How will the error page look like if all details entered were not correct?
- When a request is sent, we would like you to show success screen - something similar to request_sent.html but we would like to improve this page, looking forward to your design thoughts!
05 Track Requests:
Reference: request_status.html
- This page shows the list of requests that were sent to the provider
- Each of the request need to include their current status (please see if you can work out the color coding for status as shown in 07 My Requests page - please see below).
- User will select a request and views more details about it
- If the status of the request is completed, then they will be able to view the results (please see below)
05.1 Results View:
Reference: requestdetails-completed-publishresults.html from 3rd place submission
- We like the results view (requestdetails-completed-publishresults.html) from 3rd place submission.
- Please include the view from 3rd place and look to arrange / improve it.
- From the results page, user should be able initiate provide rating/feedback for the drone provider.
B. Provider:
Please find the reference submissions in "Wireframe winners > Provider Wireframes" Folder
- Most of the references mentioned below are from the 1st place unless otherwise specified
06 Dashboard:
Reference: dashboard.html
- Dashboard for a provider needs to capture important activities going on with their drones or notifications about the new requests that were received.
- This page need to show some statistics / charts about the requests that were received (New / Scheduled / In-Progress / Completed)
- Notifications as mentioned above need to be shown in page, it will have similar information as shown in the pop-up "Alerts" in the header. (even 3rd place has shown this well in
- How can the alerts pop-up shown at the top / header can be designed? looking for your design thoughts on this
- What else need to be in the page, looking forward to your design thoughts.
07 My Requests:
Reference: requests_-_new_pending.html
- This page shows the list of requests that were received, think on how we can show the requests based on the status (New / Scheduled / In-Progress / Completed).
- We like the idea of color coding the staus of the requests as shown in 3rd place submission, please try to incorporate them in your designs (feel free to expand on that idea).
- Note: Each of status will have different action items..For ex: Pending Requests (requests_-_new_pending.html) will have " Details, Assign Drone and Cancel Job" .
- - - Clicking on "Details" as a quick view as shown in "New / Pending requests" (in the wireframe clicking on "Details" will push the page down to show the details of the request along with a map), think on how to show this in design.
- - - Clicking on "Assign drone" shows acceptance of work modal with action buttons as "Cancel and Assign a Drone" (please see below for assign a drone functionality)
07.1 Assign a Drone:
Reference: assign_drone.html
- This page will allow users to assign a drone from the list of available drones.
- User will be able to view list of drones along with their details, show us how we need to display these drones and allow user to select one?
- They will select required drone and click on "Set Configuration", please include this view as well.
08 Request Details:
Reference: in_progress_job_details.html
- This page shows the request details, think on how the information shown in wireframe can be best presented.
- Please create two request details page, both are almost same just the status is different.
- Show us how the In-Progress request details page will looks like, clicking on "Mark as Complete" should show a screen that allows them to mark the request as complete..please look to capture this in your designs.
- We like the idea of creating an estimation as shown in create_estimation-3.html from 2nd place, please include the "Estimation" section to the winning submission!
08.1 Edit Telemetry Data:
Reference: edit_telemetry_data.html
- Show us how the Completed request details page will looks like, clicking on "Edit Telemetry Data" will allow users to edit telemetry data as well as remove photos that were
09 My Drones:
Reference: drones.html
- This page shows the list of drones owned by the user, clicking on details will reveal more details about the drone
- Drones can be categorized as those that are available and those which are in-progress missions.
- We like the idea from 3rd place to show where their existing drones are in real-time, please see my_drones.html (at the bottom with a map) in 3rd place and look to include them in this view.
- Clicking on a drone will show details of that drone (please see below)
09.1 Drone Details:
Reference: drone_details.html, edit_drone.html
- Drone details includes all the technical details about the drone.
- This page shows the on-going missions by the drone or past missions, show us how these can be shown.
- They should be able to view the "Scheduled Missions" as shown under tab "Drone Schedule"...like the calendar view in this page - please include them!
- User should have the ability to edit the drone (use the details from wireframe), please see edit_drone.html
10 Services:
Reference: services.html, service_details.html
- This page shows the list of services they have currently added to their profile.
- Provider will have the ability to add / edit or delete a service.
- Users should be able to choose a catalog/service and under each catalog (simple delivery, delivery with photo of delievery, autheticated delivery via bluetooth, etc) they will be able to add packages (gold, silver, bronze), ability to alter the pricing or provide some discounts (this is not captured correctly in the wireframe, so please make sure to include this in your designs)
- They should also be able to remove any service from 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
- Focus on the user experience! Focus on the navigation experience. Keeping consistent visual elements.
Stock Artwork:
We are allowing stock photos and stock icons for this challenge
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Target Audience:
- Consumers looking to purchase drone services
- Providers looking to provide drone services
Judging Criteria
Your submission will be judged on the following criteria:
- Cleanliness of screen design and user flow
- Overall design and user experience
- Simplicity of design/strong, clear design concept
- How well your design align with the objectives of the challenge
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.
At the end of this challenge, we are looking for the Topcoder Design Community to help us plan and design the user experience of our new application
Round 1
Submit your initial designs for Checkpoint Feedback01 Homepage
02 Drone Provider List
03 Drone Provider Details
04 Request a Service
05 Track Requests
05.1 Results View
07 My Requests
07.1 Assign a Drone
You must upload your submission to InvisionApp so we can provide direct feedback on your designs.
- Please request an InvisionApp link from the Copilot through the challenge forum.
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
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.01 Homepage
02 Drone Provider List
03 Drone Provider Details
04 Request a Service
05 Track Requests
05.1 Results View
06 Dashboard
07 My Requests
07.1 Assign a Drone
08 Request Details
08.1 Edit Telemetry Data
09 My Drones
09.1 Drone Details
10 Services
You must upload your submission to InvisionApp, for the final submission - you can reuse the prototype that you shared for checkpoint
- Please request an InvisionApp link from the Copilot through the challenge forum.
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
You are provided with wireframes from the challenge that we just ran, please make sure you don't just color the wireframes as we are looking your help in designing the user expereince of this new application. Please view/research other marketplaces like dronebase.com or taskrabbit.com for ideas but please do not copy them, if you do all submissions will look the same!
User Stories:
Consumer:
- As a consumer, I will be able to view providers based on geographical location (browser should detect my location or enter a zip code)
- View providers by category of service, photography, delivery, construction, etc…
- One I have selected my provider, I will see detailed list of services, take for an instance drone delivery, I will have 3 options
- - - Simple Delivery
- - - Delivery with photo of delivery
- - - Authenticated delivery via bluetooth
- Once I have select my service package, I will be able to request my service by choosing a location (entering address or selecting it on map), enter delivery time, my contact information and additional notes field.
- I drop the package to be delievered at the drone parcel service (Note: this package will be placed in the drone by a drone employee and sends it off to the delivery location).
- After the delivery, I can view flight telemetry data including, start and end time of the trip, any photos taken of the trip, average altitude, speed of the drone, etc
- After delivery I can rate the provider based on a star rating and provide some comments.
Provider:
- As a provider, I will be able to view requests for my services and the status of each request.
- - I can click on a request and see all of the request details and be able to accept or reject the request.
- From an accepted request, I will be able to click a button to deploy the mission parameters to my drone.
- - - I will need to be able to select the drone to deploy the work to.
- I will be able to view the status of my drones
- - - I can see by drone when they are scheduled and what requests are assigned to them.
- Upload mission results
- - - As a provider I can preview flight telemetry and photos from a mission and hit a button to publish results back to the platform.
Design Guidelines:
- Create your designs of size 1280px width and height as required
- UPDATE: Please use the attached color palette in your designs, looking for your help to coming with the initial design direction.
- Your designs need to be responsive.
- Make sure all UI elements are scalable vectors, so it helps us resize it as required!
- Please make sure the design you upload to invision fits properly and doesn't look too big.
Required Screens:
We need below screens to be designed..
01 Homepage:
Reference: homepage__before_log_in_.html
- This page will be common to both consumers and providers, so please think on how best to design this page
- User visits website, grab user’s location either using geo-location or get their zip code.
- Once the location of the user is captured, we show the list of drone providers.
- Homepage also need to show some promotional elements that captures the attention of both consumers (people looking for drone services) and providers (people offering drone services)
- We would like to have a "How it works" section
- Good to show some "Feedbacks/ratings" of featured drone providers.
- Show some of the featured services or frequent services that are being bought by consumers.
A. Consumer:
Please find the reference submissions in "Wireframe winners > Consumer Wireframes" Folder
- Most of the references mentioned below are from the 1st place unless otherwise specified
Reference: drone_provider_list.html
- This page shows the list of drone providers based on the user location or zip code
- Make sure to include a filter, think on how to design them!
- We like the idea of showing maps and list, think on how to present these in the page, make sure it is not crowded!
- Like the idea of showing categories in the sidebar but feel free to move it anywhere else you think would help get more space for the maps, etc.
03 Drone Provider Details:
Reference: drone_provider_detail.html
- This page shows the drone provider details, ratings / feedbacks that were received from consumers and also the services (catalogs) done by the drone provider!
- User will choose the Catalog, assume three types of catalogs in your design "Simple Delivery, Delievery with photo of delivery, Authenticated Delivery via bluetooth"
- Once they choose the catalog, we show three types of package with appropriate pricing under it...they will be "Gold, Silver and Bronze" package (please see 2nd place submission "drone_provider_details.html" for reference, click on a service "delivery > loged in > you can see sample image and below that available packages (assume the names of the package as gold, silver, bronze)")
- Looking forward to your design thoughts on how the catalog and the packages under it can be shown.
- Once a package is chosen, they move to "Request a Service" page
- Before a user can request a service they should be logged into the website, wireframe flow doesn't show that - so please show a modal or prompt that allows them to login (think on how it needs to be shown?)
- Please provide option for the consumer to Rate/provide feedback to the provider, please see this page providerdetails-rate.html from 3rd place!
04 Request a Service:
Reference: request_a_service.html
- This page allows the user to enter details of the request.
- User will need to enter all details as shown in the wireframe, think on how to better arrange them.
- For "Item Dimensions", we would like you to indicate / provide help information on how it need to be entered (For ex: you can show placeholder text within the textbox as "Length X Width X height", etc)
- User will be able to choose the delivery location from the map
- How will the error page look like if all details entered were not correct?
- When a request is sent, we would like you to show success screen - something similar to request_sent.html but we would like to improve this page, looking forward to your design thoughts!
05 Track Requests:
Reference: request_status.html
- This page shows the list of requests that were sent to the provider
- Each of the request need to include their current status (please see if you can work out the color coding for status as shown in 07 My Requests page - please see below).
- User will select a request and views more details about it
- If the status of the request is completed, then they will be able to view the results (please see below)
05.1 Results View:
Reference: requestdetails-completed-publishresults.html from 3rd place submission
- We like the results view (requestdetails-completed-publishresults.html) from 3rd place submission.
- Please include the view from 3rd place and look to arrange / improve it.
- From the results page, user should be able initiate provide rating/feedback for the drone provider.
B. Provider:
Please find the reference submissions in "Wireframe winners > Provider Wireframes" Folder
- Most of the references mentioned below are from the 1st place unless otherwise specified
06 Dashboard:
Reference: dashboard.html
- Dashboard for a provider needs to capture important activities going on with their drones or notifications about the new requests that were received.
- This page need to show some statistics / charts about the requests that were received (New / Scheduled / In-Progress / Completed)
- Notifications as mentioned above need to be shown in page, it will have similar information as shown in the pop-up "Alerts" in the header. (even 3rd place has shown this well in
- How can the alerts pop-up shown at the top / header can be designed? looking for your design thoughts on this
- What else need to be in the page, looking forward to your design thoughts.
07 My Requests:
Reference: requests_-_new_pending.html
- This page shows the list of requests that were received, think on how we can show the requests based on the status (New / Scheduled / In-Progress / Completed).
- We like the idea of color coding the staus of the requests as shown in 3rd place submission, please try to incorporate them in your designs (feel free to expand on that idea).
- Note: Each of status will have different action items..For ex: Pending Requests (requests_-_new_pending.html) will have " Details, Assign Drone and Cancel Job" .
- - - Clicking on "Details" as a quick view as shown in "New / Pending requests" (in the wireframe clicking on "Details" will push the page down to show the details of the request along with a map), think on how to show this in design.
- - - Clicking on "Assign drone" shows acceptance of work modal with action buttons as "Cancel and Assign a Drone" (please see below for assign a drone functionality)
07.1 Assign a Drone:
Reference: assign_drone.html
- This page will allow users to assign a drone from the list of available drones.
- User will be able to view list of drones along with their details, show us how we need to display these drones and allow user to select one?
- They will select required drone and click on "Set Configuration", please include this view as well.
08 Request Details:
Reference: in_progress_job_details.html
- This page shows the request details, think on how the information shown in wireframe can be best presented.
- Please create two request details page, both are almost same just the status is different.
- Show us how the In-Progress request details page will looks like, clicking on "Mark as Complete" should show a screen that allows them to mark the request as complete..please look to capture this in your designs.
- We like the idea of creating an estimation as shown in create_estimation-3.html from 2nd place, please include the "Estimation" section to the winning submission!
08.1 Edit Telemetry Data:
Reference: edit_telemetry_data.html
- Show us how the Completed request details page will looks like, clicking on "Edit Telemetry Data" will allow users to edit telemetry data as well as remove photos that were
09 My Drones:
Reference: drones.html
- This page shows the list of drones owned by the user, clicking on details will reveal more details about the drone
- Drones can be categorized as those that are available and those which are in-progress missions.
- We like the idea from 3rd place to show where their existing drones are in real-time, please see my_drones.html (at the bottom with a map) in 3rd place and look to include them in this view.
- Clicking on a drone will show details of that drone (please see below)
09.1 Drone Details:
Reference: drone_details.html, edit_drone.html
- Drone details includes all the technical details about the drone.
- This page shows the on-going missions by the drone or past missions, show us how these can be shown.
- They should be able to view the "Scheduled Missions" as shown under tab "Drone Schedule"...like the calendar view in this page - please include them!
- User should have the ability to edit the drone (use the details from wireframe), please see edit_drone.html
10 Services:
Reference: services.html, service_details.html
- This page shows the list of services they have currently added to their profile.
- Provider will have the ability to add / edit or delete a service.
- Users should be able to choose a catalog/service and under each catalog (simple delivery, delivery with photo of delievery, autheticated delivery via bluetooth, etc) they will be able to add packages (gold, silver, bronze), ability to alter the pricing or provide some discounts (this is not captured correctly in the wireframe, so please make sure to include this in your designs)
- They should also be able to remove any service from 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
- Focus on the user experience! Focus on the navigation experience. Keeping consistent visual elements.
Stock Artwork:
We are allowing stock photos and stock icons for this challenge
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Target Audience:
- Consumers looking to purchase drone services
- Providers looking to provide drone services
Judging Criteria
Your submission will be judged on the following criteria:
- Cleanliness of screen design and user flow
- Overall design and user experience
- Simplicity of design/strong, clear design concept
- How well your design align with the objectives of the challenge
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.