Pepsico NextGen CLE Command Center Design Challenge

Welcome to Pepsico NextGen CLE Command Center Design Challenge.

For this challenge, we need you to use your research skills along with your design skills.

Challenge Objectives

• Configurable Command Center Dashboard Example 1,  Example 2:
• Utilize Material Design branding requirements in your design.
• Design a landing page with a "Command Center" type of dashboard  interface with scalable configurable widgets for a Pepsico NextGen CLE (Common Logging and Exception handling) application.
• Expectations is to have a command center dashboard (think NASA command centers) which is configurable and modular with at least 10 sample widgets reflecting KPIs or key metrics widgets targeted for our customer team.
• For this design challenge, Pepsico is looking for modern, and professional screen designs that will help us create a demo, showcasing Logging and Exception handling command center.
• Use Material Design for application branding

Round 1

Submit your initial “Pepsico NextGen CLE Command Center Design” for Checkpoint Feedback that incorporate these features:  You don’t have to deliver every feature for the checkpoint.  Show as much as you can so we can provide as much feedback as possible.  There is no minimum or maximum amount of features required for the checkpoint.

1. Exception
2. Log
3. Application Details
4. Track & Trace
5. Alert and Notification
6. Transaction Replays
7. Success and Error Message

Round 2

Submit your Final “Pepsico NextGen CLE Command Center Design” Design with Checkpoint Updates that incorporate these features:

1. Exception
2. Log
3. Application Details
4. Track & Trace
5. Alert and Notification
6. Transaction Replays
7. Success and Error Message

Users

• Application Support Analysts - IT people who analyze the data to improve the performance of the thousands of  applications that Pepsi employees use for day to day operations.  These dashboards are also used for monitoring the applications for errors and performance issues to create support tickets.

About the NextGen CLE Application
CLE stands for Central Logging and Exception handling application. Pepsi has 10000s of applications that send application errors and Log data to CLE. CLE stores all the error and log data for a configurable number of days.  Pepsi employees can login to the CLE application  to view the log and error data for the applications that they use.  Some users have access to multiple applications, so they should be able to view and monitor each of them in the CLE app.

Log Analytics Dashboard Research
For this challenge, we are asking you to research and learn about Log Analytics.  We are looking for fresh design perspectives on the creation of these dashboards.  We are providing some links to help you get started.

• https://searchitoperations.techtarget.com/definition/log-analytics
• https://medium.com/tensult/what-is-log-analytics-a79eb3f416a6

Log Analytics Dashboard Inspiration
Use these dashboards to help you visualize what is expected for a Log Analytics Dashboard.  It may also help to look at Log Analytics Dashboards online to gain more perspective.

• https://www.elastic.co/guide/en/kibana/current/dashboard.html
• https://docs.microsoft.com/en-us/azure/azure-monitor/learn/tutorial-logs-dashboards
• https://www.datadoghq.com/blog/log-analytics-dashboards/

Existing CLE Application Features

• Please include these in your design. These are common terms.  Research Log Analytics for a better understanding of these terms.
• Track and Trace Log records of company applications.
• Detailed Error Information activity with a graphical representation.
• Central services for applications to store and view log records, to manage audit information as well as to correlate logs and exception records.
• Alerts and notifications are sent to relevant team(s) when technical errors occur.
• Role-based access allows for analyzing and tracking of issues: application-wise, process-wise, and error wise.

IMPORTANT: Key Focus Points for this challenge submission
As part of this challenge submission, you need to focus on below criteria that the client is looking for:

• UI design should drive productivity for Application Support Analysts and Non-Technical users. Ease of use is a must.
• We are providing the technical APIs in the documentation. We understand these files are difficult to read if you are a non-developer.  Therefore it is not mandatory, but utilize existing underlying data structures/APIs if you can. URL: https://drive.google.com/open?id=1rxXIsm9Wl5Lv-2SViReF7Ij9G_uXjeqK
• The dashboard should be widgets based and needs to be pluggable/configurable.
• Design is metadata/configuration/components driven and MUST continue to work at scale even after adding 1000s of applications added now and in the future.  So even though we are not asking you to design 10000 widgets, it should be scalable to accommodate that.

General Requirements

