Rotary International: UX & Design Workflow

Rotary International recently unveiled its new online donation form, used by tens of thousands of people each year to donate to the charity. But calling the finished product a form is like calling the royal wedding an elopement. Amazee Labs Austin partnered with Rotary and RaiseNow to deliver what can only be described as a dynamic online giving application—sweeping, yet nimble, and easy to use.

Ensuring an application of this magnitude is easy to use is, well... not easy. In order to get the most out of our users (no pun intended), we define and adhere to an efficient UX and design workflow. To best explain our approach, let’s look at an example of how a feature—choosing an amount to donate—makes its way from define to design.

1) Define

The first step is to define what the feature does, in simple terms. Getting the right people in the room is crucial—movers, shakers, decision makers. Together we agree to the functionality:

  • Users choose a suitable country and currency in which to donate
  • Users choose from a list of preset amounts or give a specific amount not listed

2) Sketch

Based on requirements, best practices, existing examples, and experience, we sketch an interface. The sketch suggests layout, order of operation, form elements, and copy, but not design. At this early stage, it’s important that form not interfere with function.

Choose an amount sketch

3) Review

With sketch in hand, we meet again with stakeholders. This review answers two important questions. First, have we correctly translated requirements into product? Secondly, are there requirements that weren’t considered in the hypothetical? It’s amazing what comes to light when there’s a sketch on the table.

We discuss removing numbers from the stepped donation process (a), adding a preselected donation amount (b), and including the US-dollar equivalent beneath donations made in foreign currencies (c). This is because Rotarians, in their quest to level-up, are credited in US-dollars not their currency of choice.

Sketch with requested changes

4) Prototype

Next, we roll the sketch and its feedback into a clickable, functional prototype. The more function the better, we want our testers to poke holes in a product as close to the real thing as possible. UXPin offers a powerful tool with which to craft some seriously complex prototypes. 

prototype animated gif

5) Test

Everything we’ve assumed to this point is put to the test, at the hands of users in the real world. Our testers are Rotarians on a spectrum of proficiency in a web browser and also in their understanding of Rotary as an organization.

The test itself is administered remotely with a screen sharing app, recorded, and moderated—we ask the users to perform a task and think aloud as they work. We give little or no direction and try to stay objective, as hard as it may be. The test concludes with gathering general feedback from the user—how was your experience, how would you improve it?

6) Report

Several tests are needed to compile meaningful results. One user’s experience doesn’t typically affect change. But recurring behavior in three or five tests is considerable. Here’s what we find:

  • Users don’t understand the preset amounts are selectable
  • Subsequently, users type their desired amount in the Other amount field, even if that amount is offered above as a preset
  • Users aren't sure what is meant by "Recognition amount in USD"

animated gif of tester

The above animation is a reenactment, created to protect the identities of the innocent.

7) Design

If user testing reveals we’ve missed the mark, we can opt to do another round of testing with a reimagined prototype. In this case, we move straight into visual design, coupled with making these improvements:

  • Add radio buttons, a familiar form element, to the preset amounts
  • Make certain the preselected amount appears selected by introducing a bold blue background color
  • Make giving a custom amount a more deliberate action by adding a fifth option, Other, which reveals the Enter other amount field
  • Add help text to recognition amount in the form of a tooltip (i)

finished design animated gif

Repeat

Once the feature has gone through the UX and design workflow it moves on to development. We grab another piece of the puzzle and the process starts again with defining the feature. 

process graphic

The process takes about a month per feature, or two sprints. After 16 months of continuous work, we've delivered the royal wedding of online donation forms.

 


 

Feature list

Give to featured funds, endowments, or grants

Give to funds screenshot

Give a one-time or recurring donation

recurring donation screenshot

Dedicate a gift in honor or memory of someone

Dedicate gift screenshot

Notify someone of a dedication via e-card

E-card notification screenshot

Give on behalf of a Rotary club or its members

Give on behalf screenshot

Give as a guest or signed-in user

sign in screenshot

Review donation summary prior to submission

Review modal screenshot

Receive immediate, detailed confirmation of donation

Confirmation page screenshot

Self-service recurring donations via MyRotary profile

Self-service screenshot

July 24, 2018
Tags
1 Comment

Get our Newsletter

 
 

Comments

A well written article!

By John Taylor
4 months ago

Add new comment

You must have Javascript enabled to use this form.
icon
What is Amazee Labs?