Talaria Forecasting Web App Design Challenge

Challenge Objectives

• Design Talaria Forecasting web app based on the provided wireframe
• Responsive web app

Round 1

Submit your initial Checkpoint Submission that covers these screens/features:

1. Forecast
2. My Favorites
3. Forecasts List

Round 2

Submit your Final Submission that covers these screens/features:

1. Forecast
2. Re-forecasting
3. My Favorites
4. Forecasts List

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 migrations – 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

Workflow
Please make sure your design incorporates this workflow.

• Step 1
  • The user launches the web app
• Step 2
  • The app shows the Forecast page
• Step 3
  • User toggles by Brand, Product and Market on Forecast page
• Step 4
  • The user selects KPI factors and selects which Forecast graphs they’d like to see
• Step 5
  • The user downloads the Forecast as Excel
• Step 6
  • In Re-forecasting tab the user modifies some filters on sidebar and re-render the forecast. They save the Forecast as a new forecast.
• Step 7
  • On the Forecasts page they open a saved Forecast
• Step 8
  • User is able to see their favorites forecast from My Favorites menu

Users/Roles
Please make sure your design supports the following roles.
Standard User: Can access all pages. Login not required.

Screens/Features
Please make sure your design includes the following screens:

1). Forecast
https://marvelapp.com/hib0gee/screen/57519097

• App must have a central dashboard where users can access forecast
• Need to allow changing forecast history
• Show page breadcrumb
• Lock version of forecast
• Need able to change data displayed by Brand, Product and Market
• Two Dropdown filters placed next to forecast type
• Need to allow user to change the date range
• Data range in date picker should be one of the following depending on whether Monthly, Quarterly or Annually is chosen:
  • Monthly: month, year to month, year. E.g. May, 2018 - May, 2019
  • Quarterly: quarter, year to quarter, year. E.g. Q1 2018 - to Q3 2019
  • Annually: financial year to financial year. E.g. 2018 - 2019
• Chart design should be feasible to build
• Need able to select data by Monthly, Quarterly, Annual
• Each chart need have action buttons placed on top right on current wireframe
• Favorite button to save the forecast to My Favorite page
• Button next to Favorite is for full-screen view. Create separate screen on your submission
• Button to download the forecast
• Setting button to allow user to show/hide which chart needs to be displayed
• 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
• KPI Factors placed on the right side
• Create different chart type as per wireframe: stacking bar, stacking bar with negative area, line chart
• Need able to hover on each chart

2). Re-forecasting
https://marvelapp.com/hib0gee/screen/57519309

• Filters show when user on re-forecasting page
• Match all required filters
• Need support sub-options for the filters
• Notice on KPI Drivers, need able to change the values
• Need able to save the new version

3). My Favorites
https://marvelapp.com/hib0gee/screen/57519151

• Allow users to save favorite forecasts
• Display up and Down arrow to expand/collapse each chart

4). Forecasts List
https://marvelapp.com/hib0gee/screen/57524230

• We need your help with how this page should be integrated with current app
• This page needs to display list of forecasts
• Match all column content
• Need to support sub-rows
• Need to be able to drag and drop the table row

Form Factors
Please make sure your design supports these form factors:

• In-scope
  • Desktop: 1366px(w) x Height (at the designers discretion)
  • Need above the fold, without user needing to scroll
• Out of scope
  • Mobile and Tablet

Branding Guidelines
Branding guidelines will be shared in the forum

Design Assets
Wireframes: https://marvelapp.com/hib0gee/screen/57519103
Password will be shared in the forum

Judging Criteria
Your submission will be judged on the following criterias:
- Overall design of the Talaria Application
- User Experience and how well you design the page
- Exploration of page flow and user interface of the application

Final Deliverables
All original source files.
Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file or Sketch or Adobe XD

Marvel Prototype
We need you to upload your screens to Marvel App.
Please send your marvel app request to lunarkid@copilots.topcoder.com
You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).