Talaria Forecasting Web App UI Prototype Code Challenge

CHALLENGE OBJECTIVES

APP ENVIRONMENT:

• Angular

BASIC REQUIREMENTS FOR THIS CHALLENGE:

• Build UI Prototype based on provided storyboard design with a focus on Desktop screen
• Need to create and load data using embedded JSON files
• Need to be easy to swap with actual API for the next development

PROJECT BACKGROUND
Talaria providers sell products such as broadband and mobile phone contracts. These     contracts consist of products of different types and capabilities, which are outlined below:

• Mobile
• Broadband

These products are sold in different markets, such as Consumer and Small-Medium Enterprises (SMEs).

For each of the products the customer would like to forecast the following:

• Volume base (opening base and closing base) – the total number of subscribers / connections at a point in time
• Gross adds – the number of new subscribers / connections during a period
• Churn – the number of subscribers / connections which terminated service with the provider during that period
• Net migration – the number of subscribers / connections which remained with the provider but moved to another product
• Average revenue per customer/connection (ARPU)
• Revenue
• Re-grades/upsell

The wireframes consist of the following pages:

• Forecast - this is the forecast generated by the model
• Re-forecasting - on this page the user can adjust the forecast parameters to generate new forecasts. Forecasts can be saved as different versions
• My Favorites - the user can save their favorite forecasts
• Forecasts - version management of the forecasts

TECHNOLOGY STACK

• Angular
• HTML
• CSS
• Javascript
• JSON

DEPLOYMENT ENVIRONMENT REQUIREMENTS

• localhost
• any live site

CHALLENGE ASSETS:
Gdrive: https://drive.google.com/drive/folders/1C4HN9QbqXHNg7jOjW_b7XRL1pUjhdReE?usp=sharing
Zeplin: https://zpl.io/bL5Px8Q
Note: Request the Zeplin access on challenge forum

GENERAL REQUIREMENTS

• Use the latest version of Angular framework
• Build UI Prototype based on the provided storyboard using best Responsive practices. You only need to focus on Desktop screen size, but your submission need able to expand when we support tablet and phone screens on the future updates
• Create make sense flow to simulate the chatbot interaction
• Data for each page is loaded from the JSON files.
• We need to make the JSON structure possible to swap on the next development.
• AngularJS codes written to be modular and should contain necessary factory/service methods to ensure code design & best practices.
• Requests parameters to be encapsulated as object rather than individual parameters.
• Need support unit testing on your Angular submission

GENERAL LAYOUT REQUIREMENTS

• The provided storyboard is using 3840px on retina size, that’s mean 1920px on standard size
• For this challenge submission, your submission need support 1366px as the minimum width. Make all element use fluid width
• In all the sections the background will cover the browser screen, while the main content area is centered.
• Header
  • Header need to use fluid width and need use fixed placement when user scrolling the page
  • Logo placed on the left and take user to Forecast list page
  • Main navigation need to be centered
  • Notice there’s a dot indicator on some menu
  • Need set active/inactive state for current page
  • Search button can be dead link
  • User profile need show the menu option, put dummy option. Re-use existing dropdown style
  • Also, there’s there’s dot indicator above user thumbnail
  • Action bar placed below the header bar. This area also need use fixed placement
  • Click menu button need display the flyout option (Screenshot: 11 Forecast Menu@2x.png)
  • Checked on and off need show / hide the related box on main content area
  • User can change the Forecast Version on the dropdown
  • Lock version should not clickable and just label
  • Tab navigation need to be centered and able to change the data based on Brand, Product and Market. (Screenshot: 09 My Favorite@2x.png & Screenshot: 10 Forecast Product@2x.png)
  • Talaria Group & Broadband using dropdown
  • Data range in date picker should be able to change the following range depending on whether Monthly, Quarterly or Annually is chosen:
  • Monthly: month, year to month, year. E.g. May, 2018 - May, 2019 (01.a Forecast Brand_Monthly@2x.png)
  • Quarterly: quarter, year to quarter, year. E.g. Q1 2018 - to Q3 2019 (Screenshot: 12 Re-Forecasting@2x.png)
  • Annually: financial year to financial year. E.g. 2018 - 2019 (Screenshot: 13 Forecasts@2x.png)
  • Suggest open source library to build this different date range picker
  • Each different option need show different datepicker selection
  • Change date range need displayed reflected on charts
• Main Content Area
  • Main content area need scrolling along the page
  • All boxes must use 2 columns layout & need use the fluid width
  • Need support drag and drop for each boxes
  • Read details description below for charts requirements

INDIVIDUAL REQUIREMENTS
1). Login
Screenshot: 00.A login@2x.png

