Munificence

Donor management made simple, approachable, and fun

Munificence (tentative name) is a digital app that manages non-profit donors and recommends personalized action items to improve organization's sustainability and growth.

With a co-intern, I designed and determined the entire UX and UI of a non-profit donor management app. It not only aims to optimize user experience but also uses donor data to provide personalized insights and next steps.

Munificence heroshot
The Challenge

Software with bad usability hinders non profit's operational efficiency and ultimately their growth and sustainability

Keeping good relationships with donors greatly influences the growth and sustainability of an organization. However, smaller organization leaders in initial research have expressed that existing software is hard to use and thus reduces operational efficiency.

The Solution

Donor management application with optimized UX, clean UI, and personalized action items

Co-intern and I delivered high fidelity mockups for a non-profit donor management application. It optimizes UX by addressing the pain points found in the user research. It also uses donor data to provide personalized insights and action items.

Alleviate customer's current pain points with simplified onboarding

The existing donor management software offered too many features at once. It made customers lost in direction and frustration. Drawing out user flow, we curated a step-by-step onboarding that has only the essentials. Onboarding follows up with a tutorial to ensure guidance. It is yet optional for those who prefer faster onboarding.

Provide data, insights, and action items

What does an organization need and want to know first and the most? Keeping their workflow in mind, we laid out contents of dashboard by:

  1. Where the organization is currently at (Overview)
  2. How they came to this point (Quick Stats)
  3. What is upcoming? What's next? (Suggested Action)

The personalized recommendation feature is this product's key differentiator. It also strives for the overarching vision of supporting the organization's growth.

Munificence dashboard UI
The UX Process

Translate user needs and business requirements into user flow, wireframes, and prototypes

Based on the insights, we drew out user flow to determine screens to create. We met with the client weekly to ensure we are meeting their requirements.

To reduce design cost, we started ideas with sketching and wireframing

This is an early wireframe of Dashboard design

In this iteration, we gave more clear section between overview/visualization, quick stats, and suggested actions. We didn't want our key feature (suggested actions) to buried with the other items.

Defining Visuals

Simple, approachable, and fun

Simple, approachable, and fun while still professional. We defined art direction based on interviews with the client and target customers. We created a mood board and iterated based on the client's feedback. It guided us when we were moving towards the final mockup phase.

Munificence mood board

The Colors

We chose bold and playful colors to create application more approachable.

Munificence colors

Typography

Poppins geometric sans-serif typeface published by Indian Type Foundry. We decided go with this type family because it compliments well with our art direction (approachable and professional) and interface design with its high x-height.

Design System

Documentation for Consistency

Along with style guides, we documented components and patterns to maintain consistency across the application and marketing page.

Munificence text fields style guide
Munificence navigation style guide

Reflection & Next Steps

Final Thoughts

The end-to-end process allowed me to gain perspectives of researcher, designer, and developer. The first time using Angular gave me exposure to modern front-end development.

If I continued this project, I would like to work on:

  • Product strategy: ensuring that personalized recommendation, which is this product's key differentiator, is well and ethically data-driven; example problems to solve include: what kind of personalization are customers most interested? how much data is necessarily to collect?
  • Marketing: answering questions like what's a conversion rate of the marketing website? Does the content make sense to the target customers?
  • Visual design: refining UIs to look better aligned with the art direction, such as giving rounder corners ("approachable" and "fun"), lighter font weight ("simple"), and consistent icon styles.
  • Continuous improvement based on user insights: honing design continuously through user-centered design methodology.

View featured work

Heroshot of GEHC Edison™ Design System project
Edison Design System
Heroshot of Tongle project
Tongle
Heroshot of Munificence project
Munificence
Galaxy whale illustration
Arts & Creative Coding