Financial Analysis Responsive Web App Building

Challenge Summary

Welcome to “Financial Analysis App Design Challenge”. Financial Analysis App development will be broken into two parts: UI & Backend REST API. This challenge is only about building fully functional UI.
In this challenge, we seek community members’ expertise to build a Responsive web UI to compare (a) current operating costs of prospects with the (b) cost if the prospects were to buy our client’s services.
This frontend should be Responsive as it will be used on from big screen monitors to all the way to handheld devices like iPad, Android tablets and possibly Phablets. Client is looking forward to professional and some of the best UI for this application.

Full Description & Project Guide

Financial Analysis App consists of a series of screens that allow users to enter various aspects of cost (data entry screens) and in the final screens show comparison using 3D Stacked Column chart. The screens are given to you in the “FinApp Workflow.pdf” document.
Each of the screen is described here:
Solution Wheel Screen (page 1 in PDF)
 #006595
 #DBEEF4
Table 1 Colors Used

• Chart (pie) button takes the user to Tower Report Single Block screen
  Prospect Details (inside rounded rectangle) (see GET api/prospects?externalID={externalId} for JSON sample)
  1. Name of prospect
     Quote Number – editable in this screen
     Quote Revision – editable in this screen
     Annual Gross Pay
     Number of Employees
  
  Definition of Solution Wheel
  1. Solution wheel will be replaced with a proprietary image. So, you must use a comparable circle image.
     Draw a circle of comparable size and split it into 8 equal slices
     Use fill color of #006695
     Place Business Avatar image in the middle
     Starting from 12’O clock position, the sections will have below text:

Performance Management Support
Training and Development
Benefits Plan Sponsorship
Employer Liability Management
Business Services
Government Compliance
Employment Administration & Payroll
Recruiting & Outplacement Support

1. Each of the 8 sections of the wheel allows interaction
   When clicked/touched, user is taken to that section of data entry
   It is okay to use these texts straight-up in the app. These texts will not be served by backend-API.

DataEntry Screens (pages 2 – 8 in PDF)
 #006595
 #DBEEF4
 #009600
 #7F7F7F
 #FFFFFF
Table 2 Colors Used

• Do not hard-code titles (e.g. Recruiting & Outplacement, Performance Management) or line items (e.g. Job Descriptions, Performance Measurement/Appraisals Plan Design). See if you can mock a back-end (https://docs.angularjs.org/api/ngMockE2E/service/$httpBackend), that will return sample JSON given in a separate attachment.
  Reset confirms with the user with below prompt:
  1. “This will erase all values entered manually. Data imported from external systems will remain intact. Are you sure?”
     If clicked Yes, send a PATCH method on analysis resource with “reset” operation; and, refresh the UI.
     If clicked No, application takes no further action; allows the user to continue with the application
  
  Save button does one of the two below:
  1. Sends PUT method on analysis resource providing all details of the analysis

OR

1. Sends PATCH method on analysis resource with only what actually changed. This is preferable if you’re able to keep track of changes on front end side

• Bulls Eye icon takes the user to Solution Wheel screen
  Prospect Details
  1. Same as Solution Wheel Screen except Quote Number & Revision are NOT editable in Data Entry screens
  
  Data Entry
  1. When the user visits each section from the wheel for the first time, show that section collapsed (so that only Total line is visible)
     For subsequent visits, show the section how the user left it earlier
     %, Monthly & Yearly columns allow data entry.
     These three columns are inter-dependent as follows:

i.When, % is entered, calculated Yearly (= Annual Gross Pay * % entered / 100) and Monthly (= Annual Gross Pay * % entered / 1200)
ii.When Yearly is entered calculate other two columns accordingly (Monthly = Yearly/12; % = Yearly/Annual Gross Pay * 100)
iii.When Monthly is entered calculate other two columns accordingly (Yearly = Monthly * 12; % = Monthly*12/Annual Gross Pay * 100)

1. When line item rows receive data entry, totals are updated immediately; anything, directly entered into Total row is lost (analysis.buckets[x].totalValues is an empty object)
   Data Entry on the total row of each section itself should be allowed. In this case, all line items become blank to indicate that a value was directly entered into Total line (analysis.buckets[x].lineItems[y].values is empty object for all lineItems)
   Total rows and grand total rows update like a spreadsheet as data entered
   % column on Total rows: Do not calculate this % by adding %s from line items; rather, recalculate this % based on Yearly column on Total rows)
   $ amounts do not allow decimals (no cents)
   % allows/calculates up to 2 digits after decimal

• Information icon (shown in Benefit Plan Sponsorship section on page 6 in PDF) shows contents of “benchmarkData” property for the corresponding line item in the JSON payload
  If benchmarkData is blank in JSON, show only My Notes
  My Notes is a small edit area value of which will come from/go into corresponding property for the line item in JSON (“buckets[x].lineItems[y].myNotes” property)
  Touching Info icon toggles the Benchmark/My notes popup. When popup is open, touching elsewhere closes it
  Sub-Titles:
  1. If buckets.lineItems[i].subTitle = true, it’s a sub-title. See Benefits Management Services, Benefits Products etc on page 6 for example.
     Display subtitles in bold font
     Sub-titles do not have yearly, monthly, % values (note that their values property will be an empty object JSON).
     Nor will sub-titles have info icon
  
  Grand Totals behavior (Grand Totals shown on page 8 in PDF):
  1. Grand Total rows are:

i.Total Overhead Costs
ii.Company’s Comprehensive Service Fee
iii.Total Investments/(Savings)
iv.Investments/(Savings) per Employee
v.Investment/(Savings) per Employee per Diem
vi.One-Time Enrollment Fee