• This is login page look
• Put dead link if screens not found on current storyboard
• On user focus need highlight the input to use light blue color on the border (Screenshot: 00.B login - focus@2x.png)
• Password field need allow user to see the hidden text (Screenshot: 00.C login - password@2x.png)
• Follow error validation style for both username and password fields (Screenshot: 00.D login - failed@2x.png)
• Click Login now need take user to Forecast screen as explained below

2). Forecast
Screenshot: 02 Forecast Brand_Select KPI Factor@2x.png

• This is Forecast page
• Show page breadcrumbs on top left.
• All Chart design should be feasible to build. You can use D3.js or come up with your solution. Need make sure the chart library is open-source.
• Need able to select data by Monthly, Quarterly, Annual. This will change the number of bar being displayed in related chart
• Each chart need to have action buttons placed on top right on current storyboard
• Select KPI Factor is dropdown, need able to scroll. User can select more than 1 options to select then load on the bottom area of KPI Factor
• Button to download the forecast need able to download as CSV, Excel and XML (Screenshot: 03 Forecast Brand_Download Data@2x.png)
• User can hide the KPI Factor by click on KPI button (Screenshot: 04 Forecast Brand_Hide KPI@2x.png)
• This when click full-screen view, bex need using 1 column that fill the space (Screenshot: 05 Forecast Brand_Expand Window@2x.png)
• Setting button can be dead link
• Chart needs to clearly show today indicator line
• Chart needs to have a line (or some other indicating) showing that the forecast starts from a particular point in time
• Need able to hover on each bar. Follow design reference here (Screenshot: 06 Forecast Brand_Hover Item@2x.png)
• Need able to drag the box by clicking the drag icon (Screenshot: 07 Forecast Brand_Drag and Drop@2x.png)
• Notice there’s tooltip showing up on center area with Drag and Drop text
• Click Favorite button need show the message and add related box to Favorite page (Screenshot: 08 Forecast Brand_Add to My Favorite@2x.png)
• Create different chart type as per wireframe: stacking bar, stacking bar with negative area, line chart
• As possible you need to build the chart as close as possible with storyboard look.
• Match the color usage on each chart
• Match all elements need displayed on each chart: legends, today line, hover, line indicator, x-axis, y-axis
• Let us know if you have some questions related to the expected charts.

3). My Favorites
Screenshot: 09 My Favorite@2x.png

• This My Favorites page
• Need allow users to save or remove favorite forecast

3). Re-forecasting
Screenshot: 12 Re-Forecasting@2x.png

• This is re-forecasting page
• Filters show when user on re-forecasting page
• Match all required filters
• Need support sub-options for the filters
• Need able to save the new version. You can see link for Save new version next to Forecast version dropdown
• On the right side of each chart, KPI drivers need able to slide to change the value
• Match design like storyboard
• Click reset button need change to default value
• We need show different type of chart on this page that represent the new and old values
• See slight different opacity on each bar and line chart for the new and old values

4). Forecasts
Screenshot: 13 Forecasts@2x.png

• User access this page from Forecasts menu
• This page needs to display list of forecasts
• Match all column content
• Need to support sub-rows
• Need able to drag and drop the table row
• Need able to expand and collapse the table row
• Need support table sort by clicking the table header
• Load more button need load more table rows
• Click on the 3dots menu on the right side need load some options

CODE REQUIREMENTS:
HTML/HTML5

• Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• All HTML code naming should not have any conflicts or errors.
• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• No inline CSS styles- all styles must be placed in an external stylesheet.
• Validate your code- reviewers may accept minor validation errors, but please comment on your reason for any validation errors. Use the validators listed in the scorecard.

CSS3

• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all CSS so developers can follow the code.
• All CSS naming should not have any conflicts.
• As possible use CSS3 style when creating all styling.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.

Javascript

• You must using Typescript (.ts) file format
• Use Linter, Jest and other best practice library to maintain your code quality.
• Your submission must follow Angular Coding guidelines
• Put clear comment/documentation for all AngularJS components
• All JavaScript must not have a copyright by a third party.
• It is fine to use GPL/MIT/Open Source code.
• You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

Images

• Images should be properly compressed while still having good visual quality.
• Please use best practice repetition usage of background based image.
• Please use sprites when using icons for your submission.
• Make sure your submission look sharp for Retina and Standard devices
• Wherever it makes sense, you can use icon fonts instead of images.

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

• IE11,  
• Edge,
• Chrome,
• Safari,
• Firefox

Final Submission Guidelines

What To Submit?

• Create clear documentation about how to set up your submission locally and live site
• Upload your submission to Heroku for client review, Include the link on your README.md