name
back another

Perks at Work Fundraising

Perks at Work, Next Jump

Spring 2020

A fundraising platform built during COVID-19 to send supplies to NYC hospitals.

The impact of COVID-19 has been felt worldwide, one of the hardest hit being NYC -- this past year has been my first time living in such a densely populated, diverse area, and the effects of the pandemic locally has been difficult to watch. With hospitals overwhelmed, Next Jump decided to push for a pro bono initiative to raise funds to build care packages for frontline workers.

I served as the UI/UX designer to build a fundraising platform. Since April this year, our platform has raised over $180k in the US and over £40k in the UK.

The Final Prototype

The high fidelity mockups and prototype can be found below. Keeping scrolling for the process!

If the embedded experience does not work for you, you can find the prototype here.

The Beginning: How Do We Best Help Hospitals in Need?

Next Jump runs an e-commerce platform with corporate clients and merchant partners and over 70 million unique users on the site. We were able to leverage each of these angles to 1) understand what hospitals needed most from our corporate contacts at NYC Health + Hospitals, 2) ask our customer base to help us fund care packages with those items, and 3) utilize our merchant contacts to organize order fulfillment and send these packages to the hospitals.

With our NYC Health + Hospitals contacts, we identified two of the hardest hit local hospitals: Elmhurst & Kings County as well as the items they needed the most. Beyond personal protective equipment, their greatest needs were laptops & tablets, clothing (like scrubs & towels), and snacks.

A breakdown of hospital needs beyond PPE

We focused on the biggest and smallest ticket items (electronics and snacks) due to our existing relationships with the merchants that sell these items.

Wireframing

I looked into GoFundMe as our primary inspiration for this platform. GoFundMe is already a successful fundraising platform, so it made sense to look into their structure and determine what elements we could pull.

A screenshot of an individual fundraiser's page on GoFundMe. A lot of the structure of my wireframes and final mocks were from this platform because of the closely aligned goals.

There were, however, some differences. The most important requirements for the Perks at Work platform were the following:

I mapped out a comparison between the two platforms to get a better idea of where they diverge.

A comparison of GoFundMe features and the Perks at Work platform needs

With this in mind, I created the following wireframe for an individual hospital, adopting GoFundMe's right sidebar highlighting overall progress and activity feed, keeping the primary call to action visible at all times. I used the left side of the screen for breaking down the details and specifics for each fundraiser, including the breakdown of progress for each item funded.

The initial page wireframe

Clicking the "contribute" button would open a modal that allows customers to choose their contribution amount (fixed amounts due to tech constraints) and add a personalized message. Typically our purchase flow would bring customers to an item description page. However, we didn't want the experience to feel like a purchase rather than a donation or contribution, hence our decision to keep customers on the same fundraiser page and implement a modal instead.

Wireframe of the purchase modal

The rest of the purchase flow adopted our existing cart experience, with a new item icon and messaging unique to this platform.

Adding to the cart & our existing purchase flow

Iterating to the Final Product

After handing off initial wireframes and higher fidelity mockups to the engineers, we pushed out a version of the page very similar to the initial wireframe for our initial sprint. Our MVP included only funding individual items and the activity feed. We launched only for Elmhurst and Kings County Hospital. Donations began streaming in, and we began thinking about how to answer the question, "What happens after I donate?"

We looked to Kickstarter here. We wanted to keep attention on the details of the fundraiser, but still showcase updates (and potentially more information in the future) on the page. Their tab navigation was a good solution to our problem.

A screenshot of a Kickstarter page showing the Updates tab.

We adapted their Updates tab and navigation to highlight milestones (e.g. "Tablets completely funded!"), progress on fulfillment, and updates directly from the hospitals.

The updates tab

Our client success team was also very quickly expanding to several more hospitals. Thus, we needed to create a page to allow discovery of the breadth of offerings as well as an avenue for the community to nominate their own local hospitals.

The listing section & entry point for the nomination form

Our final individual hospital page mockup also had a larger focus on telling the "story" for each hospital, adding more individualized details about the hospital.

A final mockup
Interact with the Prototype

Looking to the Future

Within the first 48 hours of launch and very little marketing, the platform raised almost $90k for Elmhurst and Kings County Hospital. I was blown away by the customer response to our initiative!

Our team is looking to expand our impact, so we've connected with local schools; many students do not have access to personal laptops or tablets to access online learning easily. Our next goal is to provide these children with the tech they need to continue their education online.

In the future, I hope to further explore post-fulfillment messaging, both on the platform and working with our email marketing team in order to better connect the donors and healthcare workers and students.

back another

more projects