ROSKO Value Stream App Frontend Workflow Changes Code Challenge

Basic requirements for this challenge:

• Update existing backend and frontend to follow the workflow changes
• Maintain the MVC architecture
• Support unit testing
• Need support responsive on Desktop and Tablet view

Technology Stack

• Angular for frontend
• .Net Core API for backend framework
• Database: MS SQL Server

Deployment environment requirements

• localhost
• AWS EC2

Challenge Overview

Application Background
Our organization is structured by Value Streams after the SAFe industry model. A Value Stream represents an organizational sleeve that has a specific business focus with dedicated resources. For example, in our Insurance business we have multiple value streams such as Product, Inforce Operations, Marketing and Distribution etc. These values streams have roadmaps with target strategies and KPIs (Key Performance Indicators) they’re accountable to deliver on. The roadmaps are a rolling 4-6 Quarters of incremental outcomes representing the delivery of some type of business value. These outcomes ultimately achieve the strategy as measured by these KPIs.

We are looking for a solution to manage these roadmaps. This solution would be for a data entry UI , database repository, that will enable future Power BI data visualizations. This solution will enable multiple personas to access and input roadmap data and demonstrate how a Value Stream is achieving its strategy as measured by KPIs and delivery of incremental outcomes. Eventually, a simple integration between the UI and JH’s Backlog Management Tool (Rally) will be used to synch a few fields. This solution should enable an export of data that can be easily uploaded to a data visualization tool.

Problem
The primary goals for this UI and Database is to get users out of using excel spreadsheets and establish consistency in data being tracked across the division. Additionally, this solution will enable Value Streams to extract data in a format that’s indigestible by a Data Visualization tool reducing time spent creating manual PowerPoint presentations to demonstrate how strategy is progressing. Benefits are as follows:

• Improved user experience tracking roadmap outcomes, KPIs and strategy progression.
• Good usability and efficiency for entering data.
• Consistency of roadmap data being tracked across all Value Streams in the U.S. Division with one source of truth.

Ability to easily export data and upload into a visualization tool enabling multiple personas to generate various data views.

CODE ASSETS

• Frontend repo: https://gitlab.com/jh-topcoder/val-stream-db-front-end
• Backend repo: https://gitlab.com/jh-topcoder/val-stream-db-backend
• Postman Collection & Configuration: https://gitlab.com/jh-topcoder/val-stream-db-backend/tree/dev/docs
• Demo Site: http://ec2-52-14-77-116.us-east-2.compute.amazonaws.com/

DESIGN ASSETS

• Storyboard: https://drive.google.com/drive/folders/1dm09J4eAI2rSCh9zB5D-frEIOwbyPulI?usp=sharing
• Marvelapp Desktop: https://marvelapp.com/1g6dg6eg
• Marvelapp Tablet: https://marvelapp.com/i36i419

General Requirements

• Backend built using .Net Core API and Angular for the frontend. Use best practice solution to connect frontend and backend.
• We need to make sure unit testing support 90% code coverage and need to be as part of the build command to make sure the app not have any bugs
• DO NOT display static data or load from JSON files. All required sections on this challenge need pull data from REST API. You can return 0 or NULL if no data on the endpoints
• Your submission must remain using responsive solution on Desktop and Tablet screen size from existing prototype
• Test and check your submissions on all required browsers

Individual Requirements

1. Label updates

• We need update the endpoints address labels across the backend applications:
  • Strategy Unit to Portfolio
  • Value Stream/VS Strategy to Target Outcome
  • Outcome to Incremental Outcome
• Check the updated endpoints on Postman collections
• Current frontend application still linking with the old backend endpoints, need fix across the pages

2. Dashboard

DESKTOP VERSION
Screenshot: d1_1_0_dashboard_value_streams.png

• Below the header bar, display correct value for number of created Portfolio and Value Streams. Right now they pull numbers from all available 9 Portfolio and 26 Value Streams. Even though, the actual created Portfolios & Value Streams are different.
  • Get the values from this endpoint: GET {{url}}/roadmap/statistics
• Create new Cost button next to New Roadmap. Put dead link for now.
• Value Stream dropdown default placeholder need update to Value Streams instead All Portfolios

Filter
Screenshot: d1_1_5_dashboard_value_streams_filter.png

• Target Date Range of Strategy need updated to Date Range of Target Outcome
• VS Strategy Status need updated to Target Outcome Status
• Keywords of Strategy need updated to Keywords of Target Outcome
• Keywords of Outcome to Incremental Outcome

TABLET VERSION
Screenshot: t1_1_0_dashboard_value_streams.png

• Fix Portfolio and Value Stream label to use same width
• Grouping options and Sort By need appear in the same row. Right now they are placed in separate row

