Shin Young Lucia


Digital Product, Web Development

Donor management made simple, approachable, and fun

cover of Munificence

Munificence is a digital app that manages non-profit's 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 reducing 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 next steps.

Simplified onboarding – alleviating target customer's current pain points

We noticed that 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.

Donor management app onboarding welcoming
Onboarding welcoming page
Donor management app onboarding pt. 1
Onboarding pt 1. upload existing data
Donor management app onboarding pt. 3
Onboarding pt 3. invite to tutorial (Optional)
Donor Management App marketing page
Tutorial welcoming page. (Optional)
Donor Management App marketing page
Tutorial end page.

Dashboard – providing 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.

Donor Management App marketing page
Sample dashboard view

Usability study – validating 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.

Overview of usability study plan
Usability study kit overview

Simple, approachable, and fun – developing 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.

Product moodboard
Donor Management App marketing page
Donor management app marketing landing page

Design system – maintaining 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.

Donor Management App style guide: colors
Style Guide: Colors
Donor Management App style guide: Textbox
Style Guide: Text input fields
Donor Management App style guide: Masthead and Navbar
Style Guide: Masthead & Navbar

Moving 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 the personalized recommendation feature. As it is the product's key differentiator, I want to strengthen and ensure it is well data-driven. Aside, I would continue honing the product's visual, interaction, and style guide documentation.

Munificence logout screen
Creating approachable and fun vibe throughout the user flow 🌴