Donation Marketplace Solution (Spring 20)

Designing a centralized web-platform for users to make donations and purchase nonprofit merchandise online.

DMS login page mockups

About Project

DMS login mockups

DMS is a centralized donation platform that would allow users to make donations or purchase merchandise to support an organization's cause. The nonprofits' representative(s) are enlisted as admins within the application and can see the transactions associated with their particular organization via the admin dashboard. The system is intended for smaller nonprofits which usually find it hard to manage their sponsors.

DMS thumbnail

Our Client


This is our first partner in building our general solution. Hearts2Hearts started 4 years ago with high school student fundraisers to support an orphanage in China. They openly help the orphanage with many needs, and during summers visit the orphanage to conduct camp-style activities with the children for a week. Since their inception, they have expanded to support a second orphanage, a very remote school, and 5 remote classrooms in China.

Our Process

Product Scope

Client Goals πŸ₯…

Nonprofit clients are able to use this platform to manage and track incoming donations. With a user account, they are able to edit donation pages according to their specific organization and can easily view inventory and transaction history on a dashboard. This donation system will be linked to the nonprofit's individual website.

End-User Goals ⚽

End users are able to quickly browse various nonprofit organizations and make donations or other purchases through a single online platform. We wanted to reduce the number of pages between the home page and the donation page.

Technology πŸ’»

We used the NextJS framework, which runs on ReactJS and ExpressJS + MongoDB to build an efficient full-stack web application. We also introduced TypeScript to log all of our database models for an easier developer workflow.

Our Solution

Key Features

Donation Page

Nonprofit Clients are able to customize donation pages with descriptions and a color scheme to match their organization. End users will easily be able to make a donation as well as visit the Donation Marketplace homepage at the end of the transaction.

Mockups for DMS login and donation dashboards

User Flow 🌊

Nonprofit clients will be able to set up a custom donation system, reachable through links on the nonprofit's website or directly from the Bits of Good home page. You can view the onboarding user flow below for both nonprofit admins and donating users.

DMS userflow diagram

Our Team

Reflection πŸ’¬

It was really rough at the start defining the product or imagining how it was going to be like. We had to figure out how to make the platform both general for all the nonprofits but at the same time design a product that wasn't generic such that the individual nonprofits lost their theme. After we figured that out, the technical aspect of was still tough. The team was amazing though and pulled through with an awesome MVP!



"I love this team. This was my first experience as a PM and I'm glad I had it. These are some of the smartest people I've ever had the pleasure of working with and I will really miss them."



"This was my first semester at Bits of Good and I enjoyed working with a team of students passionate about social good and technology. Since I was more experienced and the only grad student on the team, I liked being a mentor to some of the junior devs. A huge shout out to all the devs on my team who put up with insistence on using TypeScript. πŸ˜‚"



"Being on DMS was an amazing learning experience for me. I was initially nervous for my first semester on a project as a junior developer, but my teammates were excellent mentors, and I was able to learn a ton of new skills. Everyone on my team was extremely motivated and talented. I am very happy to have been paired with such a great group of people."



"I had such a great time working on this team. This was my first semester with BoG and I definitely learned a lot, not only about design but also about teamwork and the development process. The DMS team is incredibly smart, talented, and hard-working and I've really enjoyed working with them."