Sedara Web Application UI Design Challenge

This project is for a cybersecurity services company that provides managed security services to customers, based on an overall program approach and attempts to cover all of the possible areas of security where a customer might have deficiencies. This project is intended to design a public-facing portal that will provide a customer full visibility into the status of all of their Services that Sedara provides them.

Round 1

2. Customer Dashboard
4. Assets Management

Round 2

1. Authentication
2. Customer Dashboard
3. Internal Dashboard
4. Assets Management

Challenge Objectives

• Design the user experience for a web application that takes into account the various types of data sources that the end user (customer) needs to consume on the main view as well as sub-screens.
• Explore the best way to manage all of the different components that we are looking to include, while at the same time keeping the core need consumable and actionable to the customer.

Project Overview
This will be a Web-based system for viewing the status of many different services and features.  It will pull data from many different systems and services to support the data on the screen.  This data may be queried in real-time or stored in a separate database, depending on best practice and frequency of data update.  

The purpose of the system is to give customers a full view of the current status of their services with Sedara, as well as provide additional data and status to Sedara employees.  There will need to be multiple roles to support these functions and the internal role will likely need to include all data as the customer role.

The key to this system will be the data that we upload or automatically ‘discover’ for each customer and the ability to tag/mark it and manipulate it as it relates to the various risk assessments and compliance frameworks. 

The application must provide customers with a one-page dashboard of the current status of all services as well as the impact to their environment, start and end date of all contracts/services, a display of all open project or work items (assigned to Sedara or customer) as well as graphs/gauges showing the overall status score for a number of different pieces of each service.  i.e. show overall deployment status of all endpoint software agents (i.e. 80 endpoints deployed but 100 endpoints showing up from a feed from Active Directory, thus showing a gauge of 80% deployed and the risk score associated with that).  

Some customers will NOT be using all of Sedara’s services, so the layout and display needs to account for things not being managed by Sedara OR may not exist in the environment at all.  It may be preferred to highlight the absences of these functions or data as part of the score and tie them to the overall view of open items and suggestions.  This is, in part, a ‘sales’ component of the system, to highlight to customers, if they have major components of their security program that are missing and we can possibly help them with, but should also be a graceful balance of being a functional reminder of their deficiency and not a sales-focused one.

Key Insights

• On the main dashboard, a vulnerability management ‘section’ may show the top 10 critical vulnerabilities discovered this week, but if we are NOT providing this service, maybe it will have the top 10 industry vulnerabilities and a link to ‘call sales’ if interested. 
• Network IDS may have a section that shows the top 10 recent IDS events, but if we are not performing network IDS, this section may also link to sales and show a sample of critical items that we normally discover (canned data)
• May want the ability to ‘snooze sales notifications’ or remove these sections altogether, if the customer chooses to.  

Application Components Overview
Critical services and supporting components that will need to be shown a summary for. A basic module (or more than 1) for each of the following items will be required on the main dashboard and there will be details in a separate web page, that would be specific to each section and would have much of the more detailed content.

See the provided sample data set in the assets section below, with highlighted examples of the types of use cases that could be highlighted:

