Founded in 1970, JDRF is the leader in scientific research for Type 1 Diabetes, with over $200 million in annual revenue, and a support network for millions of people around the world.
JDRF Fundraising includes four national events — Walk, Ride, Run, and DIY — each with their own app.
Across the four events, people’s goals and behaviors were pretty much the same: sign up as an individual or team, create campaign pages to collect donations, and share with as many people as possible.
While the in-person experience at these events was world class, the web apps that participants used to fundraise had long been neglected.
I initiated and ran research in close partnership with the PM and engineering lead. I led activities around mapping the current experience, gathering metrics and stories about the challenges our users faced, and developing a hypothesis for what to focus on.
Problem definitions
Of the many issues identified, two stood out as clear priorities. Solving these would lay the foundation for future work, and be the most likely to drive measurable results.
User problem — the campaign pages are outdated and difficult to work with, frequently requiring customer support to resolve issues.
The campaign pages had an outdated design.
Users frequently needed help adding photos to their page.
Editing text was challenging, especially on small screens.
Business problem — maintaining separate apps for each of the fundraising events is expensive, causes confusion for people involved in multiple events, and prevents us from delivering new value quickly to all users.
Each fundraising event had created their own version of common styles and components.
If people can easily create beautiful campaign pages, they’ll be more likely to share them, resulting in increased donations.
Campaign Shared was our north star metric, and we bet that if people were proud of the way their campaign pages looked (and could use the tools to set them up properly), they would share them with a broader audience.
Create a single unified app to replace the four existing apps, with a focus on creating and editing campaigns for the first milestone.
I started with the screen central to our hypothesis, going wide and exploring dozens of concepts before selecting a few favorites to review with the team.
We discussed priorities, trade-offs, and the scenarios we thought certain concepts might start to break down.
We converged on the option we thought best highlighted their story while nudging people toward making a donation, and taking into consideration the patterns our users were most familiar with.
Next, I made some lo-fi prototypes so we could discuss different interaction models for page editing.
Fast to edit multiple items.
Clean UI when not editing.
No preview for how the content will appear.
Always visible edit buttons are clear and obvious.
One dialog at a time provides space and focus to edit.
Busier UI when not editing
Clean UI when not editing.
One dialog at a time provides space and focus to edit.
More complicated user flow
The team aligned on a direction, and we set out for more rigorous usability testing with active fundraisers.
Using Mixpanel, I identified people that had recently edited their pages to get a representative group of users. Meanwhile, the engineering lead had built a prototype that could pull in live user data.
Before we ran the usability studies with customers, we first did trial runs with JDRF staff. This helped build trust with stakeholders, and smooth out any kinks in our study.
The tests were a success:
100% task success — users were able to easily complete page editing tasks that had previously caused issues.
Glowing feedback — both staff and users kept asking when the new designs would be available.
With the value risks and usability risks tackled, I got to work on final visual design and documentation.
The PM, engineering lead, and I were a tight knit team. We used regular retrospectives to continuously refine our approach to meeting cadence, written docs, QA, and other aspects of staying organized during delivery.
Sample documentation for various application and user states.
We used Optimizely to launch the new campaign pages as a series of experiments. The results provided strong evidence that our hypothesis was correct and we were on the right track.
6% increase in revenue
30% increase in campaigns shared
Significant decrease in customer support cases
Plus, we had a single codebase for all four events:
Unified experience for users
Reduced maintenance costs
Faster development cycles
Patrick McKowen · 2023