Challenge Summary
Welcome to the NASA - DTN Dashboard Design Challenge. This is the 3rd challenge in the NASA - DTN Dashboard series.
The purpose of this challenge is to take the information and the wireframes provided from the previous challenges and bring it to life!
Round 1
01-1 - Nodes - Map View
01-3 - Nodes - Node Details
01-4 - Nodes - Link Details
02-1 - Schedule - Graph View
03-1 - Network Traffic - Chart View
04-1 - Settings - App Config
04-3 - Settings - Custom Metrics
- Any additional images to show interactions
- Checkpoint designs for initial feedback
Round 2
01-1 - Nodes - Map View
01-2 - Nodes - List View
01-3 - Nodes - Node Details
01-4 - Nodes - Link Details
01-5 - Nodes - Custom View
02-1 - Schedule - Graph View
02-2 - Schedule - List View
03-1 - Network Traffic - Chart View
03-2 - Network Traffic - List View
04-1 - Settings - App Config
04-2 - Settings - App Config Edit
04-3 - Settings - Custom Metrics
04-4 - Settings - Custom Metrics Add
04-5 - Settings - Custom Metrics Edit
05-1 - Search
05-2 - Search - Results
05-3 - Search - Node Details
05-4 - Search - Link Details
06-1 - Help
07-1 - Alerts
- Any additional images to show interactions
- Any feedback/suggestions provided at checkpoint
Overview
- NASA’s DTN technology is new and is reaching a stage where the information will be available to end users. To help make the information available, NASA is developing a DTN Network Monitoring and Management System (NMS). Users will visit this dashboard to get information that they otherwise would not be able to obtain.
Problem
- Currently users have to use command line tools which is limiting for visualizing complex network status.
- The problem is that NMS lacks visuals and tools/commands that the end user can use.
Goal
- Last challenge we finalized wireframes.
- Now we need to take the provided wireframes and give it visuals.
Previous Challenges
- Please take a look at the previous challenges to understand more.
- Challenge 1 - Dashboard Conceptualization
- Challenge 2 - Dashboard Wireframes
Requirements
Size
- Desktop size - 1280px width and height accordingly
- Keep in mind this will be a web based dashboard- This will eventually become a responsive dashboard for mobile and tablet so design accordingly so the design is flexible
- It's possible that windows would need to be "torn" off to display separately. Imagine a multi-screen environment where the node map view is up all the time on a big monitor while other elements stay at the operator's station.
- 1280px is just a starting starting point. Although we’re not asking for the mobile sized screens in this challenge, please think and design responsively and flexible. This could be displayed on a large screen or on a small screen.
- Needs to make sense when on small screens and utilize white space/margins when on large screens.
Overall
- Please use the NASA logo
- The wireframe is approved, but do NOT copy the wireframes exactly. We welcome layout and functionality changes that improve the design. We don’t want every submission to look the same.
- We want a modern and clean design while still effectively communicating the information
- Come up with a global nav and footer that is flexible enough for all pages
- The current time in UTC needs to be displayed somewhere in the header/nav
IMPORTANT!
- This is the first of two design challenges for this project. I want you to be creative and think outside of the box. Go big at first and if we need to we can dial it back down later.
- I’m giving very little requirements for each page. The reason for that is to allow you to take the wireframe and expand on it and let you do what you do best and be creative.
- If no requirements are mentioned for a specific page it simply means to follow the wireframe.
Screens
- Don't be overwhelmed by the amount of screens. A lot of these are interactions, ways to edit, etc.
01-1 - Nodes - Map View
- This page will always have different data
- The nodes could be in different positions and the lines (links) will change as well
- Make sure your design is scalable. Imagine tens or hundreds of nodes in the network.
01-2 - Nodes - List View
- This is an easier to read format with a table based layout but how can we still make it engaging? Be creative.
01-3 - Nodes - Node Details
- Be creative in how we could show this information
- Is a modal the best solution? How would you expect to see more info about a node?
01-4 - Nodes - Link Details
- Same as Node Details - be creative in how we can show this info.
01-5 - Nodes - Custom View
- A user gets a default view of nodes when first visiting but this feature allows them to create their own view
- How can we easily and quickly allow them to create their view to get back to the important information
02-1 - Schedule - Graph View
- Note that clicking on the blue bar gives schedule details
02-2 - Schedule - List View
- Again, be creative with the list view
03-1 - Network Traffic - Chart View
- There is a huge opportunity on this page to make this information fun
- Take a look at the inspiration links below for help
03-2 - Network Traffic - List View
- Refer to wireframes
04-1 - Settings - App Config
- General information will be shown here about the current settings
- The app settings and custom metrics settings are bundled together inside of Settings in the menu
- They don’t have to be in tabs inside of settings - give us some ideas how they could be separated
04-2 - Settings - App Config Edit
- An edit view of the previous page
- Considering showing error messaging
- Link State Representation area - Instead of having set color options, give the user the ability to select a color from a color picker or enter their own color value.
04-3 - Settings - Custom Metrics
- Same as app config
04-4 - Settings - Custom Metrics Add
- Show error messaging
04-5 - Settings - Custom Metrics Edit
- An edit view of the previous page
- Considering showing error messaging
05-1 - Search
- Move keyword field to the top
- Date and Time needs to be simplified - how can we make that an easier task to fill out so the user can search quicker?
05-2 - Search - Results
- Refer to wireframes
05-3 - Search - Node Details
- We have Node Details as a requirement above
- Whatever design you create above should be consistent with this
- A modal or a page or something else - it’s up to you but it should be the same regardless of where you’re accessing it from
05-4 - Search - Link Details
Same as previous requirement
06-1 - Help
- Refer to wireframes
07-1 - Alerts
- Alerts could vary so make sure the design doesn’t have a negative feel to it
- It could include an event log where notifications are sent
- Could be good or bad alerts/notifications
Additional Info
Files
- DTN-Dashboard-Wireframe.zip
Inspiration
- Do NOT copy these designs. They are strictly for inspiration.
- https://dribbble.com/shots/1423171-Some-Analytics?list=searches&tag=dashboard&offset=2
- http://cdn.designrfix.com/wp-content/uploads/2014/01/dashboard-design-61.jpg
- http://designshack.net/design/rolodex-dashboard
- https://qvdesign.files.wordpress.com/2012/03/orange-dasboard.png
- https://rquintino.files.wordpress.com/2012/10/percpedgedashboard_2012_bydevscope.png
Target Audience
- System Engineers, Discipline Experts, Operators, Test Conductors, etc
- Users are not experts in the DTN code
- Users are not experts in how to install or configure the command line tools to get and interact with the information
- Users will be familiar with the data and how to interact with the nodes but need it to be visualized in an easy to understand format
Judging Criteria
- How well you improve the wireframes and create an easy to use experience
- Cleanliness of your graphics and design. Remember - clean and modern is what we’re looking for.
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 image files based on Challenge submission requirements stated above.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.