• Antivirus/Endpoint Deployment status
  • Percentage deployed to all operating systems based on the asset inventory above
  • Percentage of assets actively protected (supported by systems that are out of date on updates or assigned more ‘lax’ policies around control
  • Asset update status (are there endpoints that don’t have definitions up to date?)
• SIEM Deployment Status by Category of Component
  • i.e. Asset inventory should show how many firewalls are inside an environment and this gauge should show how many we are collecting data/logs from as well as a SEPARATE graph verifying the logging level or ‘completeness’ of the data that is being received from each one.  
  • Show how many assets have a ‘server class’ operating system and show if we are collecting logs from them all or if there are gaps (We will provide the asset scan and validation on if we are receiving the logs – this interface only needs to query the middle tier to see if it is being received correctly or now). 
• Should show all open tickets for the customer – possibly just a top 10 list if there are more
  • Should show ticket status and who it is currently assigned to
  • Will pull from existing ticket system via API
  • Will provide customers the ability to update/close tickets and save reports out of it
• Asset Inventory Status (detailed inventory should be a separate page/component) – this piece SHOULD NOT be the cornerstone of the initial dashboard or application as a whole, but maybe the single most important supporting component of this entire application.
• Other security metrics
  • The average number of alarms per day
  • Deviation from daily alarm number
  • Graph of alarms per type
  • Customer Account Status
    • Products/services currently purchasing
    • Renewal dates
    • Reminder for starting the renewal process
  • SMA Appliance Status – maybe show an image of the appliance and show its health status, by service and component?  See reference appliance sample.  
• All these components should have a more detailed supporting screen that will allow for further drill-down into each component as well as possible modifications to the data or interaction at a certain level.  i.e. Customers may be able to close a ticket or open a ticket or may be able to modify an asset name or details.  

Audience 

• Customers – IT Managers, CIO’s, CISO, and technical staff (network administrator, systems administrator, developers, etc).
• Sedara Security Analysts – technical staff that monitors all services/components and interfaces with customers on all matters.
• Sedara other staff – sales may want to view current statuses of their clients or project managers may need access as well.

Personas
Samantha Martial

• Job: CISO
• Occupation: Executive in charge of overall security programs.  NON-TECHNICAL USER
• Goals:
  • Should be able to see the overall status of most components and identifiable value of Sedara services at a glance.  i.e. statistics showing the trend in risk going down over time
• Frustrations:
  • Too much technical content – they don’t want to get into the details
• Wants:
  • Quickly identify the status and actionable items that they need to push forward

Nathan Fraser

• Job: IT Manager
• Occupation: In charge of operational IT within the organization, but may have a security responsibility in many organizations that don’t have a security team.  
• Goals:
  • Should be able to see the overall status of most components and identifiable value of Sedara services at a glance.  i.e. statistics showing the trend in risk going down over time
• Frustrations:
  • Too much technical content will create frustrations and not focus on the true status or next steps
• Wants:
  • Clearly identifiable action items and executive summary

Rachel Stones

• Job: Security Analyst (Customer Side)
• Occupation: Very technical and hands-on role, in charge of performing security functions within the organization.  Generally not strategic in nature.
• Goals:
  • Ability to quickly drill into the details of each component, to be able to actually go and resolve identified issues.  i.e. if ‘Deployment Status’ for an endpoint is below 100%, they should be able to quickly get the list of systems that are missing, so they can go and install it.  
• Frustrations:
  • Inability to get to details of views or filter data quickly. 
• Wants:
  • Actionable and accurate data at their fingertips.  Ability to filter data quickly and export it into PDF or excel as a report.  

User Story
Sedara’s customers spend a great deal of money on the services that we provide, but the deployment is always a moving target and security is never complete. 

This portal is meant to give the customer a tool to regularly see the value in the services that we provide, the progress that they are making and the current deficiencies that they have.  

This portal should be a balance of reinforcing the positive commitments they have made in their overall security posture, while continually highlighting the risks that they still have and tie those back to either things that the Customer needs to do internally to fix or ways that Sedara can fix them for them. 

Screens Requirements
Overall

• Please make sure your design includes the following screens/sections.
• Our client is open to your suggestions about the structure of the screens as long as the screens deliver the same content and allow for the same functionality.
• Design a global navigation that includes user profile, settings, log out.

01. Authentication

• The user should be able to log in to the web application.
• Besides email and password, multi-factor authentication must be enabled.

02. Customer Dashboard
02.a. Asset Inventory Status

• Overview/health report of the assets.

02.b. SIEM Deployment Status

• Identify high-risk assets that are not sending logs.
• Possibly calculate a ‘completeness’ score for deployment.
  • If the completeness score is ready for deployment, no action item is required, but this is an easy item for customers to fall out of compliance with.  i.e. if one help desk person deploys 5 laptops and doesn’t install Carbon Black on them, it should show up here. How should we manage complete score vs “not ready yet” scenarios?
• Possibly calculate a ‘risk’ score for the current state of deployment.  i.e. if we have identified ‘high-risk’ assets that we know are not collecting logs into the SIEM – we show a ‘risk’ score for it and the ability to dive Into the details of what is missing and possibly recommendations on exactly how to fix them.  

02.c. Endpoint Status

• Current deployment percentage (how many assets do we know about and how many do not have the agent installed?)
• Risk Calculation related to how many are missing and how many high-risk assets
• Assets that are in ‘bypass’ mode or low enforcement policies

02.d. Ticket system status

• Security Incident Tickets.  I.e. that we have detected malware in the environment and we have quarantined a device.  Or that we have detected active phishing attacks and have reset the following users’ passwords. 
• There are no ‘support tickets’ as we do not do IT, so our Ticket Flow is usually initiated by Sedara and flows down to the customer;  not the other way around.

See ticket_sample in the data sample file.

02.e. Network IDS Events

• See ticket_sample in the data sample file.

02.f. Customer Contract Status and services purchased

• Show license levels, utilization, end dates.
• See customer_account_sample in the data sample file.

02.g. Add-ons

• Customers who will not be using all of Sedara's services must have a mechanism of awareness and optional action to acquire these services that can be provided by Sedara or a third party.
• There are sections for Endpoint Completeness, Network Intrusion Detection, SIEM, Vulnerability Management, and our SMA appliance;  more than half of our customers do not currently use ALL of these services from us;  do we highlight these sections on the dashboard as gaps or re-alight the dashboard all together to not show it?  Most customers will never get to ALL the services, they can hide those sections if they chose. 
• Integrate the add-on notice in the form of suggestions in the specific sections as they are needed. The discoverability of these elements should be user-friendly as the users navigate through the encountered issues of their system.
• Add the ability to mute these special notifications.

03. Internal Dashboard
03.a. Asset Inventory Status

• Should we display it the same as in the customer’s dashboard? Is there any particular function that would be valuable for the internal staff to have? Open to suggestions.  Same as the customer view?

03.b. SIEM Deployment Status

• Should we display it the same as in the customer’s dashboard? Is there any particular function that would be valuable for the internal staff to have? Open to suggestions.  Same as the customer view?

03.c. Endpoint Status

• Should we display it the same as in the customer’s dashboard? Is there any particular function that would be valuable for the internal staff to have? Open to suggestions.  Same as the customer view?

03.d. Ticket system status

• Should be unique and incorporate internal-only content (marked within tickets).

03.e. Network IDS Events

• The unique internal view that may highlight common events across customers?

03.f. Real-Time Average Alarms per Hour – global view

• Customer-specific version 
• See ticket_sample in the data sample file.

03.g. Alarms getting close to SLA

• i.e. haven’t been reviewed within an hour of them being created.
• Show license levels, utilization, end dates.

03.h. Top 5 high-risk customers

• List of customers with high-risk alerts/warnings.

04. Assets Management

• Combination of manual uploads of data, API Queries for hostnames and IP addresses, queries from Active Directory for Computer Objects, and NMAP-type scans for live systems on the network. 
• Should be able to see a status of how complete the above data collection methods are assumed to know about the environment -i.e. do we know EVERYTHING that exists in an environment or is there more discovery/uploads that need to be done?
• This may include subpages to show assets by each source as well as the main view that shows a consolidated/deduplicated view of them all.
• Ability to quickly deduplicate assets from various sources and combine them into one asset.  
  • Multiple data sources will have redundant information and we will programmatically attempt to combine them, but there will inevitably be assets that need to be resolved for these dashboards to work correctly.
    • i.e. a query of Active Directory computer objects will return a full list of important Windows computer objects.  An NMAP network scan for live Windows systems should provide the same information, but will also show information related to open ports and other issues, however, the two different results should be combined into the same asset and any differences need to be able to manually resolve.  A Security analyst.
• Some of the asset data may be extremely high volume while others may be very small. How do we make this usable for larger environments?  i.e. 10,000 user environments with only 80% endpoints deployed is still 2000 endpoints for someone to sort through to see if they actually exist or what needs to happen with them. How do we manage this volume of data and where does the ‘master’ data live?

Device Specifications

• Desktop: 1440px width.
• Work in a vector format for retina scaling and high fidelity.

Design Goals & Principles

• Needs to balance the ability to show high-level dashboards (executive reports) and quickly drill into details, without losing place.
• Clarity on the expected inputs and outputs from the UI. The users should seamlessly recognize what’s needed from them and where to find the actionable items.
• Focus on discoverability, explore the best way to manage all of the different components that we are looking to include, while at the same time keeping the core need consumable and actionable to the customer.  i.e. if they only have antivirus deployed to 80% of their environment, that really takes precedence over any advanced protections we might want to highlight. A security engineer would need the ability to drill into the last 20% very quickly and mark assets if they need adjustment.  
• Seamless assets navigability. Needs to provide the ability to ‘suggest’ or make the filtering of assets or data very easy, based on needed changes:
  • In large environments, if we show a need to remediate hundreds or thousands of assets, we may want to be able to automatically break it down into the more pointed locations, such as focusing on the common location or data elements for the ‘low hanging fruit’.  

Branding Guidelines

• Follow the existing application branding and layouts (strict).

Judgment Criteria

• Creativity: Conservative; barely new ideas, use what is already proven to work.
• Exploration: Flexible; follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals.
• Aesthetics: Hi-fidelity design; provide a top-notch finished-looking visual design.
• Branding: Strict; carefully follow the provided guidelines and stick to them.

Glossary

• SIEM: Security information and event management. Logs/behavioral visibility.
• Active Directory: a Windows domain network (interconnected equipment).
• NMAP: Network Mapper - network scanner.
• Network IDS (NIDS): Intrusion Detection System events, network/packet visibility specifically.
• SLA: service level agreement.
• Hygiene – underused term in the industry and can be used to really highlight some key areas
• Privileged Account Hygiene – are there too many domain admin accounts?  
• Authentication Hygiene – are there some accounts that are registering many failed auth requests for no reason or maybe some reason? 

Design Assets
Find the challenge assets in this thread:  https://apps.topcoder.com/forums/?module=Thread&threadID=967756&start=0&mc=1#2451633 

• 01 Branding: colors, typography, and icon styles to follow.
• 02 Data: small examples of data. They need to be able to scale to hundreds of user accounts and over 10,000 assets for a larger customer. Assume that these use cases provided could be much higher volumes and provided.

Final Deliverables

• All original source files.
• Files should be created in Adobe Photoshop, Adobe XD or Sketch.
• Numbered/Ordered JPG screen files.
• Marvel Prototype
  • We need you to upload your screens to Marvel App.
  • Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30182680 
  • Do not use the forums to request for MarvelApp.
  • Provide clickable spots (hot zones) to link your screens and showcase the flow of the solution.
  • You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).