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.
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.
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:
- Where the organization is currently at (Overview)
- How they came to this point (Quick Stats)
- 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.
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.
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.
We chose bold and playful colors to create application more approachable.
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.
Documentation for Consistency
Along with style guides, we documented components and patterns to maintain consistency across the application and marketing page.
Reflection & Next Steps
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.