Challenge Summary
Welcome to Cisco Network Topology Map UX design Challenge. In this challenge, we are looking to create a web application that will have the ability to view the specific network configuration on a map (most likely a google map).
We are looking for you to define the initial design direction for this application by using best UX practices.
Good Luck, looking forward to your designs!
Round 1
Submit your designs for a Checkpoint feedback:
1) Default Screen - Zoomed out View
2) Zoomed in view (detailed view)
3) PIN Pop-up Info Window
4) Filters on Map
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus Checkpoint feedback:
1) Default Screen - Zoomed out View
2) Zoomed in view (detailed view)
3) PIN Pop-up Info Window
4) Filters on Map
5) Navigation
6) Product Details
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Description:
Purpose of this challenge is to design a web application that contains a map (likely a google map) with navigation and controls. Users of this tool will be able to see icons/images on top of the map that describes their specific network configuration.
The user should be able to view their network at a top level and granular view. This means being zoomed out to see a world view and zoomed in to see a local view (street level).
Icons/images will work similar to a PIN drop on a map. These pins represent different products and can be one of many options (data center, network point of contact, etc). *We will use the word “PIN” going forward to describe these locations. Keep in mind, “pins” will not be actual pins, rather an icon or image to visually represent the type of connection (product) at that location.
Each “Pin” on the map will be connected to another “pin” on the map.
Design Guidelines:
- Looking for a modern design interface!
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Please have your designs of size 1920 x 1080
- We are looking for you to the design using Photoshop, would like to have the source as PSD files.
- We are open to colors, use your creative judgement!
Required Screens:
We need below screens to be designed for this web application..
A) Map:
- This is the main screen in this web application.
- We will need to show a map with PINS, note that each pin represents a product on a map. For instance a pin might represent a server, towers, data centers, access point, routers, switches, bridges,etc. These locations will show greater detail as the user zooms into a location. From a zoomed out state, the user might see one pin representing a general network icon, as the user zooms closer to that location, it is possible that there might be several pins that emerge from the larger one in that location. For example, a user might be zoomed in at nearly max zoom. The user could potentially see 4 pins all connected together, but could be positioned on opposite sides of a city or a few blocks from each other. “Pins” will not be actual pins, rather an icon or image to visually represent the type of product and connection at that location.
- We must show screens with a zoomed in and zoomed out example of a location with a “pin”.
- This map will also have filter options, please see “Point 4” below for more details.
- Pins on the map will be of different types “servers, towers, data centers, access point, routers, switches, bridges”, come up with icons that shows these different types of pins on the map.
1) Default Screen - Zoomed out View:
- This screen should show the page the users will initially see. Similar to the Low Level Mockup.pdf top screen. This will include the filter/navigation/and map.������
- Please use a geographical map (we will be using mostly google maps), and show PINS on them. (Note: If you are using a map, make sure to declare/comment them while uploading)
- The screen should default to the Zoomed out map (top image in Low Level Mockup.pdf) - display pins in a few locations as you see fit and connect them with lines.
- In this zoomed out state, user see network icon in different geographical locations and on zooming will reveal the individual network and the products being used in each network.
Clearly show connecting pins around the map
- Use Lines to connect
- Lines can represent both a relationship and bandwidth
- Lines can be different colors.
2) Zoomed in view (detailed view):
- This screen is the same as zoomed out view with the exception of the map. The map should be zoomed in to a detailed view similar to the 3rd map on the low level mockup.pdf example.
- Use a few pins scattered across a few blocks/streets and have them all connect to one pin that will have a line connecting off the map to another pin. See 3rd Map example in Flow and map example.pdf.
- Use a more than one pin type (servers, towers, data centers, access point, routers, switches, bridges) to show different locations.
An example could be 4 different servers located on a plot of land. Display an example of a line connection to one server and then connecting to the remaining 3 servers.
- Use Lines to connect
- Lines can represent both a relationship and bandwidth
- Lines can be different colors, for now - have 2 to 3 colors max, one for a strong connection and one for a poor or broken connection. So, most lines should be of same color (i.e. line showing good bandwidth and connectivity), and one connecting line could show a "poor or broken" connectivity and display them in a different color.
3) PIN Pop-up Info Window:
- Assume Pin on map is clicked and popup Info window is displayed
- This screen should resemble a pin being clicked and its popup Info window with content is displayed.
- Please see a reference here: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
- Use the information in window content given below for Popup info window
- We need a link/button to close this pop up window
Info Window should
- be easy to read and navigate
- be intuitive to open and close
- match the page/map style
Info Window Content:
Window Content should display information about the product (pin type).
Specs of the product
- Lorem Ipsum text
Date when this product (pin) was installed
- Date format 02/14/2012
Warranty expiration
- Date format 02/14/2012
Location information
- Street address format
Contract information
- Lorem Ipsum text
Errors
- Lorem Ipsum text
Upgrades
- Lorem Ipsum text
- Display button with text “Upgrade Available”
4) Filters on Map:
- This screen should show what happens when a user clicks on a Filter button/link
- The filter will change the data displayed on the map. Create a clear filter with the option to
- Filters will have to option to choose “View Suggestions” and “View Problems” (They will be able to choose either one of these or both)
For this challenge, design two views with the user choosing alternate filter options..
View Suggestions:
- In this one, user selects only “View Suggestions” and clicks filter. Design how that will look on the map based on the example below..
- Example: a bottleneck of data in a location. A visual representation resembling a “suggestion” should be added on, or next to a pin. When clicking on this pin the popup window should appear. (This relates back to the “upgrade available” button in the popup content area above.)
View Problems:
- In this view, user selects only “View Problems” and clicks filter. Design how that will look on the map based on the example below..
- Example: a router is malfunctioning. A visual representation resembling a problem/error should display on or next to a pin. When clicking on this pin the popup window should appear.
5) Navigation:
- We would like you to come up with a navigation that fits this application.
- Below items are required in the navigation “My Products, View Contracts, Update Info, Create Draft Topology, Contact Sales, Get Support, Export ”.
- Each of these navigation items (except “Create Draft Topology”) should show a modal window (similar to a Bootstrap Modal window) that contains information pertinent to the title.
- We would like you to show one of the navigation.
- This screen will display a user’s action once they click a navigation button and the popup window is displayed.
- Use My Products as the active navigation button
- A popup window will be displayed over the screen.
- Content in window will be a list of the users products (pins). This can be similar to a tableview. Each row should have a button/link for a user to see more “details”.
- Format: Product Title - Location - Action (details) - Arrange as you please.
- A link/button to close this pop up screen
6) Product Details:
- This screen is based off of “My Products” screen. When the user clicks on the "details" link/button, the window should now display detailed information on that product.
- Display the following: Product Title (1234TX Switch, 2324TX Switch, 1534DX Switch, etc..), and Location name, and a text area with a few bullets to resemble the product details. You can use Lorem Ipsum.
- A link/button for users to return back to the “My Products” list
Target Audience:
- Users who have purchased products, like switches, towers, data banks, routers and are managing their tools and looking at ways to increase their networks performance.
Judging Criteria:
You will be judged on:
- How well does your design align with the objectives of the challenge.
- Creativity of your visualizations.
- Cleanliness of your graphics and design.
- Overall Design and User Experience.
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.
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. See more information about Final Fixes.
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.