1. None of the Grand Total rows allow data entry
   Data for “Company’s Comprehensive Service Fee” will be provided in JSON property quote.comprehensiveServiceFee JSON property. This property is read-only as far as UI is concerned.
   One-time Enrollment Fee will be available in JSON property quote.enrollmentFee. This is read-only too.
   Total Overhead Costs = Sum(corresponding column from Total rows of 8 sections); e.g. Total Overhead Costs Yearly is sum of yearly column from all 8 total rows. Due to rounding issues, do not add % column. Rather recalculate using Yearly column grand total
   Total Investments/(Savings) = Abs(Total Overhead Costs – Company’s Comprehensive Service Fee)

i.Caption should be “Total Investments” if “Total Overhead Costs” is less than “Company’s Comprehensive Service Fee”; otherwise, it should be “Total Savings”

1. Investment/(Savings) per Employee = Total Investments/(Savings) / Number of Employees

i.Caption should be “Investment per Employee” if “Total Overhead Costs” is less than “Company’s Comprehensive Service Fee”; otherwise, it should be “Savings per Employee”

1. Investment/(Savings) per Employee per Diem = Total Investments/(Savings) / (Number of Employees * 365)

i.Caption should be “Investment per Employee per Diem” if “Total Overhead Costs” is less than “Company’s Comprehensive Service Fee”; otherwise, it should be “Savings per Employee per Diem”
For sample JSON see
GET api/prospects/{id}
PATCH api/prospects/{id}/analysis/{id} – to reset or update based on “op” property
GET api/prospects/{id}/analysis/{id}
 
Stacked Column Chart Screen 1 (tower chart)
 #006595
 #DBEEF4
 #009600
 #F27430
 #E1DDCC
 #FDB414
 #439639
 #952478
 #00ABE8
Colors Used

• Clicking Bulls Eye will take the user to Solution Wheel screen
  Quote Number is editable in this screen
  If Monthly Gross Payroll (prospect.annualGrossPay / 12) is relatively too large compared with other blocks, it is ok to scale it down using the same factor for both left and right towers. For example, monthly gross payroll is 166,667 and taxes are 5,266. If chart is drawn based on actual values, then stacked blocks look too big and too small. So, for the mock UI purposes, we scaled monthly gross payroll by a factor of 20 so that it drops to more comparable 8,333. It is understood that blocks are not to scale.
  Purple Indirect Cost blocks:
  1. Use same size blocks for purple Opportunity Costs, Soft Costs & Liability Costs
     Clicking one of these 3 purple blocks should show a popup containing text from mocks shown on page 10 & 11 in PDF)
     It is okay to use these texts straight-up in the app. These texts will not be served by backend-API.
  
  Left hand side tower percentages are calculated. Right hand side tower percentages are provided in JSON
  Calculation of percentages on the face of blocks on left hand side tower:
  1. All calculations use Monthly figures
     towerBucket property

i.What lineItem goes into which tower block is determined by this property
ii.This property exists at bucket level and lineItem levels
iii.Potential values for towerBucket are: taxes, liability, benefits & admin

1. Grouping of entered values for drawing tower blocks:

i.If values were entered at bucket level (if totalValues is a non-empty object), then use towerBucket value at bucket level for grouping
ii.If values were entered at lineItem level, use the towerBucket value for that lineItem

1. Taxes block % (3.16% shown in mock) = Sum(Yearly where towerBucket=”taxes”)/Annual Gross Pay * 100
   W/C & EPLI block % (0.87% shown in mock) = Sum(Yearly where towerbucket=”liability”)/Annual Gross Pay * 100
   Benefits block % (3.56% shown in mock) = Sum(Yearly where towerbucket=”benefits”)/Annual Gross Pay * 100
   Admin block % (2.65% shown in mock) = Sum(Yearly where towerbucket=”admin”)/Annual Gross Pay * 100

• 10.24% shown in mock to the left of left tower is (Total Overhead Costs / Gross Annual Pay) * 100
  10.94% shown on the face of right tower and right side of right tower is (quote.comprehensiveServiceFee / Gross Annual Pay) * 100
  Enrollment Fee is quote.enrollmentFee
  The light blue block Monthly Svc Fee 10.94% on the right tower is clickable:
  1. If quote.breakdown is a non-empty object
     If clicked, chart with breakdown from page 12 should be shown

Stacked Column Chart Page 12 (4 blocks on right column aka tower)

• Note that this screen is same as Stacked Column Chart Screen 1 except that breakdown of Monthly Svc Fee on right hand side tower is shown to the user (only if quote.breakdown is a non-empty object)
  % values for each block is calculated using corresponding property in quote.breakdown object. For example, Admin % = quote.breakdown.admin / prospect.annualGrossPay * 100
  Note that size of blocks for same towerBucket on both towers should be relative to each other. For example, in the mock UI, Admin block on left tower is smaller compared to Admin block on right tower. In short, blocks are to scale horizontally but not to scale vertically.
  
  
   

Final Submission Guidelines

Architectural/Coding Guidelines

• This application will be hosted under IIS. Include detailed deployment instructions.
  Provide unit tests. This will be one of factors used in winning submission
  Consider using mock back-end (https://docs.angularjs.org/api/ngMockE2E/service/$httpBackend) where appropriate
  Use CSS3 media queries to load different styles; don’t build different pages for different devices
  Provide documentation/comments liberally. This will allow easy integration with backend API and help future developers understand & maintain the code
  If new CSS classes must be defined, please use “custom-“ prefix so that it is easy to identify what classes are introduced in this solution

 

Security Guidelines

While this challenge does not require you to secure the frontend, you’re encouraged to keep in mind that eventually this application will be secured with active directory login.

Branding Guidelines

• All UI elements must follow styleguide provided.

Browser Requirements

• Chrome
  IE11
  Firefox
  Safari on Tablet
  Chrome on Tablet