Down and Dirty with Design – Part II

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.

Client Page

This is the original client page in Mifos…

Mifos Client Page

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…

Screen shot 2013-06-11 at 8.15.15 PM

  • 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”.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s