3. Create Roadmap

DESKTOP VERSION

• Fix the Step Wizard order:
  • Define Target Outcomes,
  • Associate with KPIs,
  • Align to Strategy Level,
  • Add Incremental Outcomes,
  • Preview & Submit

Define Target Outcomes Step:
Screenshot: d2_1_0_create_roadmap_step_1.png

• Update title on top section, from “Select Strategy Unit name & Value Stream name related to new roadmap: ” to “Select Portfolio & Value Stream name related to new roadmap:”
• Need able to Add Initiative for each Target Outcome
• Keep existing required fields validation (Screenshot: d2_1_1_create_roadmap_step_1_error.png)
• Please build these field for the Initiative section (Screenshot: d2_1_2_create_roadmap_step_1_filled.png)
  • Initiative ID (text field)
  • Initiative Name (text field) - Required
  • Last Checkpoint (calendar picker)
  • Next Checkpoint (calendar picker)
  • Initiative Health (drop down: Red, Amber and Green values) - Required
  • Initiative Health Trending (dropdown: Improving, Neutral and Declining)
  • Initiative Health Commentary  (text field – for long description)
• Click delete button need show the existing style for confirmation that will cover the related Initiative row (Screenshot: d2_1_3_1_create_roadmap_step_1_delete_initiative.png)
• Click to delete button on Target Outcome need covered the overlay above related Target Outcome and its Initiative (Screenshot: d2_1_3_2_create_roadmap_step_1_delete_target_outcome.png)

Associate with KPIs Step:
Screenshot: d2_2_0_create_roadmap_step_2.png

• Note: Update Completion to Completion %

Align to Strategy Level Step:
Screenshot: d2_3_create_roadmap_step_3.png

• IMPORTANT: Strategy Level & Theme linking with KPI now instead of Incremental Outcome.
• We need swap Align to Strategy Level step (4) up to step (3) where Add Incremental Outcomes currently sits in the workflow
• Strategy Level fields and function need remain works like existing

Add Incremental Outcomes Step:
Screenshot: d2_4_create_roadmap_step_4.png

• We need swap current Step (3) to Step (4)
• For this updated design, incremental outcomes need associate with Target Outcome instead the previous step.
• Add an Incremental KPIs field below Incremental Outcome Description.
• Need able to add multiple incremental KPIs or delete them
• Incremental KPI fields are not required
• Incremental outcomes can be tagged to one or more Incremental KPIs. Similar to strategy level and themes functionality there would be a dropdown KPIs that you could select to associate an incremental KPI to a KPI.
• IMPORTANT: Add these label above both input:
  • Incremental KPI
  • KPI

Preview and Submit Step:
Screenshot: d2_5_create_roadmap_step_5.png

• Fix the title of ‘Strategy Level & Themes of Outcomes’ to be ‘Strategy Level & Themes of KPI’ when expanded the ‘Progress (Count on KPI section)’
• Need add Incremental KPI & Related KPI on the table column, and make scrollable function working like existing to scroll to correct year and quarter
• Strategy Level & Themes tab
  • Remove the Incremental Outcome column on table, since the updated Strategy Level & Theme linking with KPI.
• This Preview and Submit need match like on the updated Roadmap details. Refer details below
• We need to add initiative like on Define Target Outcome step using table layout on top area

TABLET VERSION
On Step wizard, remove the line separator between numbers

Define Target Outcomes Step:
Screenshot: t2_1_0_create_roadmap_step_1.png

• Initiative section added under Target Outcome
• Make sure all fields using fluid width
• Use same style for required field (Screenshot: t2_1_1_create_roadmap_step_1_error.png)
• This is Initiative look after used fill the data (Screenshot: t2_1_2_create_roadmap_step_1_filled.png)
• Delete initiative confirmation (Screenshot: t2_1_3_1_create_roadmap_step_1_delete_initiative.png)
• Delete Target Outcome confirmation (Screenshot: t2_1_3_2_create_roadmap_step_1_delete_target_outcome.png)

Associate with KPIs Step:
Screenshot: t2_2_0_create_roadmap_step_2.png

• On Step Wizard: remove the line separator between numbers
• Sample page look after data filled (Screenshot: t2_2_1_create_roadmap_step_2_filled.png)

Align to Strategy Level Step:
Screenshot: t2_3_create_roadmap_step_3.png

• We need swap Align to Strategy Level step (4) up to step (3) where Add Incremental Outcomes currently sits in the workflow

Add Incremental Outcomes Step:
Screenshot: t2_4_create_roadmap_step_4.png

• Incremental KPI added to Incremental Outcomes

Preview and Submit Step:
Screenshot: t2_5_create_roadmap_step_5.png

