Challenge Summary
Welcome to the Airtel Telecom B2B Network Operations Center UI Design Challenge. Our client Airtel is a major telecommunications provider that is looking to develop a Network Operations System (NOC) for their employees, to let them monitor the network performance and allow them to react to any issues arising in their services.
CHALLENGE OBJECTIVES
- To create the UI for a telecom network operations application in desktop format.
- To provide the specified screens from a larger system to enable users to monitor and maintain high quality service at all times.
- Completion of the required screens for R1 and R2 is very important.
- 15 unique screens total.
Round 1
Please provide the following screens for the checkpoint along with your clickable Marvel prototype with hotspots.You don't need to provide further interactions, only the 8 screens!
- 02. National Head - Dashboard
- 06. National Head - Inter Domain Level Network Health Screen
- 08. National Head - Map 2x Zoom Screen
- 09. National Head - Issue Details Screen
- 10. National Head - Track Field Agent Screen
- 12. NOC Engineer - Service History Screen
- 13. NOC Engineer - Tickets Screen
- 15. NOC Engineer - Assign Field Agent Screen
Round 2
Please provide the following screens with checkpoint feedback incorporated for final review along with your clickable Marvel prototype with hotspots.You don't need to provide further interactions, only the 15 screens!
- 01. Login Screen
- 02. National Head - Dashboard
- 03. National Head - National View Screen
- 04. National Head - Fault Code Screen
- 05. National Head - Performance Impact Screen
- 06. National Head - Inter Domain Level Network Health Screen
- 07. National Head - Map 1x Zoom Screen
- 08. National Head - Map 2x Zoom Screen
- 09. National Head - Issue Details Screen
- 10. National Head - Track Field Agent Screen
- 11. NOC Engineer - Alarms Screen
- 12. NOC Engineer - Service History Screen
- 13. NOC Engineer - Tickets Screen
- 14. NOC Engineer - Tickets Details Screen
- 15. NOC Engineer - Assign Field Agent Screen
APPLICATION OVERVIEW
- Today, Airtel’s Network Operations Center is fragmented across multiple domains. They would like to consolidate to have a single NOC with cutting edge technologies and state of the art dashboard.
- At a high level, the application should provide a persona-based view of data in the dashboard. In real use, a CEO would view more strategic and business specific metrics. A Network Engineer would be interested in viewing more technical and service specific attributes. At the same time both users should be able to drill down into the details they like to view.
- The application should provide different experiences to different employee types. In this solution: National Head and NOC Engineer.
- Airtel is looking to have user-experience driven dashboards with drill down capabilities: zoom in and zoom out, view detailed information like faults, get performance analysis, see service coverage, view network domain health, etc.
- Airtel users will need to view service coverage in a particular location by entering zip code, location name, etc. (for example: 560100, Old Delhi), and then view network coverage details in a modern map. Please use the most modern map technology (for example: 3D maps). We strongly discourage using basic Google maps (reference screenshot attached).
- One of the main challenges Airtel users have today is that they are not able to track their field agent visits on a unified dashboard. Airtel would like to view agent profile, skillset, historical performance, hardware and software tools, current location, etc., from the same application. Consider emulating an “Uber like” field tracking view for this purpose.
AUDIENCE
Technical employees of Airtel on different levels who are responsible for continuous high level service and resolving issues quickly. Solutions should address two roles:
-
National Head - senior executive employee
-
NOC Engineer - network engineer employee
PERSONA
Name: Ashok
Occupation: National Head
Goals:
- Needs to see high level information related to a large location area via a 3D View of Map (Eg.Delhi).
- Would like an overall view of key information:
- Onnet (Airtel owned) and Offnet (Airtel leased) connectivity network types (For example: fibre, 4G, 5G).
- Highest number of faults and details.
- Overall network performance (Differentiate good and bad).
- Social Media sentiments.
- Upcoming technical implementations, future rollouts, etc.
- Performance Metrics (KPIs, SLAs, etc.)
Frustrations:
- Not aware of what is happening at a higher level, does not have a holistic view encompassing technology, strategy, investments, pain points, service quality etc.
- Not able to manage the information at his disposal intuitively.
- Often he relies on others to show him what he wants to see.
Wants:
- Wants to work with a single system that can answer all his questions.
Name: Suraj
Occupation: NOC Engineer
Goals:
- Be able to see and handle any arising issues in a timely manner.
- Would like to see more service specific attributes like bandwidth, latency, jitter, quality of service (QoS), device health status, availability, SLAs etc.
- Must evaluate and assign tickets to field agents for resolution.
Frustrations:
- He has to log into many applications to be able to gather all the data he needs to see in order to assign tasks to field engineers.
- He is unable to drill into details he needs from the same view. For example: from a network level, to alarms, to devices, to underlying faults. This makes it difficult for him to assign a ticket to the appropriate field agent for resolution.
Wants:
- Get a quick glance of issues in the network.
- Be able to drill down to the issue details.
- Be able to assign tasks to field engineers in the same system.
USER STORIES
There is a network outage in Delhi and many of Airtel customers’ services have been impacted.
Ashok, an Airtel National Head, logs into the NOC system to see an overview of how the outage is impacting performance across his region. He is interested in seeing the amount of customers affected by this event. He will be giving a status report to his team and his supervisor later in the day.
Ashok sees on his map view that the outage has created Issues concentrated in one local area. A large percentage of customers here are impacted. From this screen, he can drill into the type of service that is experiencing the most problems. He notices that the CEN network is most affected.
From his dashboard, Ashok can select to see the Inter Domain Level Network Health information. He looks into the details about the CEN network for the past 12 months and sees that there have been frequent issues with this network and related customers. Ashok knows to add this to a report he will be giving to his team later that day.
Ashok then checks into Issues to see details for a specific Issue in the area and network type he is concerned with. He sees that an agent is en route to this particular service call and the instructions for resolution are clear.
Ashok now returns to his dashboard and sees that a large number of the Alarms have Tickets completed. It appears that 90% of the issues will be resolved by the end of day.
Suraj, an Airtel NOC Engineer, logs into the NOC system to get details which will allow him to determine a course of action to respond to the outage.
Suraj sees the outage area indicated on his dashboard map.
He selects to view the Alarms that have been triggered. He begins to drill into each Alarm needing attention to view the fault details. He is able to select the ticket that has been generated and assign a field agent to the ticket. He also adds some detail to the description of the affected area so the field agent has clear instructions.
While choosing an agent to assign, Suraj is able to see the agent’s current location. He sees that this agent is busy with another ticket, but has a clear route to get to this next service call when finished.
Suraj completes this flow for several Alarms. He then revisits his dashboard to look at the areas affected and get a sense of how severe the problem is across various service types (for example: 4G). He wants to see the current network traffic in those areas.
Later, Suraj goes from his dashboard view to see the full list of Tickets. He can check on those he is responsible for, see if they have been marked complete or not. He drills into several of the completed tickets to read the notes the agent added regarding the problem resolution. One of them has not been fully remedied. He re-opens that ticket, adds more detail, and assigns it to another field agent who is in that area.
DESIGN GOALS & PRINCIPLES
- We want a NEW visual design. DO NOT COPY reference screens, otherwise you risk disqualification.
- Current (cool) and intuitive UI design.
- 3D models of maps, rather than static maps. You may suggest a third party service to provide the maps (do not forget to declare it).
- National Head (executive) view to be different from NOC Engineer view in regard to UX and content.
EXPLORATION SCORE
Creativity: 5
1: barely new ideas
10: a utopic product with features not proven to be able to be fully implemented
Aesthetics: 9
1: low-fidelity design, wireframe or plain sketch
10: top-notch finished looking visual design
Exploration: 7
1: strictly follow an existing reference or production guideline
10: open to alternative workflows/features not listed here that would help the overall application
Branding: 7
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success
GLOSSARY
-
NOC: Network Operations Center
-
CEN - Carrier Ethernet Network: The term “Carrier” in carrier Ethernet networks (CEN) refers to large communications services providers with wide reach through their global networks. These carriers provide audio, video, and data services to residential as well as to business or enterprise customers.
-
EPT: Evolved Packet Transport
-
SDH: Synchronous digital hierarchy
-
NPT: Native Packet Transport
-
Service Types: Internet, L3VPN, L2VPN, Voice, Wholesale, Manage Services, Cloud Services
-
Device Types: Routers, Switches, Ports
SCREENS/FEATURES
- Please make sure your design includes all of the specified screens listed below. There are many screens in the full application and we are asking for a specific sub-set in this challenge. You are not required to provide a full user flow, but MUST see each of these views completed.
- Our client is open to your suggestions about the structure and the styling of the screens. Please read carefully to see where our client would like you to explore new ideas.
-
DO NOT COPY the attached wireframes, as the client is looking for a new design.
01. Login Screen
Both user types will log in from the same login screen. Based on their credentials the users will be directed to their respective dashboards.
- User will enter: e-mail address and a password
02. National Head - Dashboard, Strategic View
(content reference: 02 - NH - Dashboard - Strategic View.png)
This is the landing screen of the National Head user. He would like to see the following elements on the screen:
- Global Navigation: For the National Head’s navigation we would like to see the following elements:
- Navigation – Profile, Services, Alarms, Tickets, Devices, Notifications, Escalation Matrix, Help & Support, Knowledge Articles
- Location Search bar
- Profile information
- Strategic map view:
- 3D view (unlike the wireframe) of a selected location in the location search bar. Please use Delhi on your designs. The client is open to suggestions about the map tool to use. Please do not forget to declare the tool.
- Control element to switch Strategic view to National view at this screen.
- Zoom control element to select between 3 view levels of the map. The base view, 1x zoom and 2x zoom view (details seen in requirements below).
- Metrics: Metrics are very important to the user to be able to get a quick view of the network performance. Instead of just a label, the user would like to see some key information in a visual way. The user should then be able to click on the metric types to drill further into the data. The current metrics needed:
- Fault Codes
- Performance Impact
- Inter Domain Level Network Health
- Sections Isolated
- Repeated Occurrence
- Think about scalability. More metrics could be added in the future.
03. National Head - National View, Faults Screen
(content reference: 03 - NH - Dashboard - National View.png)
From the dashboard the user will be able to switch from Strategic to National view. The National view is more focused on the issues of the different devices and connectivity in the network. (this Dashboard view is not in-scope).
Once the user has switched views and drilled into the 2X Zoom view, he is able to select and see details around specific faults in the system.
- Screen will display the same global navigation and metrics as on the Strategic view screens.
- National map view will utilize the same underlying map (for our example: Delhi area)
- Display the details as seen on the sample wireframe.
- The details you see indicate the connectivity of the network in that circle. It shows the active paths and multiple devices connected to one another.
- The user has the ability to click on the device to see options he can drill further into: Putty login, NMS login, Router login.
- When the user clicks into one of these detail options, he will interact with a command line interface (out of scope).
- Please include the controls for the Zoom feature here. Reminder that the user is in the 2x Zoom to see these options.
04. National Head - Fault Code Screen
(content reference: 04 - NH - Fault Code.png)
Clicking on the Fault Code metric, the user will be taken to another screen that shows the distribution of the service types (4GSITE, DSL, ILP, D&C) based on the currently active fault codes.
We are open to your suggestions regarding the visualizations. Please provide a way to navigate back to the dashboard. Focus on the data and details. The map is not necessary on this view.
05. National Head - Performance Impact Screen
(content reference: 05 - NH - Performance Impact.png)
Clicking on the Performance Impact metric, the user will be taken to another screen that shows the performance impact of the service types (4GSITE, DSL, ILP, D&C). Performance is a single metric based on the current measurements from a combination of other metrics (i.e. available capacity, traffic rates, latency, number of faults, QoS). We are open to your suggestions regarding this visualization. Provide a way to navigate back to the dashboard. Focus on the data and details. The map is not necessary on this view.
06. National Head - Inter Domain Level Network Health Screen
(content reference: 06 - NH - Inter Domain Level Network Health.png)
Clicking on the Inter Domain Level Network Health metric (or a specific detail), the user will be shown the network health over time, for the different types of networks. We are open to your suggestions regarding the visualization. Please provide a way to navigate back to the dashboard. The map is not necessary on this view.
- Types of Networks: CEN, EPT, SDH.
- Health measurement is provided from backend data. It will be measured on a scale 1-10 over a specified time period.
07. National Head - Map 1x Zoom Screen
(content reference: 07 - NH - Map 1x Zoom.png)
Zooming into the 3D maps lets the user see additional data visualizations on the map. Network issues are shown on the map by distribution.
08. National Head - Map 2x Zoom Screen
(content reference: 08 - NH - Map 2x Zoom.png)
Zooming further to the map will give the user the opportunity to drill further into the data, by showing the number of issues by type, along with the map. The more frequently arising issue types are shown at the top, so the user can see what are the most common problems for their customers. We are open to suggestions about what else could be shown here to make this more informative.
- Issue Types: Please refer to the attached wireframe for content
09. National Head - Issue Details Screen
(content reference: 09 - NH - Issue Details.png)
When the user selects one of the issue types, he can see the list of those actual issues. We would like to see your ideas about this interaction to make this information more usable and intuitive. Use the data found on the wireframe, but please do not copy the layout as we are looking for an improved solution. Please show the following elements on this screen:
- Data about the issue.
- Location of each issue on the map beside the data
- A link/button to “Track” the issue
10. National Head - Track Field Agent Screen
(content reference: 10 - NH - Track Field Agent.png)
When the user selects one of the issues to track he can see the assigned field agent’s route on the screen (similar to how you would see an Uber driver on the map). Besides the route visualization, we would like to display actions that the user has already taken, and the further steps the field agent is going to take. We are open to your suggestions about an intuitive and informative presentation of all the necessary data.
11. NOC Engineer - Alarms Screen
(content reference: 11 - ENG - Alarms.png)
This screen is accessed when the user selects the Alarms navigation link.
The wireframe shows a sample list of issues to use for content. The map view is not needed on this screen. Suggest an effective way to show the information from the wireframe.
The user will see which issues might have already been taken care of or do not impact service, and which need attention.
- Alarm statuses: Node Up, Node Down
- The user should be able to search and filter this list.
12. NOC Engineer - Service History Screen
(content reference: 12 - ENG - Service History.png)
This screen should show a list of jobs requested. Please refer to the wireframe for data to be shown on the list. Map is not needed in this view.
- The user should be able to search and filter this list.
- Think about drilling further into the data by suggesting links (linked screens are not part of scope).
13. NOC Engineer - Tickets Screen
(content reference: 13 - ENG - Tickets.png)
The user will be notified about new tickets arriving to the system by a numbered badge on the respective navigation element (icon). If he clicks on the icon he will see a list of tickets and the active ticket’s details (Note: the wireframe only shows the details).
Elements on the screen we would like to see:
Elements on the screen we would like to see:
- Map: Instead of showing the large map in the background show just the small map for the ticket details with indication of the affected area.
- Issue data: Please use the data from the wireframe.
- Details link: A link should be provided to see further details and allow the user to act upon the ticket.
- Besides the ticket details the user should also see a twitter, any other social feeds feed of customers regarding the area concerned.
14. NOC Engineer - Tickets Details Screen
(content reference: 14 - ENG - Problem Details.png)
Upon opting for seeing further details of a ticket, the user is taken to a screen where only the respective ticket’s data will be shown including the followings:
- Data from the previous screen.
- Larger map with the issue details shown on it.
- Twitter feed about the same issue.
- Link to Assign a Field Agent
15. NOC Engineer - Assign Field Agent Screen
(content reference: 15 - ENG - Assign Field Engineer.png)
Clicking on the assign link the user will be shown the field agents.
- The field agents should be shown on the map with a profile picture.
- Explore a way to show the user the best choice he can make. For instance show the availability of the field agents. If not available, you could show the remaining time he needs to finish with the current job assigned to him.
- The expatriates of the field agents could also take a role in selecting the best one for the task.
- A link should be provided beside the field agent, so the user can assign them to the ticket.
BRANDING GUIDELINES
- Follow branding guidelines (attached).
DESIGN ASSETS
The below items have been attached.
- Branding reference.
- Wireframes. USE DATA ONLY from the wireframes. Do not copy the design, as the client is looking for a new design.
FORM FACTOR
- Desktop - 1440 px width
FINAL DELIVERABLES
- All original source files
- Create files in Adobe XD or Sketch.
- Marvel Prototype -
- Upload your screens to Marvel App.
- Send your marvel app request to pere.viktoria@gmail.com
- Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.
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.