Personal Finance and Predictions Mobile Widget Design Challenge

Welcome to the "Personal Finance and Predictions Mobile Widget Design Challenge". In this challenge, Standard Bank is looking for your help to create the best possible UI/UX for their new widget. This widget will be added to an existing banking application.  The main feature is to provide customers daily/weekly/monthly insights into their account activity, and based on this information, makes suggestions on discretionary spending. 

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 Checkpoint Feedback
01) Widget design on the homepage
02) Widget information 
03) Detailed overflow pages
- 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates
01) Widget design on the homepage
02) Widget information
03) Detailed overflow pages
- 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
BACKGROUND OVERVIEW

• Standard Bank is looking to design a mobile widget to be added to our existing mobile application that provides customers with daily/weekly/monthly insights into their account activity. 
• They would like it to capture recurring payments by the user.  Bills that are the same payment every month - mobile phone, rent, mortgage, loan repayments, internet, cable television, etc.  Also, recurring deposits should also be taken into consideration like employee salary direct deposits. 
• Based on these recurring activity patterns, which are pretty much identical from month to month, the application should be able to show their available balance for spending (after all other recurring expenditure items have occurred.) This balance will change daily as the funds are used and called discretionary money.  Discretionary money is money that is left for spending, investing or saving after those personal necessities are paid for.  
• Even though things such as food, the electric bill, water bill, gasoline for the car, fluctuate from month to month they are still personal necessities and should also be taken into consideration, but not as much as the recurring activity patterns that are stated above.
• This widget will live as a standalone feature component within the app design architecture that a customer will be able to add to their homepage. 
• Only design of the widget and resulting overflow screens are required, and NOT an entire app. 

CHALLENGE GOAL

• The goal of this challenge is to develop UI/UX for a new mobile widget (not restricted to one widget, multiple widgets are allowed) that will be added to our existing mobile application that provides features like:
  • Valuable insights into account spending activity over the past days/months/year
  • Provide some reasonable prediction of the next 30 days expenses, based on regular past months spending behavior
  • Manage their expectations around actual funds available for spending outside of regular committed expenditures

DESIGN CONSIDERATION

• The data insights and suggestions to the customer are critical. The customer must get some incredibly useful information from the widget in order for them to make informed decisions about their finances and if they can spend money on luxury items and leisure activities. And secondly, it must be a visually appealing and engaging experience. Interactivity is key.
• In your design thinking, have a look at examples of what other Personal Financial Management widgets exist out in the marketplace. 

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=677325

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) Widget design on the homepage

• The widget must be designed as a standalone component
• Two widget design variations, for IOS and Android operating systems (see screen device needs to be supported)
• You don't have to be restricted to 1 widget only. If you feel that there is sufficient insights/information that can be displayed in multiple widgets then do so. We are looking for some creative thinking into insights.
• Don’t be too concerned about overall navigation and branding etc. Only be concerned about interaction and navigation within the widget and into overflow screens. 
• No restrictions on height, but shouldn't be a ridiculously long widget that scrolls forever. 
• Width - Look at the widths for the medium to high-end range smartphones for IOS and Android. That being said, don’t be constrained by width limitations if you feel that horizontal swiping gestures or carousel-type components need to be used.
• Widget interactivity - you decide what interactions happen within the widget and what needs to break out into further screen flows with more transaction details and more specific insights
• The widget appearance on the homepage is determined, based on a customer’s preference. We'll be introducing a default set of widgets designed specifically for customers, of which this will be one of them. However, the customer must have the ability to personalize their homepage by removing the widget all together or changing its position on the homepage. There will be a widget store within the app ecosystem where customers can go to add this widget. 

 
02) Widget information 

• Some ideas, but don't feel limited to these: 
  • Safe to Spend balance (Actual account balance less fixed upcoming committed expenses = funds that you have available that can be spent on discretionary expenses)
  • Expenses by day, week, month (you decide on best graphical representation - e.g. calendar, time graph, donut graph, etc) - historical view
  • Upcoming expenses and projected balances for the next week/14 days (predicted based on regular occurring expenses from previous months
  • Expense insights - Top 5 to 10 expense categories
  • Recommendations for balances. How do you visually solve for this and also make use of notifications/in-app messaging/prompts?
    • Positive balance scenarios: Suggestions where customers have excessive funds remaining and could be used better in an investment account earning higher interest rates.
    • Customers have funds in their account, but they are dangerously close to a threshold where given their possible spending habits they may exceed their available funds before their salary deposit date
    • Customers may be in situations where they will definitely not make it to their salary deposit date - how do we as a bank assist them in extending their overdraft or credit limit temporarily?

03) Detailed overflow pages

• The widget on the homepage is meant to be concise insightful information, and the detailed pages will be additional, more detailed information about the specific insight selected. For example, a selection of a weekly expense total could break out into a detailed view of the transactions, the categories of expenses for that week, with visualizations, etc.

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

REFERENCES

• Use these links for inspiration:
  • Apple Card - https://www.youtube.com/watch?v=HAZiE9NtRfs
  • Mint Budget Tracker & Planner - https://www.mint.com/ 
  • Yodlee - www.yodlee.com
  • Meniga - https://www.meniga.com/

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 with your notes/comment this link while you upload).

 
BRANDING GUIDELINES

• Follow our branding guidelines (check our home app screenshot)

DOCUMENTATION
Google Drive: https://drive.google.com/drive/folders/1P0nDU5cJX5WuYXhUTed5XLqakxnByM6K?usp=sharing 

• Home 1.png (visual is a possible conceptual view of a homepage. A widget would appear below the top blue section. You'd be designing for a widget only)
• JoeSoap Expenses.xlsx (Sample data file of a customers expenses over the past 3 months. The transactions are pretty horrible, and there is no categorisation. These are some real data limitations we have. Please FEEL FREE to replace some data descriptions to make it a bit friendlier)

TARGET DEVICE
Mobile Phones: 

• 750px x 1334px (iPhone 8)
• 1125px x 2436px (iPhone XS)
• 1080px x 1920px (Android) 

TARGET AUDIENCES

• 1M+ Personal Banking Customers who have a current cheque account or a credit card account which they use for payments of everyday expenses like rent, food, utilities, telecommunications, entertainment, travel, school fees, etc.

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 solving the problem
• The overall design and user experience
• Cleanliness of screen design and user flow
• Ease of use

 
SUBMISSION AND 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
• 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 PSD later), XD, or Sketch and saved as an editable layer

 
FINAL FIXES
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.