Challenge Overview
Welcome to Miliu Ionic Framework Application Code Challenge
In this challenge, we are looking for your help to create Mobile Ionic application based on the provided storyboard using Ionic v1 + AngularJS v1 framework.
As part of this challenge we need you to create documentation of your Ionic application, we are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development.
Good luck and Let us know any questions you have!
General Tasks
- The primary app platform should be Android.
- The app should be a hybrid app developed using Ionic version1, and compatible version of Cordova. Note that AngularJS version1 is used with Ionic 1.
- Please note: the build has to be cordova compatible.
- Use AngularJS 1 Styleguide when build this submission to maintain your code quality
- App must be responsive. It should render nicely on devices of all sizes, resolutions and form factors.
- Instead of using Custom CSS, a standard CSS library must be used.
- Source code of all technical artefacts must be submitted. It includes the following:
- .html files- HTML5 should be used and not the earlier versions of HTML.
- JavaScript files (.js files)
- 3rd Party js libraries
- Standard CSS libraries (like ionic CSS, Bootstrap) used
- Charting libraries used
- Static images (Gif, PNG, JPEG)
- Animated images (if any)
- Custom CSS file, Custom CSS must not compromise responsiveness of the app. CSS version should be CSS3.
- Icons must render distortion free on all device sizes. This can be achieved by using Vector Images or glyph icons similar to what is available on http://fontawesome.io/
- Some icon libraries require attributions to be made. Care should be taken that no such libraries are used (which need attributions). If Vector Images or glyph icons are created by the prototype developers, they should be provided with source code. Icons must not be stolen ones.
- AngularJS code must be well kept in appropriate set of controllers, services and custom-directives
- The prototype must assume that data in actual application is fetched from server as JSON responses from REST APIs calls. In prototype app the JSON responses can be hardcoded.
- Any Cordova Plugins code used in the prototype must also be delivered
- Form validation should be done using standard form validation techniques of AngularJS
-- Have a standard design for informational and error popups.
-- Arrive at a standard way to show form validation errors.
- The solution source code must include a detailed ReadMe file mentioning steps required to compile, build and generate APKs.
Screen Requirements:
- Storyboard Design: https://drive.google.com/open?id=1BqZmg_FKUCBByPPdE-Bbw6etWRcHZXut
- We need below pages to be put together, take a look at the flow - let us know if you have any questions.
1). Splash Screen
Screenshot: A01_0-Splash-Screen.gif
- This is the splash screen of the application. This is displayed when the user opens the application.
2). Navigation
Screenshot: A02_0-Navigation.gif
- When the user taps on the burger menu, he/she will be able to see the following:
1. Name and picture of the customer
2. Home button
3. Money Management
4. Money Movement
5. Fund My Purchases
6. Notifications – with a batch for number of unviewed notifications
7. Talk to miliu
8. Settings
9. Logout
- This menu will be extended if required as we add scenarios.
3). Money Management
Screenshot: A03_0-Money-Management-Landing.gif
- When the user taps on money management in menu this screen would appear.
Functional:
- My budget
- My goals
- My dashboard
Non Functional:
- My Advice
- My Spend
- My Growth
- My Borrowings
- My Protection
The budget amount left for this month will also be displayed.
Screenshot: A03_1-Money-Management-Landing.gif
- The user should be able to reorganize the money management grid by long pressing a cell
and repositioning it.
- Once the user has repositioned the grid cells, the app should remember the new positions
and display the same every time the user comes to this screen until the user changes it
again.
4). Money Management Dashboard
Screenshot: A04_0-Money-Management-Dashboard.gif
- The spend dashboard will be accessible from the following:
1. It will be the landing screen when the customer logs in
2. Tapping Home in the burger menu
3. My Dashboards in Money Management Grid
- This is the view when the customer’s budget has not been set.
- It will have a message “Set up your budget to get a budget summary view here.” to indicate that the customer’s budget has not been set. It will have a button to set the budget and to view transactions.
- Tapping on “Set My Budget” will take the user to set budget screen.
- This dashboard will show all the checking accounts and credit cards of the user. This will include miliu and linked non miliu accounts. It will display the nickname of the account, masked account number (xxxxnnnn), bank logo and the associated amount (account balance in case of checking account and outstanding amount in case of credit card).
- In case of more than 2 products, the section of the screen should be scrollable horizontally and should have indicator to show the same (e.g. three dots below the product cards).
-- My Current spend: Total amount spent by the customer in the current month. This includes expenditure done on the linked external accounts as well.
-- Typical Spend: Typical monthly expenditure of the customer – average of the last six months’ expenditure. This will not include the current month.
- There is an icon for view transactions in my current spend card. Tapping on the control should take the user to Transactions” screen.
Screenshot: A04_1-Money-Management-Dashboard.gif
- When the budget has been set by the user, this screen will display the budget amount and
the remaining budget amount.
Battery:
- Within budget – expenditure is less than 100% of the budget. The percentage of budget remaining should be displayed in the battery, the colored portion should correspond to this percentage and should be displayed in blue.
- Over budget – expenditure has exceeded the budget. The over budget percentage should be displayed in the battery, the full battery should be colored and should be displayed in white – to indicate that full budget has been exhausted.
- In case of over budget, the remaining budget label should change to “Over Budget By” and should display the difference between the budget and the spend.
- Tapping on the budget section (My Budget, Remaining Budget and/or battery) should take the user to the my budget screen.
Screenshot: A04_2-Money-Management-Dashboard.gif
- Budget prediction – In case the bank predicts that the user will go out of budget, the battery color should change to red.
- Tapping on the button “Tell me why?” will display the reason why the bank thinks that the user will go out of budget this month.
Screenshot: A04_3-Money-Management-Dashboard.gif
- This is when the user has exceeded the budget
Screenshot: A04_7-Money-Management-Dashboard.gif
- Tapping on the “Tell me why?” control displayed when the bank predicts that the customer will go out of budget will display the why am I red screen.
- This will give the reason along with the top 3 largest spend transactions based on amount for the current month.
- It will display the date, category icon, category name, description and amount.
- Note: All debit amounts are displayed in red.
5). My Budget Summary
Screenshot: A05_0-My-Budget-Summary.gif
- This is the My Budget screen/budget dashboard. This screen accessible from the following:
1. My Budget in Money Management Grid (if the budget is already set)
2. Setting and submitting the budget (manually or recommended)
3. Tapping on the budget section in the spend dashboard
- Back button will take the user to where this screen was invoked from.
- Please place the back button before the menu button on the top left as a back arrow. The
design is not consistent on this.
- “Set Alert” control will take the user to the set alert screen.
My Income:
This will show the actual data. It will display the following:
- My Income – total income received tis month
- Income category
- Actual amounts
My Spend
- Total spend budget and total spend ($4,500 of $5,000 used)
- Category icon
- Category name
- Category budget and category spend
-- $100 or $150 spent
-- incase of over spend $200 of $150 spend with $50 over on the bottom
Percentage consumption
- Top 2 categories (by budget value) will be displayed
- The rest of the categories can be viewed by expanding the screen, i.e. by tapping on
“View +6 categories”. The number will depend on the additional categories available to
be viewed.
My Borrowings and My Protection should follow the same design and logic as my Spend.
My Growth:
- It should display Total growth budget and total actual growth ($2,500 or $5,000 saved)
- It should show a line graph for the month
- The x axis should have the dates and the y axis should have the percentage.
- The graph will display the percentage of the budgeted amount that has been saved/invested.
- All the growth categories can be viewed by expanding the screen, i.e. by tapping on
“View +6 categories” (similar to my spend). The number will depend on the additional categories available to be viewed.
Color coding (Applicable only to My Spend categories)
80% green
80-100% - yellow
Above 100% - red
For the rest of the budget heads it will be always green.
My Spend: $300 of $500 used
My Borrowings: $300 of $500 paid
My Protection: $300 of $500 paid
My Growth: $300 of $500 saved
6). Set Alert
Screenshot: A05_1-Set-Alert.gif
Screenshot: A05_2-Set-Alert.gif
Screenshot: A05_3-Set-Alert.gif
Alerts can be set for:
1. Overall budget
2. Specific budget head
3. Certain category of a budget head.
Values for select budget head are:
- Overall
- My Income
- My Spend
- My Borrowings
- My Growth
- My Protection
- The categories list will be created on the basis of what the customer has selected as the budget head. It will also have a option for consolidated that means the alert is being set for the selected budget head and not just for a category within the selected budget head. In case “Overall” is selected in the budget head field, then the select category field will be disabled.
- The percentage field will be blank. The user can fill in any value (between 1 -200) here.
- Please note: As and when required, we will add more types of alerts other than budget alerts.
7). Goals
Screenshot: A06_0-Goals.gif
- This is the My Goals screen. This screen accessible from the following:
1. My Goals in Money Management Grid (if even one goal has been set)
2. Setting and submitting the goal
- Back button will take the user to where this screen was invoked from.
- Please place the back button before the menu button on the top left as a back arrow. The design is not consistent on this.
- The customer can add a new goal, add additional funds to the goal, share the goal on Facebook and transfer money to the funding account and close the goal.
Note: The goals that have been fulfilled 100% will also be displayed here until the user
transfers the money and closes the goal.
Each goal will have:
- Goal icon
- Goal Name
- Goal maturity amount
- Goal maturity date
- Saved percentage
- Saved amount
- Tapping on a goal will take the user to goal details screen.
- + button at the bottom will open the set goal screen (missing in the design)
Screenshot: A06_1-Goals.gif
Tapping on the right hand side control against each goal will display 3 options:
1. Add funds
2. Transfer & Close
3. Share on Facebook
8). Set Goal
Screenshot: A07_0-Set-Goal.gif
The customer will come to this screen when he/she:
- Selects yes on the set goal screen when no goals have been set
- Chooses to add additional goal from my goals screen
- wants to add a goal to his/her growth budget and chooses to add a goal on select goals screen in my budget module
- Monthly contribution is calculated dynamically by the application. Calculation: Goal amount/number of contributions. Monthly contribution field is non editable.
- Number of contributions is the number of months between start month and target completion month.
- The start date is the first of the next month – filled automatically but editable. Hence, if the user is setting the goal on 1st of the month, system suggested start date will be the 1st of the
next month. The user can tap on the field and edit it to any future date including today.
- Funding account will be filled with his default checking account number. If he wants to edit this, he will get a list to select from. The list will have all his miliu checking accounts.
- Target completion can be selected from a month/year picker.
- Select Category will display the list of spend categories. The user can select one of the categories. Corresponding icon will also be displayed with the category.
- The goal name selected by the user will be the nickname of the savings account that is created for this goal.
9). Transaction Total Spend
Screenshot: A08_0-Transaction-Summary.gif
- The customer will come to this screen when he/she selects view transactions control on the spend dashboard
- Name of the screen should be “My Transactions”
The screen will have the following:
- Total spend: Total amount spent on spend categories in the current month
- Total income: Total income in the current month
- Pie chart – with the percentages of different categories amount of the selected type of transactions (Total income or total spend)
- Date range – Beginning of the current month to current date by default
- Category names – Only those categories that have at least one transaction will be displayed
- Percentage – The percentage breakup of the amount with respect to the total amount
- Amount – Total amount spent on a category
- This view shows “Total Spend” as selected. This will be selected by default when the user comes to this screen. The user can tap on “Total Income” to get the income view. Refer to the next screen for this view.
- Sorting can be done by category or by amount.
- Missing: Back button will take the user to where this screen was invoked from.
- Please place the back button before the menu button on the top left as a back arrow. The design is not consistent on this.
Other controls:
- Tapping on a category row: Refer to (Screenshot: A08_1-Transaction-Summary.gif)
- Swiping the screen left: Refer to (Screenshot: A08_4_4-Transaction-Summary.gif)
- Tapping on the pie chart: Refer to (Screenshot: A08_5-Transaction-Summary.gif, Screenshot: A08_6-Transaction-Summary.gif & Screenshot: A08_7-Transaction-Summary.gif)
- Tapping on the filter icon on the top right: Refer to (Screenshot: A08_2_1-Transaction-Summary.gif, Screenshot: A08_2_2-Transaction-Summary.gif & Screenshot: A08_3-Transaction-Summary.gif)
- Tapping on the calendar icon on the top right: Refer to (Screenshot: A08_10-Transaction-Summary.gif & Screenshot: A08_11-Transaction-Summary.gif)
10). Transaction Total Income
Screenshot: A08_4_2-Transaction-Summary.gif
- The customer will come to this screen when he/she selects view transactions control on the spend dashboard
The screen will have the following:
- Total spend: Total amount spent on spend categories in the current month
- Total income: Total income in the current month
- Pie chart – with the percentages of different categories amount of the selected type of transactions (Total income or total spend)
- Date range – Beginning of the current month to current date by default
- Category names – Only those categories that have at least one transaction will be displayed
- Percentage – The percentage breakup of the amount with respect to the total amount
- Amount – Total amount spent on a category
- This view shows “Total Income” as selected.
- Sorting can be done by category or by amount.
11). Transaction Select Category
Screenshot: A08_1-Transaction-Summary.gif
- The customer will come to this screen when he/she taps on a category row.
- The category row will get expanded and the user will see the latest 3 transactions with an option to view more transactions for this category.
- The user will have an option to close this view. Closing the view will collapse the expanded category.
- Tapping on view more transactions will take the user to a new screen with all the transactions for the selected category for the selected period.
12). Transaction List
Screenshot: A08_4_3-Transaction-Summary.gif
- The customer will come to this screen when he/she swipes the my transactions screen to the left
The screen will have the following:
- Total spend: Total amount spent on spend categories in the current month. This will also be a control to select or deselect spend transactions for the list view.
- Total income: Total income in the current month. This will also be a control to select or deselect income transactions for the list view.
- List of transactions sorted by date – Both income and spend transactions will be displayed by default. The user should be able to deselect one of the category heads to see only the income or spend transactions.
- Each transaction will have:
- Category indicator
- Category name
- Description
- Amount
- The spend transactions amounts will be displayed in red and the income transactions amount will be displayed in blue.
- The user should be able to swipe right to get the pie chart view screen.
- The user should be able to swipe left on a transaction row to get 2 options: Retag and Details.
- The behavior of the other control will remain the same.
Screenshot: A08_4_4-Transaction-Summary.gif
- The user should be able to swipe left on a transaction row to get 2 options: Retag and Details.
12). My Spend View
Screenshot: A08_5-Transaction-Summary.gif
- The customer will come to this screen when he/she taps on the pie chart when total spend is selected in the pie chart screen.
The screen will have the following:
- Total spend: Total amount spent on spend categories in the current month
- Name of the category
- Icon of the category
- Percentage of the amount spend on this category with respect to the total spend
- Total amount spend on the category
- The categories will have visual indicators to show the spend size of the category.
- Only those categories will be displayed here that have atleast one transaction for the selected period.
- The default selected period will be carried forward from the my transactions screen. Swiping left will take the user to the next screen.
13). My Spend View - Bar Graph
Screenshot: A08_6-Transaction-Summary.gif
- The customer will come to this screen when he/she swipes left on the previous screen.
The screen will have the following:
- Total spend: Total amount spent on spend categories in the current month
- Names and icons of the categories as index.
- Bar graph (date wise) showing the last 7 days including today.
- The bar graph will have the break up of transactions by category and will display the total amount spend on a particular date.
- Only those categories will be displayed here that have atleast one transaction for the selected period.
- The default selected period will be carried forward from the my transactions screen. Swiping right will take the user to the previous screen.
- Scrolling right or left on the graph will display the previous days and the corresponding data. The user should not be able to scroll beyond the current date and earlier than the rate range selected for the screen.
13). My Income
Screenshot: A08_7-Transaction-Summary.gif
- This is the bar graph representation with income was selected in the my transactions screen.
- Scrolling right or left on the graph will display the previous days and the corresponding data. The user should not be able to scroll beyond the current date and earlier than the rate range selected for the screen.
14). Filter Transaction
Screenshot: A08_9-Transaction-Summary.gif
Screenshot: A08_2_1-Transaction-Summary.gif
- The customer will come to this screen when he/she taps on the filter icon on the top right of the my transactions screen.
The screen will have the following:
- Account: Control to select the account for which the user wants to see the transactions. All accounts will be selected by default. Use can choose to select any one of the spend accounts from this list. This list will have all the miliu and non miliu linked checking accounts and credit cards.
- Period of time: This month will be selected by default. Refer to the next screen for the view of this list.
- Tapping on apply will apply the filtering options and will display the my transactions screen with the appropriate data for the selected account and or period.
15). Select Period
Screenshot: A08_2_2-Transaction-Summary.gif
- The customer will come to this screen when he/she chooses to change the period of time for transactions view.
The system will display the following options:
- This Month (selected by default)
- Last Month
- This Quarter
- Last Quarter
- This Year
- Last Year
- Custom
- Tapping on custom will take the user to the next screen.
16). Select Custom Period
Screenshot: A08_3-Transaction-Summary.gif
- The customer will come to this screen when he/she chooses custom from select period list.
The system will display the following options:
- Start Date
- End Date
- Control to select the date from
- Control to cancel the date selection view
- Control to set the custom view
- The user will select the start date first. The system will take him to the correct field to select the end date once he/she has selected the start date.
17). Transactions – Calendar View
Screenshot: A08_10-Transaction-Summary.gif
- The customer will come to this screen when he/she taps on the calendar icon on the top right on the my transactions screen.
- Screen name should be the name of the month and year
The screen will have the following:
- Total spend: Total amount spent on spend categories in the current month. This will also be a control to select or deselect spend transactions for the list view.
- Total income: Total income in the current month. This will also be a control to select or deselect income transactions for the list view.
- Calendar view of the current month. User should be able to swipe up and down to see the previous and next months. The current month will be selected by default.
- Total spend and total income for each date.
- The spend transactions amounts will be displayed in red and the income transactions amount will be displayed in blue.
- User can tap on a date with atleast one transaction value to see the details.
- User can scroll up or down to other months and get the correct transaction view for the same.
18). Transactions – Calendar View Details
Screenshot: A08_11-Transaction-Summary.gif
- The customer will come to this screen when he/she taps on a date in the calendar view.
- Screen name should be the name of the month and year
- The selected date will come in focus and the screen will get expanded below it.
It will display the following for each transaction on that particular date:
- Category indicator
- Category name
- Description
- Amount
- The spend transactions amounts will be displayed in red and the income transactions amount will be displayed in blue.
- Tapping anywhere outside the list view will close the list.
CODE REQUIREMENTS:
Ionic/Javascript
- Ionic framework and AngularJs are our main focus frameworks, you must use the ionic directives, and “think in Angular” when coding.
- 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.
CSS
- 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 create 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.
Assets/Images
- Use SVG to make graphics look sharp on your submissions.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
- For all the image, please pull them as PNG format from provided Assets
- For all the icons, please pull them as SVG format from provided Assets
Browsers Requirements
- Native Mobile on Android (Any Screen Sizes)
1. Source code zip file.
2. Packaged App in Android format
3. Compiling and building instructions.
4. List of frameworks / plugins used.
In this challenge, we are looking for your help to create Mobile Ionic application based on the provided storyboard using Ionic v1 + AngularJS v1 framework.
As part of this challenge we need you to create documentation of your Ionic application, we are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development.
Good luck and Let us know any questions you have!
General Tasks
- The primary app platform should be Android.
- The app should be a hybrid app developed using Ionic version1, and compatible version of Cordova. Note that AngularJS version1 is used with Ionic 1.
- Please note: the build has to be cordova compatible.
- Use AngularJS 1 Styleguide when build this submission to maintain your code quality
- App must be responsive. It should render nicely on devices of all sizes, resolutions and form factors.
- Instead of using Custom CSS, a standard CSS library must be used.
- Source code of all technical artefacts must be submitted. It includes the following:
- .html files- HTML5 should be used and not the earlier versions of HTML.
- JavaScript files (.js files)
- 3rd Party js libraries
- Standard CSS libraries (like ionic CSS, Bootstrap) used
- Charting libraries used
- Static images (Gif, PNG, JPEG)
- Animated images (if any)
- Custom CSS file, Custom CSS must not compromise responsiveness of the app. CSS version should be CSS3.
- Icons must render distortion free on all device sizes. This can be achieved by using Vector Images or glyph icons similar to what is available on http://fontawesome.io/
- Some icon libraries require attributions to be made. Care should be taken that no such libraries are used (which need attributions). If Vector Images or glyph icons are created by the prototype developers, they should be provided with source code. Icons must not be stolen ones.
- AngularJS code must be well kept in appropriate set of controllers, services and custom-directives
- The prototype must assume that data in actual application is fetched from server as JSON responses from REST APIs calls. In prototype app the JSON responses can be hardcoded.
- Any Cordova Plugins code used in the prototype must also be delivered
- Form validation should be done using standard form validation techniques of AngularJS
-- Have a standard design for informational and error popups.
-- Arrive at a standard way to show form validation errors.
- The solution source code must include a detailed ReadMe file mentioning steps required to compile, build and generate APKs.
Screen Requirements:
- Storyboard Design: https://drive.google.com/open?id=1BqZmg_FKUCBByPPdE-Bbw6etWRcHZXut
- We need below pages to be put together, take a look at the flow - let us know if you have any questions.
1). Splash Screen
Screenshot: A01_0-Splash-Screen.gif
- This is the splash screen of the application. This is displayed when the user opens the application.
2). Navigation
Screenshot: A02_0-Navigation.gif
- When the user taps on the burger menu, he/she will be able to see the following:
1. Name and picture of the customer
2. Home button
3. Money Management
4. Money Movement
5. Fund My Purchases
6. Notifications – with a batch for number of unviewed notifications
7. Talk to miliu
8. Settings
9. Logout
- This menu will be extended if required as we add scenarios.
3). Money Management
Screenshot: A03_0-Money-Management-Landing.gif
- When the user taps on money management in menu this screen would appear.
Functional:
- My budget
- My goals
- My dashboard
Non Functional:
- My Advice
- My Spend
- My Growth
- My Borrowings
- My Protection
The budget amount left for this month will also be displayed.
Screenshot: A03_1-Money-Management-Landing.gif
- The user should be able to reorganize the money management grid by long pressing a cell
and repositioning it.
- Once the user has repositioned the grid cells, the app should remember the new positions
and display the same every time the user comes to this screen until the user changes it
again.
4). Money Management Dashboard
Screenshot: A04_0-Money-Management-Dashboard.gif
- The spend dashboard will be accessible from the following:
1. It will be the landing screen when the customer logs in
2. Tapping Home in the burger menu
3. My Dashboards in Money Management Grid
- This is the view when the customer’s budget has not been set.
- It will have a message “Set up your budget to get a budget summary view here.” to indicate that the customer’s budget has not been set. It will have a button to set the budget and to view transactions.
- Tapping on “Set My Budget” will take the user to set budget screen.
- This dashboard will show all the checking accounts and credit cards of the user. This will include miliu and linked non miliu accounts. It will display the nickname of the account, masked account number (xxxxnnnn), bank logo and the associated amount (account balance in case of checking account and outstanding amount in case of credit card).
- In case of more than 2 products, the section of the screen should be scrollable horizontally and should have indicator to show the same (e.g. three dots below the product cards).
-- My Current spend: Total amount spent by the customer in the current month. This includes expenditure done on the linked external accounts as well.
-- Typical Spend: Typical monthly expenditure of the customer – average of the last six months’ expenditure. This will not include the current month.
- There is an icon for view transactions in my current spend card. Tapping on the control should take the user to Transactions” screen.
Screenshot: A04_1-Money-Management-Dashboard.gif
- When the budget has been set by the user, this screen will display the budget amount and
the remaining budget amount.
Battery:
- Within budget – expenditure is less than 100% of the budget. The percentage of budget remaining should be displayed in the battery, the colored portion should correspond to this percentage and should be displayed in blue.
- Over budget – expenditure has exceeded the budget. The over budget percentage should be displayed in the battery, the full battery should be colored and should be displayed in white – to indicate that full budget has been exhausted.
- In case of over budget, the remaining budget label should change to “Over Budget By” and should display the difference between the budget and the spend.
- Tapping on the budget section (My Budget, Remaining Budget and/or battery) should take the user to the my budget screen.
Screenshot: A04_2-Money-Management-Dashboard.gif
- Budget prediction – In case the bank predicts that the user will go out of budget, the battery color should change to red.
- Tapping on the button “Tell me why?” will display the reason why the bank thinks that the user will go out of budget this month.
Screenshot: A04_3-Money-Management-Dashboard.gif
- This is when the user has exceeded the budget
Screenshot: A04_7-Money-Management-Dashboard.gif
- Tapping on the “Tell me why?” control displayed when the bank predicts that the customer will go out of budget will display the why am I red screen.
- This will give the reason along with the top 3 largest spend transactions based on amount for the current month.
- It will display the date, category icon, category name, description and amount.
- Note: All debit amounts are displayed in red.
5). My Budget Summary
Screenshot: A05_0-My-Budget-Summary.gif
- This is the My Budget screen/budget dashboard. This screen accessible from the following:
1. My Budget in Money Management Grid (if the budget is already set)
2. Setting and submitting the budget (manually or recommended)
3. Tapping on the budget section in the spend dashboard
- Back button will take the user to where this screen was invoked from.
- Please place the back button before the menu button on the top left as a back arrow. The
design is not consistent on this.
- “Set Alert” control will take the user to the set alert screen.
My Income:
This will show the actual data. It will display the following:
- My Income – total income received tis month
- Income category
- Actual amounts
My Spend
- Total spend budget and total spend ($4,500 of $5,000 used)
- Category icon
- Category name
- Category budget and category spend
-- $100 or $150 spent
-- incase of over spend $200 of $150 spend with $50 over on the bottom
Percentage consumption
- Top 2 categories (by budget value) will be displayed
- The rest of the categories can be viewed by expanding the screen, i.e. by tapping on
“View +6 categories”. The number will depend on the additional categories available to
be viewed.
My Borrowings and My Protection should follow the same design and logic as my Spend.
My Growth:
- It should display Total growth budget and total actual growth ($2,500 or $5,000 saved)
- It should show a line graph for the month
- The x axis should have the dates and the y axis should have the percentage.
- The graph will display the percentage of the budgeted amount that has been saved/invested.
- All the growth categories can be viewed by expanding the screen, i.e. by tapping on
“View +6 categories” (similar to my spend). The number will depend on the additional categories available to be viewed.
Color coding (Applicable only to My Spend categories)
80% green
80-100% - yellow
Above 100% - red
For the rest of the budget heads it will be always green.
My Spend: $300 of $500 used
My Borrowings: $300 of $500 paid
My Protection: $300 of $500 paid
My Growth: $300 of $500 saved
6). Set Alert
Screenshot: A05_1-Set-Alert.gif
Screenshot: A05_2-Set-Alert.gif
Screenshot: A05_3-Set-Alert.gif
Alerts can be set for:
1. Overall budget
2. Specific budget head
3. Certain category of a budget head.
Values for select budget head are:
- Overall
- My Income
- My Spend
- My Borrowings
- My Growth
- My Protection
- The categories list will be created on the basis of what the customer has selected as the budget head. It will also have a option for consolidated that means the alert is being set for the selected budget head and not just for a category within the selected budget head. In case “Overall” is selected in the budget head field, then the select category field will be disabled.
- The percentage field will be blank. The user can fill in any value (between 1 -200) here.
- Please note: As and when required, we will add more types of alerts other than budget alerts.
7). Goals
Screenshot: A06_0-Goals.gif
- This is the My Goals screen. This screen accessible from the following:
1. My Goals in Money Management Grid (if even one goal has been set)
2. Setting and submitting the goal
- Back button will take the user to where this screen was invoked from.
- Please place the back button before the menu button on the top left as a back arrow. The design is not consistent on this.
- The customer can add a new goal, add additional funds to the goal, share the goal on Facebook and transfer money to the funding account and close the goal.
Note: The goals that have been fulfilled 100% will also be displayed here until the user
transfers the money and closes the goal.
Each goal will have:
- Goal icon
- Goal Name
- Goal maturity amount
- Goal maturity date
- Saved percentage
- Saved amount
- Tapping on a goal will take the user to goal details screen.
- + button at the bottom will open the set goal screen (missing in the design)
Screenshot: A06_1-Goals.gif
Tapping on the right hand side control against each goal will display 3 options:
1. Add funds
2. Transfer & Close
3. Share on Facebook
8). Set Goal
Screenshot: A07_0-Set-Goal.gif
The customer will come to this screen when he/she:
- Selects yes on the set goal screen when no goals have been set
- Chooses to add additional goal from my goals screen
- wants to add a goal to his/her growth budget and chooses to add a goal on select goals screen in my budget module
- Monthly contribution is calculated dynamically by the application. Calculation: Goal amount/number of contributions. Monthly contribution field is non editable.
- Number of contributions is the number of months between start month and target completion month.
- The start date is the first of the next month – filled automatically but editable. Hence, if the user is setting the goal on 1st of the month, system suggested start date will be the 1st of the
next month. The user can tap on the field and edit it to any future date including today.
- Funding account will be filled with his default checking account number. If he wants to edit this, he will get a list to select from. The list will have all his miliu checking accounts.
- Target completion can be selected from a month/year picker.
- Select Category will display the list of spend categories. The user can select one of the categories. Corresponding icon will also be displayed with the category.
- The goal name selected by the user will be the nickname of the savings account that is created for this goal.
9). Transaction Total Spend
Screenshot: A08_0-Transaction-Summary.gif
- The customer will come to this screen when he/she selects view transactions control on the spend dashboard
- Name of the screen should be “My Transactions”
The screen will have the following:
- Total spend: Total amount spent on spend categories in the current month
- Total income: Total income in the current month
- Pie chart – with the percentages of different categories amount of the selected type of transactions (Total income or total spend)
- Date range – Beginning of the current month to current date by default
- Category names – Only those categories that have at least one transaction will be displayed
- Percentage – The percentage breakup of the amount with respect to the total amount
- Amount – Total amount spent on a category
- This view shows “Total Spend” as selected. This will be selected by default when the user comes to this screen. The user can tap on “Total Income” to get the income view. Refer to the next screen for this view.
- Sorting can be done by category or by amount.
- Missing: Back button will take the user to where this screen was invoked from.
- Please place the back button before the menu button on the top left as a back arrow. The design is not consistent on this.
Other controls:
- Tapping on a category row: Refer to (Screenshot: A08_1-Transaction-Summary.gif)
- Swiping the screen left: Refer to (Screenshot: A08_4_4-Transaction-Summary.gif)
- Tapping on the pie chart: Refer to (Screenshot: A08_5-Transaction-Summary.gif, Screenshot: A08_6-Transaction-Summary.gif & Screenshot: A08_7-Transaction-Summary.gif)
- Tapping on the filter icon on the top right: Refer to (Screenshot: A08_2_1-Transaction-Summary.gif, Screenshot: A08_2_2-Transaction-Summary.gif & Screenshot: A08_3-Transaction-Summary.gif)
- Tapping on the calendar icon on the top right: Refer to (Screenshot: A08_10-Transaction-Summary.gif & Screenshot: A08_11-Transaction-Summary.gif)
10). Transaction Total Income
Screenshot: A08_4_2-Transaction-Summary.gif
- The customer will come to this screen when he/she selects view transactions control on the spend dashboard
The screen will have the following:
- Total spend: Total amount spent on spend categories in the current month
- Total income: Total income in the current month
- Pie chart – with the percentages of different categories amount of the selected type of transactions (Total income or total spend)
- Date range – Beginning of the current month to current date by default
- Category names – Only those categories that have at least one transaction will be displayed
- Percentage – The percentage breakup of the amount with respect to the total amount
- Amount – Total amount spent on a category
- This view shows “Total Income” as selected.
- Sorting can be done by category or by amount.
11). Transaction Select Category
Screenshot: A08_1-Transaction-Summary.gif
- The customer will come to this screen when he/she taps on a category row.
- The category row will get expanded and the user will see the latest 3 transactions with an option to view more transactions for this category.
- The user will have an option to close this view. Closing the view will collapse the expanded category.
- Tapping on view more transactions will take the user to a new screen with all the transactions for the selected category for the selected period.
12). Transaction List
Screenshot: A08_4_3-Transaction-Summary.gif
- The customer will come to this screen when he/she swipes the my transactions screen to the left
The screen will have the following:
- Total spend: Total amount spent on spend categories in the current month. This will also be a control to select or deselect spend transactions for the list view.
- Total income: Total income in the current month. This will also be a control to select or deselect income transactions for the list view.
- List of transactions sorted by date – Both income and spend transactions will be displayed by default. The user should be able to deselect one of the category heads to see only the income or spend transactions.
- Each transaction will have:
- Category indicator
- Category name
- Description
- Amount
- The spend transactions amounts will be displayed in red and the income transactions amount will be displayed in blue.
- The user should be able to swipe right to get the pie chart view screen.
- The user should be able to swipe left on a transaction row to get 2 options: Retag and Details.
- The behavior of the other control will remain the same.
Screenshot: A08_4_4-Transaction-Summary.gif
- The user should be able to swipe left on a transaction row to get 2 options: Retag and Details.
12). My Spend View
Screenshot: A08_5-Transaction-Summary.gif
- The customer will come to this screen when he/she taps on the pie chart when total spend is selected in the pie chart screen.
The screen will have the following:
- Total spend: Total amount spent on spend categories in the current month
- Name of the category
- Icon of the category
- Percentage of the amount spend on this category with respect to the total spend
- Total amount spend on the category
- The categories will have visual indicators to show the spend size of the category.
- Only those categories will be displayed here that have atleast one transaction for the selected period.
- The default selected period will be carried forward from the my transactions screen. Swiping left will take the user to the next screen.
13). My Spend View - Bar Graph
Screenshot: A08_6-Transaction-Summary.gif
- The customer will come to this screen when he/she swipes left on the previous screen.
The screen will have the following:
- Total spend: Total amount spent on spend categories in the current month
- Names and icons of the categories as index.
- Bar graph (date wise) showing the last 7 days including today.
- The bar graph will have the break up of transactions by category and will display the total amount spend on a particular date.
- Only those categories will be displayed here that have atleast one transaction for the selected period.
- The default selected period will be carried forward from the my transactions screen. Swiping right will take the user to the previous screen.
- Scrolling right or left on the graph will display the previous days and the corresponding data. The user should not be able to scroll beyond the current date and earlier than the rate range selected for the screen.
13). My Income
Screenshot: A08_7-Transaction-Summary.gif
- This is the bar graph representation with income was selected in the my transactions screen.
- Scrolling right or left on the graph will display the previous days and the corresponding data. The user should not be able to scroll beyond the current date and earlier than the rate range selected for the screen.
14). Filter Transaction
Screenshot: A08_9-Transaction-Summary.gif
Screenshot: A08_2_1-Transaction-Summary.gif
- The customer will come to this screen when he/she taps on the filter icon on the top right of the my transactions screen.
The screen will have the following:
- Account: Control to select the account for which the user wants to see the transactions. All accounts will be selected by default. Use can choose to select any one of the spend accounts from this list. This list will have all the miliu and non miliu linked checking accounts and credit cards.
- Period of time: This month will be selected by default. Refer to the next screen for the view of this list.
- Tapping on apply will apply the filtering options and will display the my transactions screen with the appropriate data for the selected account and or period.
15). Select Period
Screenshot: A08_2_2-Transaction-Summary.gif
- The customer will come to this screen when he/she chooses to change the period of time for transactions view.
The system will display the following options:
- This Month (selected by default)
- Last Month
- This Quarter
- Last Quarter
- This Year
- Last Year
- Custom
- Tapping on custom will take the user to the next screen.
16). Select Custom Period
Screenshot: A08_3-Transaction-Summary.gif
- The customer will come to this screen when he/she chooses custom from select period list.
The system will display the following options:
- Start Date
- End Date
- Control to select the date from
- Control to cancel the date selection view
- Control to set the custom view
- The user will select the start date first. The system will take him to the correct field to select the end date once he/she has selected the start date.
17). Transactions – Calendar View
Screenshot: A08_10-Transaction-Summary.gif
- The customer will come to this screen when he/she taps on the calendar icon on the top right on the my transactions screen.
- Screen name should be the name of the month and year
The screen will have the following:
- Total spend: Total amount spent on spend categories in the current month. This will also be a control to select or deselect spend transactions for the list view.
- Total income: Total income in the current month. This will also be a control to select or deselect income transactions for the list view.
- Calendar view of the current month. User should be able to swipe up and down to see the previous and next months. The current month will be selected by default.
- Total spend and total income for each date.
- The spend transactions amounts will be displayed in red and the income transactions amount will be displayed in blue.
- User can tap on a date with atleast one transaction value to see the details.
- User can scroll up or down to other months and get the correct transaction view for the same.
18). Transactions – Calendar View Details
Screenshot: A08_11-Transaction-Summary.gif
- The customer will come to this screen when he/she taps on a date in the calendar view.
- Screen name should be the name of the month and year
- The selected date will come in focus and the screen will get expanded below it.
It will display the following for each transaction on that particular date:
- Category indicator
- Category name
- Description
- Amount
- The spend transactions amounts will be displayed in red and the income transactions amount will be displayed in blue.
- Tapping anywhere outside the list view will close the list.
CODE REQUIREMENTS:
Ionic/Javascript
- Ionic framework and AngularJs are our main focus frameworks, you must use the ionic directives, and “think in Angular” when coding.
- 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.
CSS
- 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 create 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.
Assets/Images
- Use SVG to make graphics look sharp on your submissions.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
- For all the image, please pull them as PNG format from provided Assets
- For all the icons, please pull them as SVG format from provided Assets
Browsers Requirements
- Native Mobile on Android (Any Screen Sizes)
Final Submission Guidelines
Things need to be submitted:1. Source code zip file.
2. Packaged App in Android format
3. Compiling and building instructions.
4. List of frameworks / plugins used.