Challenge Summary
Welcome to "ASoD Economic Calculator App Design Challenge". Application Security on Demand (ASoD) is a service that we offer to our customer and currently, we use a manual excel document as an “Economic calculator” to calculate the economic benefit to our customer.
In this challenge, we need your help to create a simple question-based calculator to replace the manual excel approach into a modern application to show the economic benefits for our client. The application needs to be simple, easy to use, fast, and offer a great focus to the user, and at the same time, it needs to look modern and professional.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Project Description
Application Security on Demand (ASoD) is a service that we offer to our customer and currently, we use a manual excel document as an “Economic calculator” to calculate the economic benefit to our customer.
At the present, during our meeting with potential customer, our sales team will need to enter customer data to an excel file where the data will get processed and it will automatically updated an estimation and show the economy benefit, also based on input data the interactive inputs and reports will be emailed to the client directly from system.
In this challenge, we need your help to create a simple question based calculator to replace the manual excel approach into a modern application to show the economic benefits for our client. The application needs to be simple, easy to use, fast, and offer a great focus to the user, and at the same time, it needs to look modern and professional.
Challenge Goal
Create a new look and feel for our “Economic Calculator” app which basically a simple question-based calculator that able to show the economic benefits to our customer.
User Flow
- Our Account representative staff schedules meeting with a customer
- During the meeting, they will be able to enter customer data into the app
- Once they finish entering the customer data to the app, the information will be automatically updated in chart/graphics and they will be able to see estimations (economy benefit) in the app.
- The Economy Benefit Information then will be shared with customer interactively during inputs and a printed report is emailed to the customer once its finalized.
Design Consideration
- Simple, Clean, Professional, and Modern look and feel.
- Simplicity to add necessary information
- Needs to offer a great focus to the user
- Best Practice for Web-Based App (Desktop)
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
In this challenge, we need your help to create a simple question-based calculator to replace the manual excel approach into a modern application to show the economic benefits for our client. The application needs to be simple, easy to use, fast, and offer a great focus to the user, and at the same time, it needs to look modern and professional.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback
01) Login screen
02) Dashboard Screen (User)
03) Economic Calculator Screen (User)
04) Report Screen
05) Admins Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates
01) Login screen
02) Dashboard Screen (User)
03) Economic Calculator Screen (User)
04) Report Screen
05) Admins Screen
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Project Description
Application Security on Demand (ASoD) is a service that we offer to our customer and currently, we use a manual excel document as an “Economic calculator” to calculate the economic benefit to our customer.
At the present, during our meeting with potential customer, our sales team will need to enter customer data to an excel file where the data will get processed and it will automatically updated an estimation and show the economy benefit, also based on input data the interactive inputs and reports will be emailed to the client directly from system.
In this challenge, we need your help to create a simple question based calculator to replace the manual excel approach into a modern application to show the economic benefits for our client. The application needs to be simple, easy to use, fast, and offer a great focus to the user, and at the same time, it needs to look modern and professional.
Challenge Goal
Create a new look and feel for our “Economic Calculator” app which basically a simple question-based calculator that able to show the economic benefits to our customer.
User Flow
- Our Account representative staff schedules meeting with a customer
- During the meeting, they will be able to enter customer data into the app
- Once they finish entering the customer data to the app, the information will be automatically updated in chart/graphics and they will be able to see estimations (economy benefit) in the app.
- The Economy Benefit Information then will be shared with customer interactively during inputs and a printed report is emailed to the customer once its finalized.
Design Consideration
- Simple, Clean, Professional, and Modern look and feel.
- Simplicity to add necessary information
- Needs to offer a great focus to the user
- Best Practice for Web-Based App (Desktop)
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Login screen
- Provide ordinary login form for the user (username, password, forgot password, submit button, etc)
- Need to have an error scenario where user fails to log in to the app
- There will be 2 kinds of users that use the application (Normal User, Admin), depending on the account validation in the back end, if it successful, they will be redirected to their own dashboard
02) Dashboard Screen (User)
- Default screen that will appear once the user successfully logged into the app
- Show user recent log activity, for example, list of the recent economy calculator usage by the user, list of report download, list of activity with the customer, etc
- Need to provide navigation (can be main menu list, button, link) to go to the Economic Calculator screen and explore other features in the app
03) Economic Calculator Screen (User)
- During the meeting with potential customer, our staff (user) will ask for data input from the customer based on questions provided in this screen and they will enter all the customer answer to this “Economic Calculator” to get the economic benefits information.
- This Economic Calculator screen will provide all the necessary questions to the app user
- All questions in this Economic Calculator can be change and editable by the administrator. This includes the headers for text fields etc. The user will only able to fill in the questions answer (not able to edit the questions)
- The user will be able to see the Default answer values and they can edit the value.
- The scoring for Risk Factor and Risk Tolerance should include possible inclusion for scoring for every question, in the current excel doc, not all contribute to those scores, but they may be added as we mature the tool.
- Will need a method to save individual models per client to retrieve later, this function is not available in the excel spreadsheet right now, you need to create it.
- Please make sure to explore and inspect the excel document (ASoD Economic Impact Model V2.1 Working Prototype - 100218.xlsm) and the flow document (Requirement_Flow_Clarifications.pptx) to understand more about how the Economic Calculator works
- There are several tabs available in the excel document, please see below for more information about each tabs purpose:
-- Sheet 1 (out of scope)
-- Input Form (this contains the data that needs to be asked to the customer. Based on that, the value/output would be given)
-- Data (possible values for the all the questions and the data page need input screen from the admin)
-- Defaults (default value for the questions)
-- Action Items (out of scope)
-- Planning (out of scope)
- All the logic and formulas to count the “Economic Benefit” are available in the excel document under these 3 tabs (Input Form, Data, and Defaults). We need to convert this excel into a web application. Currently, in the excel doc, the master data (Data and Defaults tab) can be editable by everyone. In this web application, the master data which are essential to show the benefits would be entered and managed by the admin in the system.
- The “Economic Benefit” model result can be presented with any graphical presentation that you think will suitable for the app (doesn’t need to follow the excel docs). The model result, once it’s finalized, can be saved and generated to another file format (PDF, XLS, CSV, etc) and it can be shared/send to the potential customer. Whatever available in the input form tab is called model..Hence, when user wants to see the saved model, the user should be able to see the model.
- We need to add the tips in the input form screen itself. Needs to be able to explain all functionality, models available in the app.
04) Report Screen
- We need to have a report screens where the user can generate any reports needed from the application.
- The user will need to have the ability to generate the report based on several types, individual customer, groups of customers, based on time/period, based on the type of model, etc.
- Need to know how many Economy Benefit models were built, how many were completed, how many were abandoned before completion.
- Need to have an ability to generate report to several format (xls, pdf, csv, etc) that represents data on the screen that is downloaded and emailed to the client by the user.
05) Admins Screen
- We need to have an admin area where we can manage all application features
- Admins (small group) will have full functionality to update admin pages and all data elements
- We will need an admin interface to update all fields on the “Economic Calculator” screen because those fields will change over time, these will not be visible (except default values) to the common user. Admin will need to have the ability to add additional questions over time as necessary. They also can modify, delete, any questions from the “Economic Calculator”.
- Admin will need a screen/section Area where they can manage the application user
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to the Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Branding Guidelines
- Follow Our Branding Guidelines Document
Documentation
- Branding Guidelines Doc
- ASoD Economic Impact Model V2.1 Working Prototype - 100218.xlsm (The existing manual Economic Calculator)
- Requirement_Flow_Clarifications.pptx
Target Devices
- Web-Based Application
- Desktop: 1366px Width with Height adjusted accordingly
Target Audiences
- Sales, Account, Solutioning and field teams
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Submit JPG/PNG image files based on the Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (might need to convert it to photoshop later), XD or Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colours.
Please read the challenge specification carefully 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 Studio Admins in the forums. Please post any questions you might have for the client in the forums.