Challenge Overview
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.
Please read the challenge specification carefully, visit forum for additional docs and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or co-ordinators in the forums. Please post any questions you might have for the client in the forums.
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)- 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- 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:
- Name of prospect
Training and Development
Benefits Plan Sponsorship
Employer Liability Management
Business Services
Government Compliance
Employment Administration & Payroll
Recruiting & Outplacement Support
- 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.
#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:- “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:- Sends PUT method on analysis resource providing all details of the analysis
- “This will erase all values entered manually. Data imported from external systems will remain intact. Are you sure?”
- 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- Same as Solution Wheel Screen except Quote Number & Revision are NOT editable in Data Entry screens
Data Entry- 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:
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)
- 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:- 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):- Grand Total rows are:
- If buckets.lineItems[i].subTitle = true, it’s a sub-title. See Benefits Management Services, Benefits Products etc on page 6 for example.
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
- 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)
- Investment/(Savings) per Employee = Total Investments/(Savings) / Number of Employees
- Investment/(Savings) per Employee per Diem = Total Investments/(Savings) / (Number of Employees * 365)
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:- 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:- All calculations use Monthly figures
towerBucket property
- Use same size blocks for purple Opportunity Costs, Soft Costs & Liability Costs
ii.This property exists at bucket level and lineItem levels
iii.Potential values for towerBucket are: taxes, liability, benefits & admin
- Grouping of entered values for drawing tower blocks:
ii.If values were entered at lineItem level, use the towerBucket value for that lineItem
- 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:- If quote.breakdown is a non-empty object
If clicked, chart with breakdown from page 12 should be shown
- If quote.breakdown is a non-empty object
- 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