Challenge Summary
Welcome to Living Progress - Women's Saving Group - Mobile App Design Challenge!
This project aims at creating a e-ledger mobile application that helps to simplify record keeping by digitizing it, thereby increase accuracy and improve data security.
We have provided wireframes for content references, please do not copy them!
Also please don’t just color the wireframes, we are looking for you to improve the overall layout, interaction and user experience of the this application.
Good luck and we look forward to your design!
Round 1
Submit your initial designs for Checkpoint Feedback01 Login
A. All Users:
02 Dashboard
03 Savings Passbook
04 Penalties
05 Loan Passbook
06 Account Statement
07 Other's Loan Request
08 Group Account Summary
09 Terms & Conditions
10 My Profile
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The Purpose of this challenge is to come up with the the look & feel and flow for this web application. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
This mobile application (e-ledger) would facilitate the existing record keeping - credits, debits, lending activities, lending calculators, loan repayment schedules, loan tracking, portfolio reporting.
Design Ideas:
- Looking for modern, intuitive user interface
- Focus on the design being a great user experience, think simple but effective solutions!
- Most users will have low to very low literacy skills.
- The app will be translated to meet local language context.
- Come up with designs that shows out-of-the-box solutions.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- Please make sure your capture every details in the wireframe.
Design Size:
- We are focussing on android mobiles, have your designs of size 1080 x 1920px (portrait)
Branding Guidelines:
- Branding is open to the designers
- We would like you to use HPE logo and also PACT's (client's) logo wherever its appropriate (not required in all pages) - for now use a placeholder, we will be supplying these folder once we have them from the client
About e-Ledger Application:
A shift from labor-intensive, handwritten paper records to digital accounting would drastically reduce banking transaction costs and the women’s opportunity costs for WORTH participation. This would also allow the client to enhance and improve existing training on micro-business and capital usage for existing groups while also including more women in the program.
This will be an online system (mobile hybrid app) to simplify record keeping, increase accuracy and improve data security:
- This mobile application would facilitate the existing record keeping - credits, debits, lending activities, lending calculators, loan repayment schedules, loan tracking, portfolio reporting.
Required Screens:
We need below screens to be designed..
01 Login:
- This screen will allow the user to login into the app
- Show us how the error screen will look like.
A. All Users:
02 Dashboard:
- This need to show a quick summary of the savings, loan, meeting and group account summaries.
- It would good to show the notification for the user, currently it’s shown at the bottom...looking for your design thoughts how better this can be shown?
- From the summaries, user should be able to view the details view of the appropriate sections (Savings Passbook, Loan Passbook Group Account Summary).
- This screen should help the user understand the activities going on with respect to their savings, loan and group account!
- Having visualization would be a great way to simplify things / make it easy to understand but please make sure it doesn’t look too complex to understand!
Navigation:
- We need a navigation for this app, show us how this need to look like?
03 Savings Passbook:
- This screens shows the savings to the user!
- Show Savings summary..
- Allow the user to deposit or withdraw the money..
- - - Deposit: This could be of two types mandatory or voluntary..so allow this selection and then enter amount to be deposited, if they choose “hard cash / m-money (mobile money)”, we need to show a message as shown in wireframes!
- - - Withdraw: This will allow the user to withdraw the money, user will enter the money and submits the amount to be withdrawn. Amount can be withdrawn only from the voluntary savings and mandatory savings be withdrawn after 6 months cycle (or after a cycle of longer length, dependent up on the group’s preference and maturity)...once the user clicks on “Withdraw”, we show a message a message as shown in wireframes.
- This screen also need to show a detailed view of the savings transactions (Note: we need to show only the last 7 transactions).
- Provide options to export or email the savings account statement!
04 Penalties:
- We need a screen that shows the list of penalties that has been added for either non-payment of mandatory savings or missed to make a loan re-payment.
- Should allow the payment to be entered/made from this screen (same option as savings passbook, should allow the money to paid to the treasurer or as mobile money (m-money/digital wallets).
- Looking for your thoughts on how these transactions can be shown?
05 Loan Passbook:
- This screen show the loan summary and also the detailed information on the repayments that been done so far!
- Provide options to export or email the loan transaction statement!
- Should have the ability to “Request a Loan”!
- Provide a way for the user to enter an amount to repay the loan, they could “Pay it as hard cash” or “Pay it as m-money”.
Request a Loan:
- User need to fill out a form to request a loan
- - Loan amount
- - Terms
- - Duration (which could be already fixed)
- - Weekly Repayment Amount (which could be already fixed)
- - Loan purpose (options: business / consumption) and a comment box!
- Actions: Request Loan, Cancel
06 Account Statement:
- This displays the list of transactions ..
- Provide options to view the transactions by choosing certain time-periods (Last Week, Last One Month, Last two months, etc) - show us how these options need to be shown?
- Provide options to export or email the savings account statement!
07 Other’s Loan Request:
- This screen need to show the list of loan requests...it will be good to show a list of notifications on the number of loans that were requested i.e. when other users “request a loan” then it is shown in this page as a request. A loan request need to be approved by all members, only then a loan is approved!
- Capture the details for each loan request as shown in wireframe
- Each loan request will have “Reject and Accept” button, on clicking “reject” will ask for the confirmation, come up with design thoughts on how this need to be shown!
08 Group Account Summary:
- This screen is shown to all members of the group..
- This shows the overall summary of the group, overall savings, pending mandatory savings, outstanding loans, amount of mandatory savings and loan repayments per week ...total m-money balance, other bank balance and cash on hand!
09 Terms & Conditions:
- This shows the “Terms and Conditions”.
10 My Profile:
- This shows the user profile
- Allow the user to edit their name and provide the ability to change the photo
- View their m-money balance (this is an input field and is not linked to the group journals or individual/member passbooks)
- Provide ability to add external bank savings! (same as above)
B. Management Committee User:
These members will have access to additional screens in addition to above screens.
Navigation:
Note, these users have additional items in the navigation - show us how this will need to look like?
11 Savings Journal:
- This screen shows the list of all activities (deposit / withdrawal) done by members.
- If the member looks to (request) withdraw an amount then MC member need to approve it (shows a confirmation on tapping “Approve” link), pay the cash to the member who requested and then e-sign it (digital signature).
- If the member deposits an amount, then they need to “Accept” (shows a confirmation on tapping “Accept” link)
- When the user accepts or declines, a notification is immediately sent to the corresponding member.
- Provide a way for the user/MC to “Record Penalties”.
Record Penalties:
- During weekly meetings if a member fails to pay the mandatory savings amount or missed to attend weekly meeting then a penalty is applied against their account.
- This screen need to show the list of member who had failed to pay, provide a way to select the penalty for each of the member..
- Once all selection has been done, include a way to “Apply Penalties” or “cancel” it!
- Provide a way for the users to move/navigate between weekly meetings that were conducted in the past!
12 Loan Journal:
- This shows the list of weekly loan repayments that are being done.
- When a member makes a weekly loan repayment, that’s shown here with a “Accept” link..which on tap shows a confirmation - on accepting, a notification is sent to the user.
- Provide a way for the users to move/navigate between weekly meetings that were conducted in the past!
- Provide a way to view “Pending Loan Requests, Record Penalties and view already issued Loans”.
Pending Loan Requests:
- This shows the list of pending loan requests (similar to other members) but in this we show the group vote i.e. how many members has accepted or rejected it - based on this MC member decides whether to Issue loan or Reject it
- Please make sure to capture all the details in the screen as shown in the wireframe...how will the UI look when we have many pending loan request?
- They should have option to “Update Loan Terms”
- Update Loan Terms: This screen is similar to “request loan” screen accessed by members.
View All Issued Loans:
- This screens shows the list of all loans that were issued!
- Should allow the users to view outstanding loans alone, think on how we can do this?
- Highlight outstanding loans in arrears (with past-due amounts)
Record Penalties:
- This is same as “Record Penalties” shown under savings journal.
- Provide a way for the users to move/navigate between weekly meetings that were conducted in the past!
13 Group Account Summary (Transfer Funds):
- In group account summary, these users have additional functionality which is the ability to “Transfer Funds”, show us how a user will initiate transfer of funds!
- Transfer Funds: They could select from where they want to transfer money and to which account...and also the amount of money to be transferred!
- Show us how this need to be laid out!
14 Settings:
- This screen need to handle group and user settings
Group settings:
- This will allow them to set the cycle for savings deposit, loan interest, fixed mandatory payment, penalty for missed payments and meetings, meeting time and venue and also set the person who is responsible for organizing the meeting along with their contact number.
- They should have the ability to edit the terms & conditions
User Settings:
- This allows user to change the MC members..clicking on change will allow them to select a member and update them, show us how the flow and screens need to look like?
- Should be able to add a member to the group, provide the ability to search and add a member!
- - Adding a new member would entail adding their account balances in the Passbooks, which need to flow into the Journals
- Need to show the list of members under this group and provide a way for the member to be removed.
15 Announcements:
- MC user will have the ability to send/broadcast a message to all users..
- Show us how this interface need to look like!
16 Group Setup:
- On MC’s first login, they need to setup the group in this application
- Capture all details/fields from the wireframe, show us if there is a better way to present this information.
17 Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers
- Explore these references to learn more about style tiles: Reference 1, Reference 2
Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)
Typography:
We would like you to identify and define the list of fonts and the specific color, font size used:
- Headers
- Sub-headers.
- Paragraphs.
- etc.
Target Audience:
- Poor Women Members of the savings group
- Managing Committee (Chairperson, Treasurer, Secretary, Controller) members of the savings group
- Low to very low illiteracy skills (graphics, images, flow-arrows, etc.)
Judging Criteria:
- Is the design styled to be appealing and desirable?
- Is the design visually resolved and does it evoke an emotional connection with the user?
- Does the design convey the function and use unambiguously and intuitively
- Does it clearly convey what the app is supposed to let you achieve / what problem it is designed to solve.
- Is the design easy to use and understand?
Stock Artwork:
- For this challenge, as we are focussing on android mobiles and if you are planning to use some stock icons, then we recommend using icons from the "Google Material Icon"...if need be, you can use icons from the other sources as mentioned in the stock artwork policy below!
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
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 for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.