Down and Dirty with Design – Part I

For the past few weeks, I’ve been delving deeply into design.  (And realizing there is so much more I want to do than I have time for with just two weeks left on this project!)  I also haven’t been blogging much about the design because it’s hard to explain with just a few select screenshots, but I’ll give it a go.

Dashboard (Home Page) Design

First, the original home page…

Mifos Dashboard Orig

The original design has a set of tabs across the top to get to various regions of the application.  It has a Quick Start menu down the left side to get to common tasks.  The central content region is taken up by navigation instructions, which is probably not the best use of this space, considering that once a user learns the navigation model, it is no longer necessary.  (Note the search bar below the navigation instructions.)  And a dashboard was added later to the right side.  It turns out that this dashboard offers quick links to some important tasks that otherwise are somewhat hidden, such as Loans Waiting for Approval.

My proposed design…

Dashboard Design

In the new design, we kept the tabs across the top – this is a good way to navigate to the main regions of the application.  We put the search function into this tab bar, so it’s now in a more standard location and doesn’t take up so much space in the content region.  Which leaves the content region available for some rich content.

I thought it would be a good idea to add some “portlets” with some very visible and more graphical information.  One of the items of feedback I got from users was that it was easy for the branch manager to forget to approve loans because they weren’t so visible.  What if we put this information up front for this user with a big number indicating how many loans are awaiting approval?  I added a To-Do list and a portlet showing a list of clients that are in arrears and probably need some personal attention.  The delinquency percentage is something very important to managers, so lets make that number large and show whether it is increasing or decreasing.

The bottom row shows three portlets with progress bars indicating various tasks that are goal oriented – collections that are accounted for daily, how much the branch portfolio is worth and how many new clients are still needed to reach a monthly target.  Showing these as progress bars has the effect not only of quickly indicating current state, but also of encouraging the user to take steps to complete the tasks.  These are just examples of the kind of data that could be shown in portlets.  Which of these portlets are shown for a given user could be configured by the systems admin or by the user themselves (assuming they have permissions for that data.)


One thought on “Down and Dirty with Design – Part I

  1. Down and Dirty with Design – Part II – Deanna's Take 3

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