The 100 Million Dollar Form Redesign: A Responsive Solution


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:

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.

October 19, 2012 · Tagged with · By Theresa Neil

6 Comments

  1. Mudassir Azeemi Said,

    October 19, 2012 @ 2:43 pm

    Hi,

    A quick question, why you guys chose the “Devices” instead of “Viewport”? Any specific decision factor that leads you guys to chose the Responsive Design decision on the basis of “device” instead of “viewport/breakpoints” ?

    Take Care,

    Mudassir

  2. UI Does Matter!» Blog Archive » The 100 Million Dollar Form Redesign: A Responsive Solution Said,

    October 19, 2012 @ 2:45 pm

    [...] via The 100 Million Dollar Form Redesign: A Responsive Solution. [...]

  3. Kirk Said,

    October 20, 2012 @ 11:46 am

    I’m curious – why are you using a CAPTCHA on the donation form? I would have thought that use of a credit card would be enough of an anti-spam measure, and that the CAPTCHA could potentially turn away donors.

  4. Theresa Neil Said,

    October 21, 2012 @ 1:12 pm

    Hi Kirk, I asked the same question when we were working on this. Apparently there are major problems with fraudulent donations, so we have to verify the donor is human. Bots can easily generate credit card information, but not pass a CAPTHCA test. However, we did try to improve the UX around the CAPTCHA control. The old one was almost indecipherable, whereas the new one is easier and mobile optimized. And we are hoping to add a audio reader to it in the future.

  5. Theresa Neil Said,

    October 21, 2012 @ 1:24 pm

    @Mudassir
    Good catch, I updated the article to explain we tested on these devices.

  6. Kirk Said,

    October 21, 2012 @ 6:00 pm

    @Theresa, thanks for the answer – had no idea that was a problem.

Trackback URL