Donor management made simple, approachable, and fun
Munificence heroshot
Munificence (tentative name) is a digital app that manages non-profit donors and recommends personalized action items to improve organization's sustainability and growth.

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.

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 action items.

Simplified onboarding

Alleviate customer's current pain points

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 better guidance. It is yet optional for those who prefer faster onboarding.

Munificence onboarding UI pt 1
Onboarding welcome page. It's optional in case people want to play around the software.
Munificence onboarding UI pt 2
Onboarding pt. 1 Importing donors fasten people transitioning from their existing software
Munificence onboarding UI pt 3
Onboarding pt. 2 Inviting members to set up an organization faster
Munificence onboarding UI pt 4
Onboarding pt. 3 Inviting to tutorial guides customers how to use an app without abandoning them. It is optional and accessible via top menu.
Munificence onboarding UI 2
Tutorial welcome page. Customers can follow along and learn about the software. They can also skip if they want to.

The Dashboard

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

Usability study

Validate design assumption

We tested our ideas through a usability study with customers in our target domain. We collected not only their survey responses but also their behavior interacting with a prototype to capture potential latent insights. We analyzed and iterated our design based on our study.

Munificence usability research protocol overview
Snapshot of usability study kit. It outlines a study protocol and contains resources needed for the study (ex. consent form; questionnaires)

Simple, approachable, and fun

Develop art direction

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 snapshot
Snapshot of the mood board depicting "simple, approachable, and fun"
Munificence marketing page
The marketing page

Design system

Maintain consistency

My team also documented styles and interaction of components and patterns used in the app. Documentation ensured that we used consistent styles across the app and marketing page.

Munificence style guide: colors
Munificence style guide: the colors
Munificence style guide: text fields
Munificence style guide: text input fields
Munificence style guide: navigation
Munificence style guide: navigation
Munificence post-logout UI
Creating the approachable and fun vibe throughout the user flow 🌴

Final thoughts

Reflect & move forward

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:

‍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.

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?

Continuous improvement based on user insights: honing design continuously through user-centered design methodology.

Marketing: answering questions like what's a conversion rate of the marketing website? Does the content make sense to the target customers?

Documentation: expanding and maintaining style guide / design system.

View featured work

Heroshot of GEHC Edison™ Design System project
GE Healthcare Edison™ Design System
GEHC Edison™ Design System UI kit cover light theme
GE Healthcare Edison™ UI Kits
Heroshot of Munificence project
Heroshot of Tongle project