Rotary International: UX & Design Workflow

24 Jul 2018

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.