Challenge Summary
Welcome to "miliu - Spending Management Features Re-Design Challenge".
"miliu" is the name of concept bank from Wipro. miliu embodies Wipro's vision of bank of the future. Through miliu we showcase how banks will engage with its customers in future and the solutions and technologies that banks would need to adopt to provide personalized contextual services. "miliu" derived from the French word milieu meaning socio-economic context of a person, puts the customer at center of banking. Banking with miliu is not just about offering financial products but providing a complete immersive customer experience to deliver financial products and services.
In this challenge, we want to improve the UI/UX of several screens from Spending Management features that we have in miliu Banking App. We want to give the best possible UI/UX for our user when using the miliu Banking App, especially when our user using the spending management features.
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!
01) Splash Screen
02) Navigation Screen
03) Money Management landing Screen
04) Money Management Dashboard Screen
05) Budget Summary screen
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
01) Splash Screen
02) Navigation Screen
03) Money Management landing Screen
04) Money Management Dashboard Screen
05) Budget Summary screen
06) Goal List screen
07) Set Goal Screen
08) Transaction Summary Screen
- As part of your final submission, you must replace your existing design submission in Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are looking for trendy, appealing and immersive look and feel for the Spending Management features in our miliu Banking App. Seven unique pages of the miliu app has been identified for this challenge. These selected pages represent key aspects of the app such as navigational flow, landing page, spend-dashboard and pages related to Goals and Budgets.
Design Considerations
- Looking for trendy, appealing and immersive look & feel for the banking app.
- It should render nicely on devices of all sizes, resolutions and form factors.
- Application must have high ergonomics values.
- Content must be packaged into appealing, easily consumed, informational chunks – bold/distinctive, simple to understand/digest and informative.
- The mobile app need to take one-hand touch factor into account when they are designed so that critical buttons, links, and hot areas can be easily accessed using one hand. This means that the buttons should be sufficiently large, and hot areas and links should be clearly discernible.
- The technology used to develop the hybrid mobile app should be Ionic V 1 and compatible version of Cordova. The primary app platform should be Android.
- Add a suitable splash screen at the launch of the application. Splash screen should feature banking concepts along with miliu logo (attached).
- Have a standard design for informational and error popups.
- Arrive at a standard way to show form validation errors.
- Our audience is banks across the globe. The theme of the application with respect to colours, fonts, icons, images etc must suit Banking clients of different regions.
- All icons should be Glyphicons that can be resized without distortion and whose foreground and background colour can be changed
Target Devices
- Android: 1080px x 1920px
- iPhone: 750px x 1334px
Branding Guidelines
- Trendy, appealing and immersive look & feel for the banking app.
- Style, Font, Colors Open to designers.
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=617066
Screen Requirements
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) Splash Screen
No References
- Add a suitable splash screen at the launch of the application.
- Splash screen should feature banking concepts along with miliu logo (attached).
02) Navigation Screen
Miliu_main_menu.jpg
- This page provides top level menu items for the miliu app.
- Needs to simulate the Hide/Expand of the main nav
- Needs to simulate Disabled/Enable Menu Items
- Active state of the Menus
- Icons and Typography of the Menus
03) Money Management landing Screen
Money_mgnt_landing_page.jpg
- This landing page provides access to several Personal Finance Management features like My Dashboard (Spend-Dashboard), Goals, Budgets etc.
- Needs better layout to accomodate these menu features.
04) Money Management Dashboard Screen
spend_dashboard_no_budget_defined.jpg, spend_dashboard_over_budget.jpg, spend_dashboard_within_budget.jpg.
- These three screens represent 3 states of the same page
- State 1: When monthly spend of the user is within the monthly Budget
- State 2: When monthly spend of the user has gone over the monthly Budget
- State 3: When the user has not set his/her monthly budget
05) Budget Summary screen
Budget_summary.jpg
- This page provides a summarised view of user’s budget.
- My Income, show list of available income that user have and how much do they received.
- My Spend, show list of items that user spend for period of time and how much the budget has been spent or still remaining
- My Growth, Show how much user gain progress via the app.
- Ability to add/modify budget items.
06) Goal List screen
Goals_list.jpg
- This page shows a list of all goals defined by the user.
- Ability to add new goal
- View all goals and ability to interact with each goal list
07) Set Goal Screen
Set_goal.jpg
- This page allows to set a financial goal.
08) Transaction Summary Screen
Transaction_summary_one_month_selected.png,transaction_summary_six_months_selected.png
- These two screens represent 2 states of the same page:
- State 1: Transaction summary for 1 month
- State 2: Transaction summary for 6 months
- Show us total spending and the breakdown details, along with total income so user can do some calculation about their spending
- Ability to filter and select month range of the transaction summary?
Important:
- DO NOT JUST COPY the Screenshot, treat it as your references and improve the UI/UX.
- Keep things consistent. This means allgraphic 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 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 within your notes/comment this link while you upload).
Documentations
- UI Screenshot
- miliu logo
Target Audience
- Basically Everyone that have saving account in Bank and use Smart Phone.
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 Challenge submission requirements stated above.
- Marvel App link for review and to provide feedback
Source Files
All source files of all graphics created in Sketch, Adobe Photoshop, or Illustrator and saved as editable layers.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
"miliu" is the name of concept bank from Wipro. miliu embodies Wipro's vision of bank of the future. Through miliu we showcase how banks will engage with its customers in future and the solutions and technologies that banks would need to adopt to provide personalized contextual services. "miliu" derived from the French word milieu meaning socio-economic context of a person, puts the customer at center of banking. Banking with miliu is not just about offering financial products but providing a complete immersive customer experience to deliver financial products and services.
In this challenge, we want to improve the UI/UX of several screens from Spending Management features that we have in miliu Banking App. We want to give the best possible UI/UX for our user when using the miliu Banking App, especially when our user using the spending management features.
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 solution for client feedback (Android + iPhone)01) Splash Screen
02) Navigation Screen
03) Money Management landing Screen
04) Money Management Dashboard Screen
05) Budget Summary screen
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App 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 solution with client feedback applied (Android + iPhone)01) Splash Screen
02) Navigation Screen
03) Money Management landing Screen
04) Money Management Dashboard Screen
05) Budget Summary screen
06) Goal List screen
07) Set Goal Screen
08) Transaction Summary Screen
- As part of your final submission, you must replace your existing design submission in Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are looking for trendy, appealing and immersive look and feel for the Spending Management features in our miliu Banking App. Seven unique pages of the miliu app has been identified for this challenge. These selected pages represent key aspects of the app such as navigational flow, landing page, spend-dashboard and pages related to Goals and Budgets.
Design Considerations
- Looking for trendy, appealing and immersive look & feel for the banking app.
- It should render nicely on devices of all sizes, resolutions and form factors.
- Application must have high ergonomics values.
- Content must be packaged into appealing, easily consumed, informational chunks – bold/distinctive, simple to understand/digest and informative.
- The mobile app need to take one-hand touch factor into account when they are designed so that critical buttons, links, and hot areas can be easily accessed using one hand. This means that the buttons should be sufficiently large, and hot areas and links should be clearly discernible.
- The technology used to develop the hybrid mobile app should be Ionic V 1 and compatible version of Cordova. The primary app platform should be Android.
- Add a suitable splash screen at the launch of the application. Splash screen should feature banking concepts along with miliu logo (attached).
- Have a standard design for informational and error popups.
- Arrive at a standard way to show form validation errors.
- Our audience is banks across the globe. The theme of the application with respect to colours, fonts, icons, images etc must suit Banking clients of different regions.
- All icons should be Glyphicons that can be resized without distortion and whose foreground and background colour can be changed
Target Devices
- Android: 1080px x 1920px
- iPhone: 750px x 1334px
Branding Guidelines
- Trendy, appealing and immersive look & feel for the banking app.
- Style, Font, Colors Open to designers.
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=617066
Screen Requirements
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) Splash Screen
No References
- Add a suitable splash screen at the launch of the application.
- Splash screen should feature banking concepts along with miliu logo (attached).
02) Navigation Screen
Miliu_main_menu.jpg
- This page provides top level menu items for the miliu app.
- Needs to simulate the Hide/Expand of the main nav
- Needs to simulate Disabled/Enable Menu Items
- Active state of the Menus
- Icons and Typography of the Menus
03) Money Management landing Screen
Money_mgnt_landing_page.jpg
- This landing page provides access to several Personal Finance Management features like My Dashboard (Spend-Dashboard), Goals, Budgets etc.
- Needs better layout to accomodate these menu features.
04) Money Management Dashboard Screen
spend_dashboard_no_budget_defined.jpg, spend_dashboard_over_budget.jpg, spend_dashboard_within_budget.jpg.
- These three screens represent 3 states of the same page
- State 1: When monthly spend of the user is within the monthly Budget
- State 2: When monthly spend of the user has gone over the monthly Budget
- State 3: When the user has not set his/her monthly budget
05) Budget Summary screen
Budget_summary.jpg
- This page provides a summarised view of user’s budget.
- My Income, show list of available income that user have and how much do they received.
- My Spend, show list of items that user spend for period of time and how much the budget has been spent or still remaining
- My Growth, Show how much user gain progress via the app.
- Ability to add/modify budget items.
06) Goal List screen
Goals_list.jpg
- This page shows a list of all goals defined by the user.
- Ability to add new goal
- View all goals and ability to interact with each goal list
07) Set Goal Screen
Set_goal.jpg
- This page allows to set a financial goal.
08) Transaction Summary Screen
Transaction_summary_one_month_selected.png,transaction_summary_six_months_selected.png
- These two screens represent 2 states of the same page:
- State 1: Transaction summary for 1 month
- State 2: Transaction summary for 6 months
- Show us total spending and the breakdown details, along with total income so user can do some calculation about their spending
- Ability to filter and select month range of the transaction summary?
Important:
- DO NOT JUST COPY the Screenshot, treat it as your references and improve the UI/UX.
- Keep things consistent. This means allgraphic 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 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 within your notes/comment this link while you upload).
Documentations
- UI Screenshot
- miliu logo
Target Audience
- Basically Everyone that have saving account in Bank and use Smart Phone.
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 Challenge submission requirements stated above.
- Marvel App link for review and to provide feedback
Source Files
All source files of all graphics created in Sketch, Adobe Photoshop, or Illustrator and saved as editable layers.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.