Risk Management - UI prototype part 1

Risk Management Tool UI Prototype Challenge

 

Challenge Objectives

 

• Create Angular UI prototype for risk management app - admin screens

 

Project Background

 

We’re building a Risk Management tool. Intended app workflow is fairly simple - admin users define risk matrix and risk register and regular users use it to track risks for an activity and they can add actions to mitigate risk and get the final remaining risk number. Even though the workflow is simple, there are a lot of configurable options both on the admin and user side and making the tool flexible to support all those options is a high priority for the tool

 

This challenge is building the ui prototype and followup challenges will focus on building the backend, testing and integration.

 

Technology Stack

 

• Angular

• Typescript

• TSLint

Individual requirements

 

Screen designs are provided in the forums. Wireframes that describe the user flow are also provided in the forums for reference.

 

There are two types of users in the app: admin and regular user. Only admin user screens are in scope of this challenge

Here is a short overview of the admin user workflow:

Admin user is first defining a risk matrix - wireframe pages 34-54, and a risk register for that same matrix - wireframe pages 55-59

Risk matrix has the following properties (see wireframes page 37-38):

• Name (string)

• Type (string)

• Matrix size - X and Y dimension (positive integers)

• Labels for X and Y axis

• Sorting order for both axes

• Additional criteria columns (X axis columns)

• Additional criteria rows (Y axis columns)

• Short title for each criteria column

• Title for each criteria column

• Text for each combination of criteria column and each row (Y axis dimension)

• Name of each row (number of rows is equal to Y axis dimension)

• Name of each column (number of columns is equal to X axis dimension)

• Text for each combination of criteria row and each column (X axis dimension)

• Value for each combination of row and column (actual risk values)

• Risk categories definition (wireframe page 40) - ordered list:

  • Risk level range (ex 1-3)

  • Risk level label (ex II - see page 47)

  • Qualitative evaluation

  • Description

  • Color 

Those are just the underlying data attributes for defining a risk matrix. Additionally, each matrix should store presentation configuration attributes:

• Location of X and Y axis labels (start, middle, end) - two attributes, one for each axis

• Width of each criteria column (we’ll leave the interpretation of these attributes to frontend - just save a string value here - it’s up to the frontend developers to save either absolute width here or percentages)

 

Once a risk matrix is set up, the admin user has to configure a risk register for that matrix (matrix without a risk register won’t be used anywhere).  Risk register is a table with lots of configuration options that tracks risk changes for a particular activity. Admin users should configure it, and regular users will fill in the actual rows. Risk register has the following columns:

• RiskNo, HazardId, RiskType, Category, Reference that are all mandatory columns

• Risk Code, Risk Code 2, Event, Cause, Consequence - default columns that can be hidden 

• Initial risk section - for each value of “additional columns” in the risk matrix, user should enter value for X axis, value for Y axis, and risk (this will be auto calculated).

• Actions column, Status, Responsible, DueDate

• Remaining risk - similar to initial risk section - holds the information on the risk remaining from initial risk after taking the actions from “Actions” column

• Final Risk

• Comments

• Type (specific or generic)

• Additional columns

 

Admin can add additional columns to risk register and each of those columns has these attributes:

• Label 

• Filter enabled flag

• Type: Picklist, Text, Date

• Allowed values in case the type is picklist

 

Admin users can also choose which columns will be visible for the end user. All columns except for mandatory columns and final risk can be hidden. Finally, column width can be saved for each column for presentation purposes (same behavior as criteria columns - just save a string value and let the frontend handle the interpretation)

 

Admin user features mapping to the design screens:

• Project setup (screens 1-2)

• Matrix setup (screens 3-23, except 3, 4, 7, 10, 11)

  • Keyboard shortcuts is out of scope

  • Reordering matrix columns is out of scope

  • Remove the select risk category feature shown in the designs

  • Editable column names in risk category popup is not in scope

  • Remove undo/redo features and save as draft

• Risk register setup (screens 24-34)

  • Zoom feature is out of scope

What To Submit

• Submit the full app code

• Submit a Readme with details on how to configure, build, run the app

Final Submission Guidelines

See above