KUOW Donation Form
KUOW is a local Seattle NPR radio station. They needed to update and expand the capabilities of their donation form and bring it in line with their new branding. I redesigned the donation form and created a modern, responsive and truly interactive form that both follows and expands upon the KUOW brand guidelines.
|UX and UI Designer|
|KUOW, NPR Station|
- Update the donation form with modern web and ecommerce conventions to make a stronger donation “sell”.
- Address the UX pain points in the previous donation form.
- Consolidate donors into one system that allows for self-signup and management of ongoing donations.
- Update the design to match the new branding.
I was the sole designer. I created the visual design using inspiration from KUOW’s brand style guide.
• Client presentation
• UX design
• Visual design
• Responsive web design
• Icon design
• Asset export
• Design QA
• Sketch: UX & UI design
• Adobe Photoshop: photo editing
• Adobe Illustrator: icon design
• Invision: prototyping
Number one in my mind was making sure donors have complete control and understanding of what they are signing up for. The single vs monthly donation was changed to a tabbed select, and a summary header bar follows users down the page as a reminder.
The biggest challenge of this project was to create a structure that allows KUOW to make the best case for donation possible. Their previous form relied on gifts as the only motivator, and reflected that in the share content. While we know from user research that many KUOW donors give regularly to many causes and are not primarily motivated to donate to KUOW because of gifts. We wanted to elevate the company’s mission to a primary motivator by reflecting its importance in the UI and share content.
We found from their IT department that the most common problems in using the form was customer confusion over switching between single and monthly donations, the limited functionality of adding and removing gifts and the misuse of the partner field for dedications.
Sketches of the structure of the donation form
Sketches of the thank you page
The donation page has multiple up-sells after the donor selects their amount. The first of which 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.
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.
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.
Variation sketching on the header
The brand styleguide 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 partner input 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.
This is one of my favorite projects. At Moby we would work on huge high functionality applications waterfall style. This project was much more focused and incorporated user feedback that the client provided from their support team. The small scope meant I could spend extra time thinking about the design and working with the developer.
As I've learned more about agile process, I understand better now why I enjoyed this project so much. A small scope of work plus iteration allows you to make sure you're communicating well with the developer. It also gives you a chance to test and improve based on real-life improvement.