KUOW Donation Form
What was it?
KUOW is a local NPR radio station. Moby was contracted to redesign their website starting with their donation form.
Problem statement
The form was creating user confusion and failed to make a compelling "sell" for donating to KUOW.
My Role
Concepts
Client presentation
UX design
Wireframes
Visual design
Responsive web design
Icon design
Prototyping
Asset export
Design QA
Important contributors
Josh Leitzel: Software Engineer
Tara Ward: Project Manager
Making the case
The main goal of this project was to improve the donation “sell”. The form layout and share content relied on gifts. However, KUOW research shows supporters donate for the mission, not to receive gifts. I wanted to emphasize the company mission to drive donations. But that wasn’t the only thing to improve on the form…
The original donation form
A check-in with support revealed…
The monthly donation UI confused the users.
The “make this donation monthly” checkbox was consistently over-looked. Sometimes supporters would accidentally sign up for monthly donations at huge amounts.
No variant support for prizes.
Each size or color variant had to be listed as a separate prize.
Users could not dedicate their donation.
They would use the comments field to dedicate their donation in honor or in memory of someone else.
Clear control
Number one in my mind was making sure donors understood the kind and amount of their donation. I replaced the checkbox with a large tab that defaults to single donation. A donation summary follows users down the page as a reminder.
Sketches of the donation form.
Sketches of the thank you page post-donation.
Impact giving
The first up-sell of the page is the mission section. This was specifically designed to make content creation easy for KUOW and easily digestible for donors. This section introduced the concept of donation levels based on the services KUOW provides.
Functional gifts
After the mission section are the gifts. The form clearly displays which gifts can be acquired at the current donation amount, while easily allowing donors to upgrade their amount to unlock new gifts. It also provides size and color selection to support t-shirts.
Monthly call to action
The final up-sell comes after the gifts. If the donor is making a single donation they see a CTA asking them to upgrade to a monthly donation.
Wireframes for the donation form.
Wireframes for the thank you page.
Applying the new style guide
The brand style guide paired abstract textures next to street photography. I took those textures and used them as design elements throughout the form.
The focus on a younger audience also allowed me to take some risks and have a point of view by using an asymmetrical design that translates into mobile.
The form has many moments of whimsy hidden in it. We know donors will often misuse the inputs to dedicate donations to other people or even their pets. I added a dedication input and a sticker carousel that allows donors to select a custom background that reflects their reason for dedicating their donation.
Page before form is expanded.
Page after form has expanded.
Thank you page post-donation.
Check it out
It’s changed a bit since the original design, but you can still check out the donation form and see the rest of the website’s rebrand.
What I learned
The asymmetrical design was fun, but it wasn’t a good fit for KUOW. It added additional burden to maintaining the form and was eventually removed. This projected helped me identify when visual design can have a negative effect on the long term success of the project.
As with most agency work, I didn’t get to iterate on this project. I would have loved to improved it based on new feedback and metrics once it was live. This project motivated me to move in-house so I could have more real-life feedback on my designs.
Want to chat?
kaitlinpowelldesign@gmail.com
(253) 254-6679