In the last post, we looked at the Dashboard/Home page design changes. In this post, I’ll discuss the client home page. This is all the data the system keeps about a particular client – their personal information and who their loan officer is, which branch/group they belong to, and the details about the loans and savings accounts they have.
This is the original client page in Mifos…
This page makes reasonable use of layout:
- a breadcrumb trail at the very top of the page to help with navigation
- the client’s name in large orange letters in the top left corner
- pertinent details below the name
- the loan details highlighted in a blue rectangle below that
- and the loan performance data in a box to the right.
However, it’s still a bit hard to read as all the text is mostly the same size, there are links to actions scattered around the page (while they are located with the information to which they belong, it is hard to know if you are seeing all the possible actions.) The performance details are hard to read because the data is squished right up against the labels. There is also a bunch of data about the MFI and other personal data that is below the fold on this screen and requires scrolling.
My proposed redesign…
- Keep the breadcrumb trail and large client name, but put them together above a set of tabs
- Use tabs to make it easier to find data that appeared below the fold in the original design (the tabs idea came from the developers)
- Use tabs to display the loans and savings account details as well
- Display a photo of the user (this is configurable, can be turned off if graphics display is too slow for the data bandwidth)
- Display the list of loan accounts and savings accounts in tables using striping to distinguish each row and icons for status
- Keep the performance history in a box to the right, but align the data columns for easier reading.
In this design, I’ve also added a couple of graphics (which can be converted to text if graphics display is slow) giving a quick glance at the loan performance (how much has been repaid vs. how much still needs to be paid) and the PPI graph. PPI (Progress out of Poverty Index) is an important indicator for most MFIs. They typically want to see this PPI number visible on the client screen. Also, as they track this data over time, I thought it would be nice for them to see a graph of how this client is progressing.
The tasks, rather than being scattered around the screen are visible in a task bar below the tab. The main one – Edit Client – covers several of the links indicated in the previous design. New Loan and New Savings are also important enough tasks to call out. The rest of the actions are on a drop-down menu called “Actions”.