• On Step Wizard: remove the line separator between numbers

4. Edit Roadmap

DESKTOP VERSION
Current issues:

• Remove message that show up at the first time load the page with this text “No results found for given search parameter”
• Value stream dropdown when fill with longer text make the dropdown selected text not wrapped correctly
• Show correct active state for Collapse All & Expand All
• Ignore to add refresh icon.

Target Outcome Info Tab
Screenshot: d3_1_edit_roadmap_info.png

• Update Description into Target Outcome
• Target Date & Completion Date need move to the left side and Status to the last placement

Associated Initiatives Tab
Screenshot: d3_2_edit_roadmap_initiative.png

• This is the new tab when edit roadmap
• Need able to add new initiative on this screen

Associated KPIs Tab
Screenshot: d3_3_edit_roadmap_kpi.png)

• Update Completion to Completion %

Strategy Level & Themes Tab
Screenshot: d3_4_edit_roadmap_level.png

• IMPORTANT: Strategy Level & Theme linking with KPI now instead of Incremental Outcome.
• Need swap this tab placement with Incremental Outcome tab

Incremental Outcomes Tab
Screenshot: d3_5_edit_roadmap_incremental_outcome.png

• Need move Incremental Outcomes Tab to the last placement
• Need able to add Incremental KPI on this tab
• Note: Incremental KPI should be optional

Filter
Screenshot: d3_6_edit_roadmap_filter.png

• Fix indentation on KPI Status: All value
• Remove Outcome Status row
• Keywords of Outcome need updated to Keywords of Incremental Outcome
• Make sure filtered data run correctly like existing

TABLET VERSION
Screenshot: t3_1_edit_roadmap_info.png

• Fix Portfolio and Value Stream label to use same width
• ignore refresh icon next to dropdown
• Save all and Reset button need move up

Target Outcome Info Tab
Screenshot: t3_2_edit_roadmap_initiative.png

• Fix the field order like on desktop version

Associated Initiatives Tab
Screenshot: t3_3_edit_roadmap_kpi.png

• This is the new Initiative tab need added

Associated KPIs Tab
Screenshot: d3_3_edit_roadmap_kpi.png

• Comment need move to separate new row with longer textarea

Strategy Level & Themes Tab
Screenshot: t3_4_edit_roadmap_level.png

• IMPORTANT: Strategy Level & Themes need linking with KPI instead Incremental Outcome
• Need swap this tab with Incremental Outcomes

Incremental Outcomes Tab
Screenshot: t3_5_edit_roadmap_incremental_outcome.png

• Need swap this tab to the last placement
• Need able to add Incrementals KPI

Filter
Screenshot: t3_6_edit_roadmap_filter.png

• This filter look and feel on Tablet version

5. View Roadmap Details
DESKTOP VERSION
Screenshot: d4_1_1_roadmap_details_outcome.png

Current issue:

• Remove message that show up at the first time load the page with this text “No results found for given search parameter”
• Value stream dropdown when fill with longer text make the dropdown selected text not wrapped correctly
• Show correct active state for Collapse All & Expand All
• On Collapse All, for Target Outcome with no KPI, need remain display the same progress bar like other rows. Use grey background color bar with “KPI Status not created”
• Ignore to add refresh icon.

Quarterly Outcome Tab

• Need add Incremental KPI & Related KPI on the table column, and make scrollable function working like existing to scroll to correct year and quarter

Strategy Level & Themes Tab

• Remove the Incremental Outcome column on table, since the updated Strategy Level & Theme linking with KPI.

KPI Overview Tab

• Update Completion to Completion %

Filter

• Follow the updated filter on Edit Roadmap

Print

• Portfolio & Value stream need pull correct values instead All.
• Target Date Range need show correct date range. And remove any text if not filtered
• Filtered need detect if data filtered or not

TABLET VERSION
Screenshot: t4_1_1_roadmap_details_outcome.png

Quarterly Outcome Tab

• Need add Incremental KPI & Related KPI on the table column, and make scrollable function working like existing to scroll to correct year and quarter

Strategy Level & Themes Tab

• Remove the Incremental Outcome column on table, since the updated Strategy Level & Theme linking with KPI.

KPI Overview Tab

• Update Completion to Completion %

Filter

• Follow the updated filter on Edit Roadmap

Web Browsers Requirements
Your submission must look and work consistently across these following browsers on the latest versions:  

• IE11 (IMPORTANT: Need test first)
• Chrome,
• Edge,
• Safari,
• Firefox

Final Submission Guidelines

What To Submit?

• Patch file of updated frontend
• Updated README.md (How to setup your app on localhost and live site, also support the unit testing)
• Challenge winner need send Merge Request to our repository