Mifos – Community for Open Source Microfinance

Mifos Logo

Accomplishments

The Scenario

VMware offers a 3-month working sabbatical to long-term employees.  After participating in a “design-a-thon” that Ideo.org hosted at VMware to improve sanitation in Ghana, I researched other opportunities for design in technology-based community service projects.  I chose Mifos, an open-source software platform for microfinance.  Mifos software was originally built for Grameen Foundation and in 2011, became part of what is now the community-led Community for Open-Source Microfinance (COSM).

The Problem

Mifos was originally designed around the Grameen microfinance process, for which Muhammad Yunus and Grameen Bank won the Nobel Peace Prize in 2006.  With Grameen’s success, the field of microfinance grew, and with it, the needs of the communities it serves.  While microfinance institutions (MFIs) in India and Bangladesh strictly and successfully follow the Grameen process, other communities in South America, the Philippines, and Africa, wanted more flexibility and functionality from Mifos.

When I began working with Mifos in March 2013, they were in the process of redesigning the back-end architecture to include accounting as well as to make the platform more flexible.

What I Explored

I spent the first two weeks learning as much as I could about the field of microfinance, the history of Mifos, and using the existing Mifos software.  I designed a set of questions to ask current users about their experience with Mifos and did 5 phone interviews with MFIs in the Philippines, Lebanon, India and Kenya.  Then I travelled to Bangalore and Nairobi to visit several MFIs and see their day-to-day operations.  It wasn’t until I saw these operations that I fully understood how different the India and Kenya operations are, or the adversity they sometimes deal with like power outages and low-bandwidth Internet connections.

Armed with this information, I came back to the US and wrote a user research report detailing the user feedback.  I then spent the next 6 weeks mocking up several design options to review.

This work – mockups and research – can be seen here on the Mifos Development Wiki.

The Solution

The biggest change I made to the Mifos UX was to introduce the concept of a user or login-based dashboard with portlets containing large text or graphics calling attention to particularly important information for a given user.

Dashboard Design

Mifos Home Page Redesign

In the original design, there is tab bar across the top to navigate to major regions of the UI, a left navigation bar guiding the user to common tasks, a dashboard on the right, and the main content region is used for an explanation of how to navigate.  Additionally, there is a lot of white space in this home page that is left unused.

Mifos Dashboard Orig

Mifos Original Home Page

I reasoned that the explanation on how to navigate could be relegated to help or tooltips (as once this is learned it is no longer needed), freeing up the content region for much more relevant information.  The dashboard is very relevant, and I found in my usage that I tended to use the dashboard much more than the left nav bar to get around the system.

While very important and relevant, the dashboard is not particularly visible in it’s position on the right and it’s small text.  I thought it would be much more useful to expand this dashboard to take up most of the space, making some text much larger and making links to other regions easily clickable.  At the same time, this dashboard should be specific to a given user.  For example, the branch manager needs to know about loans awaiting approval, but loan officers don’t since they can’t approve loans.  (I learned from users that often branch managers don’t approve loans in a timely manner because they don’t see that the task needs to be done.)

During a design review, the users were very pleased with the dashboard and the other visual changes, but expressed dismay that the left nav bar was gone.  It seems that, while this is not the most efficient way to drill down into the details, it is familiar to the loan officers and they know how to use it.  The reviewers were concerned that the dashboard interface was too different and would be more difficult to learn than they hoped.

So I went back and added the left nav bar back in, but as a sliding “drawer” that pulls in from the left and can be collapsed back to a simple “expand” handle.  Note that the port lets on the dashboard rearrange to 2 columns to fit task bar.

Dashboard w Task Bar

Dashboard with collapsible task bar

When the task bar was collapsed, an expand “handle” appeared on the left.

Dashboard w Task Bar Collapsed

Task bar collapsed with expand “handle”

Mobile Design

This design was also translated to mobile, keeping in mind the needs of users in the field (creating new loans, entering collections, and adding new clients rather than administrative tasks done in the back office) and the abilities and limitations of responsive design.

Mobile Images

See all mockups for this project on the Mifos wiki.

This was a good solution because:

  • It provides more information at a glance at the top level
  • Has more touch points to drill down to specific details
  • Still provides some familiar components (top tabs, left nav bar, detail pages not too different) to reduce relearning for loan officers

Big Realization:

It’s very important to be cognizant of the needs of different types of users.  While all designers know that we are not the user, as a designer dealing mostly with high-tech companies, it’s all too easy to fall into the rut of believing that our users are just like us (because mostly we are dealing with similar problems).  But when faced with users in developing countries it becomes clear that there are differences.  These users are not tech-savvy or well-educated and they often have to deal with power outages and low-bandwidth Internet connections.

Future:

While my Take 3 sabbatical ended in June 2013, I have continued to work on design updates and guidelines for future design, including the mobile mockups.

© Copyright 2011-2013 - Deanna McCusker