.png){kind=small}
The Prompt
For this Design Sprint, my team and I took a look at the websites of local, non-profit, organizations which lead us to the Women's Foundation of Florida. We conducted a heuristic analysis of their donation website and worked together to redesign the website in a way that prioritized user need's and the organization's best interest.
The Design Process
Discovery
Heuristic Evaluation
Interviews
Define
User Persona
Affinity Mapping
Themes & Insights
Ideate
User Flows
Sketches
Prototype
Low Fidelity Wireframes
Usability Testing
Prioritization Matrix
High Fidelity Wireframes
— Discovery
Heuristic Evaluation
In order to determine where we should direct our focus, my team and I first performed a heuristic evaluation of the WFF's donation pages on their website as that was the main call to action. By doing this we were able to identify 4 usability heuristics being violated allow me to walk you through them!
1. Consistency and Standards
-
The design throughout the donation pages is not consistent
-
Multiple layouts, colors, and backgrounds are used which can lead to confusion for the user
2. User Control and Freedom
-
Although the donation pages provide visibility of user status, they lack a "back" button for users to navigate to the previous screen
-
Lack of user control can lead to users growing frustrated and even abandoning the entire website altogether
3. Error Prevention
-
The current payment form does not utilize error prevention, to alert users when they have entered an invalid response
-
When used correctly, error prevention can minimize user frustration and increase efficiency
4. Efficiency of Use
-
The following page requires users to enter their Billing Address from scratch instead of providing the option to reuse the address entered in the previous step
-
It is common for website with such feilds to provide a "Use home address as billing" which speeds up the overall process of completing the form
Interviews
After completing our evaluation, we performed 10 user interviews to form a better understanding of our user's motivations and pain points. The insights from these interviews guided our additional design decisions and allowed us to create a more meaningful and impactful redesign.
During these interview sessions, we provided users with a fictional scenario that would minimize any constraints regarding our interviewee's financial status.
Participant Criteria
-
Florida Resident
-
Donates to or volunteers at nonprofit organizations
Interview Scenario
You have recently gotten a promotion from your current job and are now making $150,000 a year. You are now in search of a local non-profit to donate to.
— Define
User Personas
Using our data from our interviews, we were able to create 3 user personas that represented our interviewee's frustrations and motivations when donating to nonprofit organizations.
Tiana
-
Donates to give back to her community
-
Values transparency in an organization
Steven
-
Donates to causes that are close to him
-
Supports organizations with a positive representation
Cindy
-
Prefers to donate electronically
-
Wants to see what her contribution goes towards
Affinity Map
Next we created an affinity map to illustrate the main insights from our interviews by sorting our findings into motivations, behaviors, and pain points.
These findings were used to determine our main goals we were going to achieve through our redesign.
*Click to enlarge
Themes + Insights
From our findings we concluded that people donate based on 3 main things...
Users donate to feel fulfilled and satisfied
Users want to know what their monetary contributions are going towards
Users donate based on how impactful the organization is
moving forward we let these 3 main themes guide and determine our design decisions such as what and how we were going to redesign the website.
— Ideate
Previous User Journey
Below is the previous user journey with points of frustration highlighted, user's had to go through this specific flow to send a donation through the WFF website. We chose to make the donation flow the main focus of our redesign to address the business goal of receiving donations.
Updated User Flow
Using the previous user journey, we created an updated user flow that we utilized in our redesign that prioritized user's needs by getting them to reach their goal of sending a donation without running into any errors or confusion.
Sketches
After finalizing our new user flow, we began sketching potential designs, while taking our insights from interviews into consideration.
In the end we chose the following sketches from our team as a blueprint for our wireframes.
*Click to enlarge
— Prototype
Low Fidelity Wireframes
Now that we had selected a group of sketches to move forward with, we started the wire framing process. We created several low fidelity wireframes of the donation screens that utilized the new flow we had created.
We used minimal colors and a greyscale color palette throughout the screens to place the focus on function rather than aesthetics.
Usability Testing
With our first iteration complete, we performed usability testing before moving forward with our high fidelity wireframes, to confirm our design was functional. Each session took place in person in a decontextualized setting.
The insights gathered from these testing sessions were then sorted and influenced the design decisions made moving forward with our high fidelity iterations.
Testing Themes
Design Prioritization Matrix
We created a design matrix to help us sort and filter through the redesigns that had to be made after our usability testing sessions. This allowed us to evaluate the importance of each feature, the significance was determined by how impactful each component was to completing the donation flow.
*Click to enlarge
Design Changes
Here are the following changes that were made from the data we gathered from our user testing sessions.
Before
After
-
Having 2 clickable components on the first page confused users, creating frustration and a longer checkout time
-
Gave users one way to select their donation amount to eliminate confusion
Before
After
-
Removed hero image at the top of screen to bring focus to the donation steps
-
Placed donation amount inside of heart icon to improve the visibility
Heuristic Changes
Last but not least, these are the changes that were made in our redesign to address the initial usability heuristic violations found on the original website.
1. Consistency and Standards
-
Each screen of the donation flow utilizes the same colors, backgrounds and layouts that are consistent with the organization's branding
-
This will increase user's trust in the website and prevents increasing their cognitive load
2. User Control and Freedom
-
Each screen of the donation process has a back button, allowing users to navigate freely throughout the form
-
Giving users control of their place within the form will prevent users from feeling stuck and ease frustration
3. Error Prevention
-
When an invalid response is entered, users will be alerted by the response's text color turning red, as well as a notice at the top of the form
-
Assisting users in identifying mistakes in their responses will speed up the checkout process and make the form easier to use
4. Efficiency of Use
-
Users have the option to use the address previously entered in the form as their billing address
-
This saves users time, and makes the overall process more efficient
Users donate to feel fulfilled and satisfied
-
Show users photos and captions of those helped by the organization to display the impact of their contribution
Users want to know what their monetary contributions are going towards
-
Provide a thorough look at how donations are distributed throughout the organization
Users donate based on how impactful the organization is
-
Display several causes/movements the organization has assisted
— Key Learnings
Research Before Designing
It is important to conduct some form of research around your problem space or who you are designing for before you begin the actual wire-framing process.
It Is Okay to Go Back
Never hesitate to revise your previous work, you can learn always learn something from it such as what features work, and which ones to scrap entirely.
— Next Steps
Conduct another round of user testing to validate our final design
Hand off our final design to developers
Measure the success of our redesign by recording the volume of donations
.png)