Challenge Summary
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback1) Dashboard Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates1) Dashboard Screen
2) Setting Screen
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
In this challenge, you will be designing a dashboard for a local transportation authority which will provide interactive graphs and visualizations to identify top road traffic bottlenecks in the city based on GPS probe data.
Challenge Goal
Create a Simple, Modern, Easy to Use and User-Friendly Dashboard design for the application that able to provide useful information about traffic data to the RTA user
Design Consideration
- New and Modern look and feel
- Simulate all possible scenario in the dashboard
- Ability to arrange screen elements in the dashboard for a better visualization
- Simplicity to analyze traffic data
- The Dashboard should be configurable to allow users to select various time intervals, road segments etc.
- The output should be both tabular and a graphical map identifying congested bottlenecks and their associated ranking for the user selected time-period.
Screen Requirements
1) Dashboard Screen
- Use Dubai City map as a base for the map view on your dashboard screen
- Ability to zoom in/out the map into the specific area
- 2D or 3D map view? What is your suggestion?
- Define your data visualization technique, Heatmap Network? Alluvial Diagram? Node-link diagram? what is the best way to presenting the data?
- See how Data visualization for Traffic Reference Screen: https://www.youtube.com/watch?v=QFv7AFRmmTs (Use this only as References, DO NOT COPY THE LAYOUT)
- There are several interaction and data visualization needed, make sure to simulate all of them completely in your design
- Basically, we want to fetch the data in real time after every 1 to 5 mins depends on the setting and illustrate it
- Need a live version of dashboard monitoring and ability to see recorded dashboard report
- The dashboard should have an ability to give suggestions based on its past experience (AI related)
1.1) Top Traffic Bottlenecks Simulation:
- The Interactive report/dashboard will tabulate and illustrate the road segments/links or set of connected road segments/links which experience the highest levels of congestion for a user-defined time-period.
- The report is expected to include:
-- congested road segments in both tabular and map-based formats,
-- severity rank,
-- the number of occurrences of congestion,
-- average congestion length,
-- the average duration of congestion for each location,
-- revenue impact
-- etc.
- Ranking of bottlenecks should consider based on:
-- Duration of congestion
-- Frequency of congestion
-- Length of congestion
- The report should be configurable to allow users to select various time intervals, road segments etc.
- The output should be both tabular and a graphical map identifying congested bottlenecks and their associated ranking for the user selected time-period.
- Upon selecting each bottleneck, further detailed information should be available such as the rank score, average and free flow speeds, average and free flow travel time and affected road length resulting from the congestion.
- It would be beneficial to demonstrate data-in-motion i.e. track the movement of a single vehicle through congested locations to visualize the pain points on the road network.
1.2) Data
- Assume that the below GPS probe data is available for road segments covering an entire city:
-- Road segment current speed
-- Road segment historical average speed
-- Road segment reference speed (typical speed in free-flow conditions)
-- Road segment travel time (time taken to traverse road segment)
-- Road segment speed bucket (identifies if the road is congested or not)
-- Road segment date-time stamp
-- Confidence value of data
2) Setting Screen
- Ability to setup map size, hide/show features elements, check connection with data source server, etc
- Ability to setup user management (Add/Edit/Delete)
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Branding Guidelines
- Use our Branding Guidelines Docs for colours and layout recommendation (Styling Guides.docx)
- Font open to designers
- The design style is open to designers
Documentation
Google Drive: https://drive.google.com/drive/folders/1SVv74ejI37BboY7nsWo-bcQDikZ6EIOa?usp=sharing
- Bottlenecks.docx
- Data Structure.docx
- Styling Guides.docx
Target Devices
- We are targeting Big Monitor and Desktop App.
- Create your design for Desktop devices, but consider a design that can be expanded in a big monitor.
- 1366px minimum width with height adjusting accordingly
Target Audience
- Admin team of a transportation authority
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
- The complexity of visualizations i.e. use of data-in-motion
- Overall storyline
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB colour mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (might need to convert it to photoshop later) or Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colours.
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.