• Create 1 (one) landing page design with  “Command Center” user interface type.
  • Command Center Design reference: https://id.pinterest.com/jonathanbriggs/command-centre-screens/
• You need to create a Command Center design to fully support configurable widgets (Some actions: arrange, drag and drop, filter and sort, etc)
• Element designs need to be modular and can be used in different parts of the application.
• “Command Center” submission designs need show examples of different useful widgets.  It is entirely up to you which widgets to show based on your research.
• Command center design needs to support scalability when the client adds more than 1000s of applications to track and trace in the future.
• The user needs to login to access the Command Center landing page. Provide a way to logout.
• Try and make this Command Center design into a single screen application.  This should be a dashboard style, where the user can access everything from it on a single screen.
• The Command Center dashboard needs to be able to filter data displayed, based on:
  • Application Name (All by default or select specific)
  • Days
  • Hours
  • Months
• Application will support multi-roles. It needs to show what users are able to access or not.

NextGen CLE Command Center Features
Suggest what needs to be displayed in the Command Center page by putting quick information or quick actions based on NextGen CLE features:

1). Exception

• Exceptions can be seen as a way of providing Resilience, or tolerance to application. It allows the application to continue to behave normally even when things go wrong but at the same time report what went wrong.
• Exception Detail example data. Note: all these fields coming from client API, not all fields need displayed in page. Please pick them.
  • Application Domain
  • Application Name
  • Business ID
  • Business ID2
  • Code
  • Component Name
  • Data Size
  • Dump Analysis
  • End Time
  • Exception Category
  • Exception Severity
  • Exception Type
  • Filtered
  • Hostname
  • Message
  • Message Name
  • Message Value
  • Page ID
  • Purged
  • Replay Destination
  • Resolution Description
  • Service Name
  • Sort Columns
  • Sort Order
  • Start Limit
  • Start Time
  • Status
  • Tables
  • Transaction Data
  • Transaction Domain
  • Transaction ID
  • Transaction Type
  • User ID

2). Log

• Log is auditing or keeping track of every activity that has taken place in the application.
• Log Detail example data. Note: all these fields coming from client API, not all fields need displayed in page.
  • Application Domain
  • Application Name
  • Business Id
  • Business Id2
  • Component Name
  • Data Encoding
  • Filter Roles
  • Filtered
  • Host Name
  • Jms Header
  • Log Category
  • Log Id
  • Log Level
  • Log Messages
  • Message Pairs
  • Purged
  • Service Name
  • Status
  • Time Duration
  • Time Mark
  • Trans After
  • Trans Before
  • Trans Domain
  • Trans ID
  • Trans Type

3). Application Details

• All Exceptions and logs will be linked with a specific application
• Application Details example data: Note: all these fields coming from client API, not all fields need displayed in page. Please pick them.
  • Application ID
  • Application Name
  • Description
  • Exception Retain
  • Exception Table
  • Log Retain
  • Log Table
  • Purge Column Based Indicator

4). Track & Trace

• This is the feature to track and trace Exception and Log
• Suggest how this feature should work

5). Alert and Notification

• Create a generic design that shows how the alerts and notifications work.

6). Transaction Replays

• Transaction Replay is when a transaction is valid on both sides of the CLE app and another related application.
• Transaction Replay example data: Note: all these fields coming from client API, not all fields need displayed in page. Please pick them.
  • App Table
  • Exception ID
  • Replay Count
  • Resolution Description
  • Resolved
  • Resolved Date
  • Status

7). Success and Error Messages

• Create a generic design that shows how Success and Error Messages work.

Form Factors
Please make sure your design supports these form factors:

• In-scope
  • Desktop: from 1366px(w) x 768px(h)
• Out of scope
  • Mobile and Tablet

Branding Guidelines

• Use Material UI Design Branding: https://material.io/design/

Judging Criteria

• How well you plan the user experience and capture your ideas visually.
• Cleanliness of your graphics and design.
• Overall design, UI and user experience.
• Consistency across the UX/UI.
• How well you interpret the features (business relevance) and show us new ideas and concepts.

Final Deliverables

• All original source files.
• Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file or Sketch
• Marvel Prototype
  • We need you to upload your screens to Marvel App.
  • Please send your marvel app request to lunarkid@copilots.topcoder.com
  • 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).