Rotary International: UX & Design Workflow
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.
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.
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.
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"
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)
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.
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 a one-time or recurring donation
Dedicate a gift in honor or memory of someone
Notify someone of a dedication via e-card
Give on behalf of a Rotary club or its members
Give as a guest or signed-in user
Review donation summary prior to submission
Receive immediate, detailed confirmation of donation
Self-service recurring donations via MyRotary profile
