It’s not every day a client entrusts us to redesign a $100 million dollar form. But the Leukemia & Lymphoma Society knew they had to do something to fix their donation forms. They were fielding phone calls from people angry because they couldn’t give LLS money.

One of the prospective donors was particularly upset, and I empathized with him. I lost my father 2 years ago this month the Leukemia. There wasn’t much I could do to help my father fight blood cancer, but one thing I can do is fix a broken user interface.

To guide this endeavor, I wrote a manifesto to address people’s frustration with the existing form:

Looking at page 3, On Your Terms, what were our options? Mobile Optimized Sites or Responsive. Learn more about these two strategies.

It was a hard decision. Ideally, we should have probably created a mobile optimized form that had half as many fields, but the organization wasn’t ready to ruthlessly edit their form donation yet. And our first version was just a “fast-fix”, planned for 30 days from start to launch. No back end code changes, just UI changes. So we went with Responsive, meaning we designed the form to work well on any sized screen, from a desktop browser to a mobile phone.

The forms were developed with:

• HTML
• jQuery
• CSS3
• CSS3 media queries
• SASS

And tested on:

1. Desktops and Laptops- Firefox, IE, Chrome, Safari
2. Apple iPad
3. Samsung Galaxy Tab
4. Kindle Fire
5. Apple iPhone
6. Samsung Galaxy III
7. Google Nexus
8. HTC Window Phone
9. BlackBerry Torch

(Thanks to Mudassir for pointing out that my earlier phrasing was incorrect- we didn’t target these devices, just tested on them. )

The final result is available at LLS.org, and it can also be accessed by donating to individuals participating in Team and Training and Light The Night.

We’re still working on these goals: Fast, Respectful, On Par…, and Helpful, but we’re getting there, and this is a big first step.