An Internal Dashboard for MEVO
The purpose of this case study was to showcase my process in developing a responsive dashboard to help a local non-profit manage its income and expenses steams through a centralized platform.
Introduction
The Mahwah Environmental Volunteers Organization (MEVO) is an environmental education non-profit that has been active in Northern New Jersey since 2008.
MEVO generates revenue from a variety of sources, from farmer’s markets to foundation grants, but does not have a central source to manage its finances.
How Might We-"Create a Responsive Dashboard for an Environmental Non-Profit?”
Project Goals
Create a dashboard that will act as central repository of all of MEVO’s various financial activities, including both income and expense generating activities.
The purpose of this dashboard would be to inform MEVO’s operational and financial strategy
User Research Goals
Identify how the MEVO staff currently goes about tracking it’s financial activities:
Identify how MEVO classifies its income and expense streams
Identify the main use cases MEVO “power users” would want to perform using the dashboard
Understand how financial data informs MEVO’s decision making
User Research Objectives
Review a set of best practices for designing dashboard UIs, in addtion to conducting the following steps:
A competitive analysis of small-to-mid-size accounting software providers to see what common features they offer to their users.
Identifying the MEVO “power users” who currently monitor MEVO’s financial health and various financial activities.
Research and Analysis
I wanted to understand what MEVO’s stakeholders wanted most in a dashboard as well as what design patterns existed regarding income/expense management software used by small to mid size businesses.
Understanding the Dashboards That Are Out There
I researched dashboards associated with accounting software for small/medium size businesses (SMBs), as part of an initial competitive analysis.
I chose this group of competitors because MEVO is a non-profit whose organizational structure and needs closely match that of a small business. I believed the majority of the design patterns found for SMB software would easily apply to the potential MEVO dashboard.
The following common features were present in the various dashboards:
Being able to “tag” transactions with a specific income/expense category
Integrating the dashboard with bank statements and other payments sources like Square and PayPal
Default visualizations that broke down expenses in a color-coded way
A set of default reports that SMB owners could utilize
UIs designed for the purposes of being interactive
Understanding How MEVO Staff Would Use a Hypothetical Dashboard
User research was then conducted, in the form of one-on-one interviews, on the specific set of “power users”, in this case MEVO staff members, who would be utilizing the proposed dashboard.
Participant Demographics
The current MEVO executive director
The current and former MEVO Treasurers
Participant Goals for a Dashboard
The participants all wanted the ability to classify MEVO transactions according to different income/expense categories.
The participants all wanted to have a more centralized source of information to track income and expenses.
The executive director wanted the ability to use the past data to inform her future strategy efforts for MEVO.
Participant Paint Points for a Dashboard
The participants were concerned whether the accounts receivables and accounts payables could be reconciled with each other.
The participants also worried about potentially missing or misreporting a key MEVO expense.
Organizing the Information
The research information was synthesized through a sitemap, and a set of proposed features were defined based off the user stories.
Defining the Structure of the Dashboard through a Sitemap
Based off the discussions with the MEVO staff, a sitemap was created to help organize the information generated by the user interviews into an initial wireframes.
The sitemap consisted of the following areas:
A MEVO Finances Page
A page to capture Volunteer Engagement
A page to capture MEVO Donor Engagement
A page to capture analytics on MEVO programs
A page to process data management
User Stories and Task Flows for MEVO
I proceeded to create a series of user stories and a hypothetical task flow for MEVO outlining the features the user would expect to have using the website. The user stories and navigation flow were based on the MEVO sitemap, and on the user interviews.
Sketches of MEVO Dashboard
Based off the user flows and the site-map I developed, I proceeded to create a series of sketches.
After reviewing the user flows I wanted to create for the MEVO Dashboard, as well as a sitemap of what the dashboard consisted of. I proceeded to create a series of initial sketches that would serve as the basis for my low-fidelity and high-fidelity wireframes.
The image to the right shows sketches of the initial frames for the MEVO Dashboard.
A Sample of the Initial Low Fidelity Wireframes
Based off the user research, I created an initial set of low-fidelity wireframes for the MEVO Dashboard. Below is a sample of one of these wireframes.
Display of Wireframes
Based off the User Research, I created an initial set of wireframes that was presented as a prototype to MEVO Staff.
The initial screen MEVO staff would see as they entered the dashboard, with the ability to view aggregate income and expenses for the year
The dashboard that would be presented to MEVO staff for them to view and review various sums related to specific income or expense categories.
This screen would present the filter pop-up box that would be applied to MEVO transactions.
MEVO staff would have the ability to classify “uncategorized” transactions as falling within a set of predefined income categories such as “Farmer’s Market” or an “Educational Workshop”.
This screen would present the filters that the MEVO staff could apply to the dashboard, in order to view the dashboard for a specific set of criteria.
This wireframe would show the result of a filter being applied for a specific set of criteria. A corresponding data visualization would appear as well.
Usability Testing
After the wireframes were created, they were tested on MEVO staff to confirm the dashboard had the needed functionality.
“Does this Dashboard Make Sense?”- The Goals of the Usability Tests
A series of usability tests were then conducted on the dashboard wireframes that were created, with the following objectives and methodology.
Objectives
Confirm if users are able to perform the basic functions on the MEVO Dashboard that were outlined within the wireframes
Confirm use cases for MEVO Dashboard are relevant for the MEVO staff
Identify pain points in completing the proposed tasks
Methodology
In-person, 1-on-1 tests
A scenario was presented and it was observed how the user would attempt to complete the task.
Notes and audio were recorded as appropriate and permitted
Participants
MEVO Treasurers responsible for reviewing finances
Three “casual” users who analyzed the prototypes
What Was Found Out From the Usability Tests
The results of the usability tests were as follows:
Users Liked
The intuitive user flow for both prototypes
The dashboard had relevant information
Clear UI with sharp contrasts
User Pain Points
Detailed transaction information was not relevant to MEVO’s needs
The staff wanted to see all steps in the filtering process
Confusion about what certain sub-elements of the infographics meant
Miscellaneous Comments
Terms used in dashboard were very technical
Didn’t adhere to dashboard conventions
How did classifying the transactions work at a large scale, say for hundreds of transactions?
Final Results
The wireframes were revised and updated, based on the findings that came from the usability test results.
The Finalized Prototype—The Changes Made from the Usability Tests
The color palette for the MEVO prototype was revised to be monochromatic, and the use cases were narrowed to just focus on applying filter to the initial dashboard page. The dashboard design was also refined to better adhere general dashboard design patterns.
Below is the link to the animated prototype:
The default “Total Income” screen a MEVO user would look at using the dashboard.
The default “Expense” dashboard a MEVO user would see.
The filter modal with all of the categories selected.
The filter modal with some of the categories unselected.
Example of filtered category results.
Further Actions
After the updates were completed, a set of further actions were recommended.
What’s Next for the MEVO Dashboard
A second set of usability tests should be conducted with the MEVO Executive Director and Board Members to confirm the revised dashboard UI matched the needs of MEVO.
On a longer-term timeframe, the revised prototype will be used as the basis for a customized MEVO dashboard that would be developed.
Lessons Learned
The learnings from the dashboard project were as follows:
Be careful of over-designing features for the users, as they might not need all the functionality that your are proposing
Make sure to leverage design patterns from existing products (i.e. accounting software for small/mid-size businesses)
Dashboards should have a monochromatic style, since they are being used for a utilitarian purpose
