case study: p2p marketplace app

ui/ux review (audit)

general notes

increase dimension of areas the user needs to interact with (think finger size and not pixel size). place frequently-used buttons at the bottom of the screen, because they are comfortably reached with one thumb. implement common swipe gestures, and show affordances when a particular interaction might be overlooked. ensure sufficient font size and contrast of text on background.

mobile screen thumb stretch comfort areas

first screen

use the first screen to communicate what the app is about. choose a simple, direct, clear tagline (e.g. “100% Protected Investments in Payday Loans”). implement a quick onboarding tour, which can be accessed by a simple swipe. the onboarding tour should explain the app’s main features, and it should be limited to 4-5 screens max. the first screen shouldn’t have any access to menu or user details, but only the CTA to the onboarding tour, plus the “Register”, and “Log In” buttons.

first screen

registration

ask the user for the minimum amount of information, only what is necessary at this stage (username and password). less info = less doubts = less fatigue = better conversion. more info can be asked at a later stage, only if/when they are needed. in general, remove any field that is not necessary: e.g. is the phone number required? is the address required? (note regarding the address: remove the “State” field. for addresses, is generally better to have two “open” fields, and then leave the user free to fill them in as needed). don’t ask for password confirmation. don’t force the user on special/uppercase characters for the password. use the more conventional “I agree with the Terms and Conditions” instead of “I confirm that I have agreed to Assignment Agreement”.

navigation

important sections (pages) to be directly accessible through the tab bar: these include the calls-to-action “Add Funds” and “Invest”. less important sections can be accessed through the menu.
Go Back: implement the left to right swipe gesture to Go Back one page.

navigation

overview

the three sections (Summary, Account Statement, and My Investments) are accessed through horizontal swiping. a small affordance (small arrow) suggests this to users. tapping on the From/To buttons allows to change the dates (a calendar should appear after tapping). the Transaction Details are located just below the visible area and can also be accessed through vertical scrolling. same approach for the Current and Completed Investments.

overview

menu

less important sections can be accessed through the menu. have a maximum of 9 items, sufficiently spaced for easy tapping. the most important / most commonly tapped items should be placed at the bottom towards the menu icon (as they are easier to reach). add “How it Works” next to FAQ and explain how to interact with the app. this, and the initial onboarding tour, will help first-time/new users (crucial!).

menu

invest

the two options (“Invest Amount” and “Pick Single Loans”) are shown on the first screen of the Invest section. there are two separate flows.
invest amount: use a text input field to specify the amount (more control compared to the slider). the expected return updates in real-time to provide feedback to the user. implement question mark icons (sufficiently big to the easily selected) to explain what is not self-explanatory.
pick single loans: implement a filter button (floating button placed towards the bottom of the screen). clicking on a specific Single Loan opens a page with details and the CTA to invest.

invest amount single-loans

notifications

separate events log and news. place in this section only what is really relevant to the user (deserving a place in the tab bar!). General News could be accessed through the menu instead (also consider if necessary at all in this app).