Challenge Summary
Welcome to the Cisco - APIC EM - UI Design Concepts Challenge.
In this challenge we will be asking you to help us come up with a user experience for an application that allows different types of users to interact with network related data to make key decisions depending on their role.
We will be providing you with a design direction document and sample data for you to design a visualization for this data as a topology and drill down to detail information based on an end user role. The data will consist of sets of routers and switches, links and applications as well as some attributes and metrics around this data. The goal of this challenge would be to come up with the best way to visualize this information, graphics and personalized layouts for each of our target end users. We will design dashboard and detail views for the following user personas: Line of Business (LOB) Owner, IT Operations Personnel and Application Owner.
The idea is to keep it fun, cool, and interactive. Our ultimate goal is for our target end users to work with the APIC EM (Application Policy Infrastructure Controller Enterprise Module) information in the most effective manner that makes it fun and easy for what they are focused on.
Round 1
Submit your initial screen for Checkpoint feedback
1) Welcome
2) Line of Business Owner - Dashboard
3) Line of Business Owner - Device Detail Flyout
4) Line of Business Owner - IT Requests
5) IT Operations Personnel - Dashboard
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client.
Make sure all of your pages have the correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your final designs for all the required pages including the implementation of all checkpoint feedback.
1) Welcome
2) Line of Business Owner - Dashboard
3) Line of Business Owner - Device Detail Flyout
4) Line of Business Owner - IT Requests
5) IT Operations Personnel - Dashboard
6) IT Operations Personnel - Device Detail
7) Application Owner - Dashboard
8) Application Owner - IT Requests
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client.
Make sure all of your pages the have correct flow! Use correct file numbering. (00, 01, 02, 03).
This challenge will focus on creating dashboard and details screens for three types of users:
1) Line of business (LOB) Owner:
This role focuses on marketing and business, not on IT. The line of business owner depends on the IT services to get the work of the business done. The line of business owner needs to know how things are running and if there are any problems that affect the services. I suggest that the network perspective of this user should be limited and simple. Perhaps only what is not working and overall status would be provided.
2) IT Operations Personnel:
The IT Operations Personnel work to manage end-to-end business services and applications by having visibility into key technology enabling service and application delivery. They desire to quickly understand the impact incidents have upon business services and applications by interpreting the context provided by the Solutions for BSM and taking appropriate actions based upon this knowledge. I suggest that the network perspective of this user should be as detailed as possible with a complete topology and details of the corresponding devices and interfaces.
3) Application Owner:
This role is responsible for keeping an important business application up and running so the company can make money. The network perspective would be application state, bandwidth usage and possibly performance.
Design Guidelines:
Please consider these while creating your designs.
- We are looking for fresh, innovative and modern design concepts.
- Give importance to the overall layout and think of how a user would interact with the content on the page.
- Feel free to use the logo and also follow the branding guidelines provided in the attached design direction document
- We have allowed stock photos for this challenge, please follow the imagery style as given in desgin direction.
- We have provided a design direction document to help you get started, please make sure you DO NOT COPY the given screens as it is...if you do, all the submissions will look too similar.
- Think simple and responsive designs...for this challenge, we need desktop screens of size 1024px as width and height as required.
Please note that employees and subcontractors (direct or indirect) of Cisco, as well as TopCoder and its affiliates, are not eligible to participate in this Challenge.
Required Screens:
1) Welcome:
- This is the default landing page for a first time user of the application.
- On this page, we will have an overview of how the application works.
- We need the ability for users to self select what type of user they are and how they would like to view the data.
- Come up with a navigation that can be shown consistently in all pages.
- Think of what else can be shown here.
2) Line of Business Owner - Dashboard:
- This role focuses on marketing and business, not on IT.
- This will be the dashboard for a "Line of Business Owner". He/she does not act upon the network. He/she only reviews what is going on and requests IT operations to do the work.
- The line of business owner needs to know how things are running and if there are any problems that affect the services.
- We need to show the network topology should be provided, the perspective of this user should be simple and easy to understand.
- Think of a Scenario within this network topology - an aggregative device view is fine when everything is working, but if a problem occurs, they need to know which device(s) is/are causing problems and where it is/they are located in the topology.
- The relevant data to be viewed within each device would be the device type and the interface IP and state. Any connected interfaces or devices that are down should be highlighted for easy viewing.
3) Line of Business Owner - Device Detail Flyout:
- When a user clicks on a device in the network topology, we need to come up with an intuitive way to show the device details with alert details if any.
- We have shown a way to come up with this screen, feel free to explore your concepts around this.
4) Line of Business Owner - IT Requests:
- A user will be able to see list of IT requests that was receievd.
- Clicking on "Requests" in navigation lands the user on this page.
- This will show the list of IT Requests, along with option to update the request, also show the status of each request in this view and option to view more details.
- Think on what else can be shown in this view and how it can be made more interesting.
5) IT Operations Personnel - Dashboard:
- The IT Operations personnel work is to manage end-to-end business services and applications .
- They need to have a better visibility of key technology enabling service and application delivery, so dashboard is one of the important to understand what is going on within the network.
- They desire to quickly understand the impact incidents have upon business services and applications and taking appropriate actions based upon this knowledge.
6) IT Operations Personnel - Device Detail:
- The network information provided to this user should be as detailed as possible with a complete topology.
- Each of the devices has information about "corresponding devices, interfaces and configurations".
- Other relevant fields of the data are device type as well as its uptime, IOS release, boot loader version, interface IP, bandwidth, state, role, node type, greyed out as well as all link, policy and ACL data.
7) Application Owner - Dashboard:
- They are responsible for keeping an important business application up and running, so the company can make money.
- The network perspective would be to view just the list of applications intended to run over the network including the application state, bandwidth usage and possibly performance.
- The network topology should not be provided for this user.
- This user does not act on the network; instead he/she requests IT operations to make changes.
- This user can (via APIC EM) view policies, ACL's, as well as application classification and priority.
- Relevant data would be application name, classification, port as well as policy and ACL data.
8) Application Owner - IT Requests:
- They will be able to see list of IT Requests that were sent to IT Operations personnel and also its corresponding status.
- This user does not act on the network; instead he requests IT Operations to make changes.
Target Audience:
- Line of Business (LOB) Owner, IT Operations Personnel, Application Owner
Judging Criteria:
- Cleanliness of your graphics and design.
- How well you plan the user experience and capture your ideas visually.
- How similar your designs are to the given wireframes (see design direction document).
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 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.